រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

ដួលរលំ

បិទ/បើកការមើលឃើញនៃមាតិកានៅទូទាំងគម្រោងរបស់អ្នកជាមួយនឹងថ្នាក់មួយចំនួន និងកម្មវិធីជំនួយ 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"​ត្រូវ​បាន​ទាមទារ​។

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

ផ្ដេក

កម្មវិធីជំនួយការដួលរលំក៏គាំទ្រការដួលរលំផ្តេកផងដែរ។ បន្ថែម .collapse-horizontalថ្នាក់កែប្រែដើម្បីផ្លាស់ប្តូរ widthជំនួស heightហើយកំណត់ a widthលើធាតុកូនភ្លាមៗ។ មានអារម្មណ៍សេរីក្នុងការសរសេរ Sass ផ្ទាល់ខ្លួនរបស់អ្នក ប្រើរចនាប័ទ្មក្នុងបន្ទាត់ ឬប្រើ ឧបករណ៍ប្រើប្រាស់ទទឹង របស់យើង ។

សូមចំណាំថា ខណៈពេលដែលឧទាហរណ៍ខាងក្រោមមាន min-heightសំណុំដើម្បីជៀសវាងការលាបពណ៌ច្រើនពេកនៅក្នុងឯកសាររបស់យើង វាមិនត្រូវបានទាមទារឱ្យច្បាស់លាស់នោះទេ។ មានតែធាតុ widthនៅលើកុមារប៉ុណ្ណោះដែលត្រូវបានទាមទារ។

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

គោលដៅច្រើន។

A <button><a>អាចបង្ហាញ និងលាក់ធាតុជាច្រើនដោយយោងពួកវាដោយប្រើឧបករណ៍ជ្រើសរើសនៅក្នុង hrefdata-bs-targetគុណលក្ខណៈរបស់វា។ ច្រើន <button><a>អាចបង្ហាញ និងលាក់ធាតុមួយ ប្រសិនបើពួកវានីមួយៗយោងវាជាមួយ hrefdata-bs-targetគុណលក្ខណៈ របស់ពួកគេ។

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.
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.
<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;
$transition-collapse-width:   width .35s ease;

ថ្នាក់

បង្រួម​ថ្នាក់​ផ្លាស់ប្តូរ​អាច​ត្រូវ​បាន​រក​ឃើញ​នៅ​ក្នុង scss/_transitions.scss​ព្រោះ​វា​ត្រូវ​បាន​ចែក​រំលែក​នៅ​ទូទាំង​សមាសភាគ​ជា​ច្រើន (ដួលរលំ និង accordion) ។

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

ការប្រើប្រាស់

កម្មវិធីជំនួយការដួលរលំប្រើថ្នាក់មួយចំនួនដើម្បីដោះស្រាយការលើកធ្ងន់៖

  • .collapseលាក់មាតិកា
  • .collapse.showបង្ហាញមាតិកា
  • .collapsingត្រូវបានបន្ថែមនៅពេលដែលការផ្លាស់ប្តូរចាប់ផ្តើម ហើយត្រូវបានដកចេញនៅពេលដែលវាបញ្ចប់

ថ្នាក់ទាំងនេះអាចរកបាននៅក្នុង _transitions.scss.

តាមរយៈគុណលក្ខណៈទិន្នន័យ

គ្រាន់​តែ​បន្ថែម data-bs-toggle="collapse"​និង​មួយ data-bs-target​ទៅ​ធាតុ​ដើម្បី​កំណត់​ការ​គ្រប់​គ្រង​ដោយ​ស្វ័យ​ប្រវត្តិ​នៃ​ធាតុ​មួយ​ឬ​ច្រើន​ដែល​អាច​បង្រួម​។ គុណលក្ខណៈ data-bs-targetទទួលយកឧបករណ៍ជ្រើសរើស CSS ដើម្បីអនុវត្តការដួលរលំ។ ត្រូវប្រាកដថាបន្ថែមថ្នាក់ collapseទៅធាតុដែលអាចបង្រួមបាន។ ប្រសិនបើអ្នកចង់ឱ្យវាបើកលំនាំដើម សូមបន្ថែមថ្នាក់បន្ថែម show

ដើម្បីបន្ថែមការគ្រប់គ្រងក្រុមដូច accordion ទៅតំបន់ដែលអាចបង្រួមបាន សូមបន្ថែមគុណលក្ខណៈទិន្នន័យ data-bs-parent="#selector"។ សូមមើល ទំព័រ accordion សម្រាប់ព័ត៌មានបន្ថែម។

តាមរយៈ 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 ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើស​ពី​នេះ​ទៀត ការ​ហៅ​វិធី​សា​ស្រ្ត​លើ ​សមាសភាគ​ការ​ផ្លាស់​ប្តូរ​នឹង​ត្រូវ​បាន​មិន​អើពើ

សូមមើលឯកសារ JavaScript របស់យើងសម្រាប់ព័ត៌មានបន្ថែម

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុដែលអាចបង្រួមបាន។ ទទួលយកជម្រើសស្រេចចិត្ត object

អ្នក​អាច​បង្កើត​ការ​ដួលរលំ​ជាមួយ constructor ឧទាហរណ៍៖

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
វិធីសាស្រ្ត ការពិពណ៌នា
toggle បិទ/បើកធាតុដែលអាចបង្រួមបានដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ មុន​ពេល​ធាតុ​ដែល​អាច​បង្រួម​បាន​ត្រូវ​បាន​បង្ហាញ ឬ​លាក់ (ឧ. មុន​ពេល shown.bs.collapsehidden.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...
})