ដួលរលំ
បិទ/បើកលទ្ធភាពមើលឃើញនៃមាតិកានៅទូទាំងគម្រោងរបស់អ្នកជាមួយនឹងថ្នាក់មួយចំនួន និងកម្មវិធីជំនួយ JavaScript របស់យើង។
របៀបដែលវាដំណើរការ
កម្មវិធីជំនួយ JavaScript ដែលដួលរលំត្រូវបានប្រើដើម្បីបង្ហាញ និងលាក់មាតិកា។ ប៊ូតុង ឬយុថ្កាត្រូវបានប្រើជាគន្លឹះដែលត្រូវបានផ្គូផ្គងទៅនឹងធាតុជាក់លាក់ដែលអ្នកបិទបើក។ ការបង្រួមធាតុមួយនឹងធ្វើឱ្យចលនា height
ពីតម្លៃបច្ចុប្បន្នរបស់វាទៅជា 0
. ដោយគិតពីរបៀបដែល CSS គ្រប់គ្រងចលនា អ្នកមិនអាចប្រើ padding
លើ .collapse
ធាតុបានទេ។ ជំនួសមកវិញ ប្រើថ្នាក់ជាធាតុរុំឯករាជ្យ។
prefers-reduced-motion
សំណួរមេឌៀ។ សូមមើល
ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។
ឧទាហរណ៍
ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញ និងលាក់ធាតុផ្សេងទៀតតាមរយៈការផ្លាស់ប្តូរថ្នាក់៖
.collapse
លាក់មាតិកា.collapsing
ត្រូវបានអនុវត្តក្នុងអំឡុងពេលអន្តរកាល.collapse.show
បង្ហាញមាតិកា
ជាទូទៅ យើងសូមណែនាំឱ្យប្រើប៊ូតុងដែលមាន data-bs-target
គុណលក្ខណៈ។ ខណៈពេលដែលមិនត្រូវបានផ្ដល់អនុសាសន៍ពីទស្សនៈន័យធៀប អ្នកក៏អាចប្រើតំណដែលមាន href
គុណលក្ខណៈ (និង a role="button"
) ផងដែរ។ ក្នុងករណីទាំងពីរនេះ data-bs-toggle="collapse"
ត្រូវបានទាមទារ។
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
គោលដៅជាច្រើន។
A <button>
ឬ <a>
អាចបង្ហាញ និងលាក់ធាតុជាច្រើនដោយយោងពួកវាដោយប្រើឧបករណ៍ជ្រើសរើសនៅក្នុង href
ឬ data-bs-target
គុណលក្ខណៈរបស់វា។ ច្រើន <button>
ឬ <a>
អាចបង្ហាញ និងលាក់ធាតុមួយ ប្រសិនបើពួកវានីមួយៗយោងវាជាមួយ href
ឬ data-bs-target
គុណលក្ខណៈ របស់ពួកគេ។
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
ភាពងាយស្រួល
ត្រូវប្រាកដថាបន្ថែម aria-expanded
ទៅធាតុត្រួតពិនិត្យ។ គុណលក្ខណៈនេះបង្ហាញយ៉ាងច្បាស់អំពីស្ថានភាពបច្ចុប្បន្ននៃធាតុដែលអាចដួលរលំបានដែលភ្ជាប់ទៅនឹងវត្ថុបញ្ជាទៅកាន់អ្នកអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា។ ប្រសិនបើធាតុដែលអាចបង្រួមបានត្រូវបានបិទតាមលំនាំដើម គុណលក្ខណៈនៅលើធាតុវត្ថុបញ្ជាគួរតែមានតម្លៃ aria-expanded="false"
. ប្រសិនបើអ្នកបានកំណត់ធាតុដែលអាចបង្រួមបានឱ្យបើកតាមលំនាំដើមដោយប្រើ show
ថ្នាក់ សូមកំណត់ aria-expanded="true"
លើវត្ថុបញ្ជាជំនួសវិញ។ កម្មវិធីជំនួយនឹងបិទបើកគុណលក្ខណៈនេះដោយស្វ័យប្រវត្តិនៅលើវត្ថុបញ្ជាដោយផ្អែកលើថាតើធាតុដែលអាចបង្រួមបានត្រូវបានបើក ឬបិទ (តាមរយៈ JavaScript ឬដោយសារតែអ្នកប្រើប្រាស់បានកេះធាតុវត្ថុបញ្ជាផ្សេងទៀតដែលភ្ជាប់ជាមួយធាតុដែលអាចបង្រួមបានដូចគ្នា)។ ប្រសិនបើធាតុ HTML របស់ធាតុវត្ថុបញ្ជាមិនមែនជាប៊ូតុង (ឧ. <a>
ឬ <div>
) គុណលក្ខណៈrole="button"
គួរតែត្រូវបានបន្ថែមទៅធាតុ។
ប្រសិនបើធាតុវត្ថុបញ្ជារបស់អ្នកកំពុងកំណត់គោលដៅធាតុដែលអាចបង្រួមបានតែមួយ - ពោលគឺ data-bs-target
គុណលក្ខណៈកំពុងចង្អុលទៅ id
ឧបករណ៍ជ្រើសរើស - អ្នកគួរតែបន្ថែម aria-controls
គុណលក្ខណៈទៅធាតុវត្ថុបញ្ជាដែលមានធាតុដែល id
អាចបង្រួមបាន។ កម្មវិធីអានអេក្រង់ទំនើប និងបច្ចេកវិជ្ជាជំនួយស្រដៀងគ្នា ប្រើប្រាស់លក្ខណៈនេះ ដើម្បីផ្តល់ឱ្យអ្នកប្រើប្រាស់នូវផ្លូវកាត់បន្ថែម ដើម្បីរុករកដោយផ្ទាល់ទៅកាន់ធាតុដែលអាចបង្រួមបាន។
ចំណាំថាការអនុវត្តបច្ចុប្បន្នរបស់ Bootstrap មិនគ្របដណ្តប់ អន្តរកម្មក្តារចុច ស្រេចចិត្ត ផ្សេងៗដែលបានពិពណ៌នានៅក្នុងគំរូ WAI-ARIA Authoring Practices 1.1 - អ្នកនឹងត្រូវបញ្ចូលវាដោយខ្លួនឯងជាមួយនឹង JavaScript ផ្ទាល់ខ្លួន។
សាស
អថេរ
$transition-collapse: height .35s ease;
ថ្នាក់
បង្រួមថ្នាក់ផ្លាស់ប្តូរអាចត្រូវបានរកឃើញនៅក្នុង scss/_transitions.scss
ដូចដែលវាត្រូវបានចែករំលែកនៅទូទាំងសមាសភាគជាច្រើន (ដួលរលំ និង accordion) ។
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
ការប្រើប្រាស់
កម្មវិធីជំនួយការដួលរលំប្រើថ្នាក់មួយចំនួនដើម្បីដោះស្រាយការលើកធ្ងន់៖
.collapse
លាក់មាតិកា.collapse.show
បង្ហាញមាតិកា.collapsing
ត្រូវបានបន្ថែមនៅពេលដែលការផ្លាស់ប្តូរចាប់ផ្តើម ហើយត្រូវបានដកចេញនៅពេលដែលវាបញ្ចប់
ថ្នាក់ទាំងនេះអាចរកបាននៅក្នុង _transitions.scss
.
តាមរយៈគុណលក្ខណៈទិន្នន័យ
គ្រាន់តែបន្ថែម data-bs-toggle="collapse"
និងមួយ data-bs-target
ទៅធាតុដើម្បីកំណត់ការគ្រប់គ្រងដោយស្វ័យប្រវត្តិនៃធាតុមួយឬច្រើនដែលអាចបង្រួម។ គុណលក្ខណៈ data-bs-target
ទទួលយកឧបករណ៍ជ្រើសរើស CSS ដើម្បីអនុវត្តការដួលរលំ។ ត្រូវប្រាកដថាបន្ថែមថ្នាក់ collapse
ទៅធាតុដែលអាចបង្រួមបាន។ ប្រសិនបើអ្នកចង់ឱ្យវាបើកលំនាំដើម សូមបន្ថែមថ្នាក់បន្ថែម show
។
ដើម្បីបន្ថែមការគ្រប់គ្រងក្រុមដូច accordion ទៅតំបន់ដែលអាចបង្រួមបាន សូមបន្ថែមគុណលក្ខណៈទិន្នន័យ data-bs-parent="#selector"
។ សូមមើលការបង្ហាញដើម្បីមើលសកម្មភាពនេះ។
តាមរយៈ JavaScript
បើកដំណើរការដោយដៃជាមួយ៖
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
ជម្រើស
ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-bs-
ដូចក្នុង data-bs-parent=""
.
ឈ្មោះ | ប្រភេទ | លំនាំដើម | ការពិពណ៌នា |
---|---|---|---|
parent |
អ្នកជ្រើសរើស | វត្ថុ jQuery | ធាតុ DOM | false |
ប្រសិនបើមេត្រូវបានផ្តល់ឱ្យ នោះធាតុដែលអាចបង្រួមបានទាំងអស់នៅក្រោមមេដែលបានបញ្ជាក់នឹងត្រូវបានបិទនៅពេលដែលធាតុដែលអាចបង្រួមបាននេះត្រូវបានបង្ហាញ។ (ស្រដៀងទៅនឹងអាកប្បកិរិយារបស់ accordion ប្រពៃណី - នេះគឺអាស្រ័យលើ card ថ្នាក់) ។ គុណលក្ខណៈត្រូវកំណត់នៅលើតំបន់ដែលអាចបង្រួមបានគោលដៅ។ |
toggle |
ប៊ូលីន | true |
បិទ/បើកធាតុដែលអាចបង្រួមបាននៅលើការហៅ |
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។
ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត object
។
អ្នកអាចបង្កើតការដួលរលំជាមួយ constructor ឧទាហរណ៍៖
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
វិធីសាស្រ្ត | ការពិពណ៌នា |
---|---|
toggle |
បិទ/បើកធាតុដែលអាចបង្រួមបានដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលធាតុដែលអាចបង្រួមបានត្រូវបានបង្ហាញ ឬលាក់ (ឧ. មុនពេល shown.bs.collapse ឬ hidden.bs.collapse ព្រឹត្តិការណ៍កើតឡើង)។ |
show |
បង្ហាញធាតុដែលអាចបង្រួមបាន។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលធាតុដែលអាចបង្រួមបានត្រូវបានបង្ហាញយ៉ាងពិត ប្រាកដ (ឧ. មុន shown.bs.collapse ព្រឹត្តិការណ៍កើតឡើង)។ |
hide |
លាក់ធាតុដែលអាចបង្រួមបាន។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញ មុនពេលធាតុដែលអាចបង្រួមបានត្រូវបានលាក់យ៉ាងពិត ប្រាកដ (ឧ. មុន hidden.bs.collapse ព្រឹត្តិការណ៍កើតឡើង)។ |
dispose |
បំផ្លាញការដួលរលំនៃធាតុមួយ។ (លុបទិន្នន័យដែលបានរក្សាទុកនៅលើធាតុ DOM) |
getInstance |
វិធីសាស្ត្រឋិតិវន្តដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ការដួលរលំដែលទាក់ទងនឹងធាតុ DOM អ្នកអាចប្រើវាដូចនេះ៖bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
វិធីសាស្ត្រឋិតិវន្តដែលត្រឡប់ឧទាហរណ៍ការដួលរលំដែលទាក់ទងនឹងធាតុ DOM ឬបង្កើតថ្មីមួយ ក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម។ អ្នកអាចប្រើវាដូចនេះ៖bootstrap.Collapse.getOrCreateInstance(element) |
ព្រឹត្តិការណ៍
ថ្នាក់ដួលរលំរបស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារដួលរលំ។
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.collapse |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
shown.bs.collapse |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលធាតុបង្រួមត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។ |
hide.bs.collapse |
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗនៅពេលដែល hide វិធីសាស្ត្រត្រូវបានហៅ។ |
hidden.bs.collapse |
ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលធាតុដួលរលំត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។ |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})