ដួលរលំ

របៀបដែលវាដំណើរការ

កម្មវិធីជំនួយ JavaScript ដែលដួលរលំត្រូវបានប្រើដើម្បីបង្ហាញ និងលាក់មាតិកា។ ប៊ូតុង ឬ​យុថ្កា​ត្រូវ​បាន​ប្រើ​ជា​គន្លឹះ​ដែល​ត្រូវ​បាន​ផ្គូផ្គង​ទៅ​នឹង​ធាតុ​ជាក់លាក់​ដែល​អ្នក​បិទ​បើក។ ការបង្រួមធាតុមួយនឹងធ្វើឱ្យចលនា heightពីតម្លៃបច្ចុប្បន្នរបស់វាទៅជា 0. ដោយគិតពីរបៀបដែល CSS គ្រប់គ្រងចលនា អ្នកមិនអាចប្រើ paddingលើ .collapseធាតុបានទេ។ ជំនួសមកវិញ ប្រើថ្នាក់ជាធាតុរុំឯករាជ្យ។

ឧទាហរណ៍

ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញ និងលាក់ធាតុផ្សេងទៀតតាមរយៈការផ្លាស់ប្តូរថ្នាក់៖

• .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>

ផ្ដេក

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

<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>អាចបង្ហាញ និងលាក់ធាតុជាច្រើនដោយយោងពួកវាដោយប្រើឧបករណ៍ជ្រើសរើសនៅក្នុង 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 មិនគ្របដណ្តប់ អន្តរកម្មក្តារចុច ស្រេចចិត្ត ផ្សេងៗដែលបានពិពណ៌នានៅក្នុង លំនាំ accordion ការណែនាំអំពីអ្នកនិពន្ធ ARIA ទេ - អ្នកនឹងត្រូវបញ្ចូលវាដោយខ្លួនឯងជាមួយនឹង 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

បើកដំណើរការដោយដៃជាមួយ៖

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

ជម្រើស

ដោយសារជម្រើសអាចត្រូវបានឆ្លងកាត់តាមគុណលក្ខណៈទិន្នន័យ ឬ JavaScript អ្នកអាចបន្ថែមឈ្មោះជម្រើសទៅ data-bs-ដូចក្នុង data-bs-animation="{value}". ត្រូវប្រាកដថាផ្លាស់ប្តូរប្រភេទករណីនៃឈ្មោះជម្រើសពី " camelCase " ទៅ " kebab-case " នៅពេលឆ្លងកាត់ជម្រើសតាមរយៈគុណលក្ខណៈទិន្នន័យ។ ឧទាហរណ៍ ប្រើ data-bs-custom-class="beautifier"ជំនួស data-bs-customClass="beautifier".

ចាប់ពី Bootstrap 5.2.0 សមាសធាតុទាំងអស់គាំទ្រ គុណលក្ខណៈទិន្នន័យដែលបានបម្រុងទុក ដោយពិសោធន៍data-bs-config ដែលអាចដាក់ការកំណត់រចនាសម្ព័ន្ធសមាសធាតុសាមញ្ញជាខ្សែអក្សរ JSON ។ នៅពេលដែលធាតុមាន data-bs-config='{"delay":0, "title":123}'និង data-bs-title="456"គុណលក្ខណៈ តម្លៃចុងក្រោយ titleនឹងជា 456ហើយគុណលក្ខណៈទិន្នន័យដាច់ដោយឡែកនឹងបដិសេធតម្លៃដែលបានផ្តល់ឱ្យនៅលើ data-bs-config. លើសពីនេះ គុណលក្ខណៈទិន្នន័យដែលមានស្រាប់អាចដាក់តម្លៃ JSON ដូចជា data-bs-delay='{"show":0,"hide":150}'.

វិធីសាស្រ្ត

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

ព្រឹត្តិការណ៍

ថ្នាក់ដួលរលំរបស់ Bootstrap លាតត្រដាងព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារដួលរលំ។

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})