ទម្លាក់ចុះ

បិទ/បើកការត្រួតលើគ្នាតាមបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងអ្វីៗជាច្រើនទៀតដោយប្រើកម្មវិធីជំនួយទម្លាក់ចុះ Bootstrap ។

នៅលើទំព័រនេះ។

ទិដ្ឋភាពទូទៅ

ការទម្លាក់ចុះគឺអាចបិទបើកបាន ការត្រួតលើបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ និងច្រើនទៀត។ ពួកវាត្រូវបានធ្វើអន្តរកម្មជាមួយនឹងកម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ Bootstrap រួមបញ្ចូល។ ពួកវាត្រូវបានបិទបើកដោយការចុច មិនមែនដោយសំកាំងទេ។ នេះគឺជា ការសម្រេចចិត្តរចនាដោយចេតនា ។

ការទម្លាក់ចុះត្រូវបានបង្កើតឡើងនៅលើបណ្ណាល័យភាគីទីបី Popper ដែលផ្តល់នូវទីតាំងថាមវន្ត និងការរកឃើញច្រកចូលមើល។ ត្រូវប្រាកដថារួមបញ្ចូល popper.min.js មុនពេល JavaScript របស់ Bootstrap ឬប្រើ bootstrap.bundle.min.js/ bootstrap.bundle.jsដែលមាន Popper ។ Popper មិនត្រូវបានប្រើដើម្បីដាក់ទីតាំងទម្លាក់ចុះក្នុង navbars ទោះបីជាមិនទាមទារទីតាំងថាមវន្តក៏ដោយ។

ភាពងាយស្រួល

ស្ដង់ដា រ WAI ARIA កំណត់ role="menu"ធាតុក្រាហ្វិក ពិតប្រាកដ មួយ ប៉ុន្តែនេះគឺជាក់លាក់ចំពោះម៉ឺនុយដូចកម្មវិធីដែលបង្កឱ្យមានសកម្មភាព ឬមុខងារ។ ម៉ឺនុយ ARIA អាចមានតែធាតុម៉ឺនុយ ធាតុម៉ឺនុយប្រអប់ធីក ធាតុម៉ឺនុយប៊ូតុងមូល ក្រុមប៊ូតុងមូល និងម៉ឺនុយរង។

ម្យ៉ាងវិញទៀត ការទម្លាក់ចុះរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីឱ្យមានលក្ខណៈទូទៅ និងអាចអនុវត្តបានចំពោះស្ថានភាពផ្សេងៗ និងរចនាសម្ព័ន្ធសម្គាល់។ ជាឧទាហរណ៍ វាអាចបង្កើតបញ្ជីទម្លាក់ចុះដែលមានការបញ្ចូលបន្ថែម និងការគ្រប់គ្រងទម្រង់ ដូចជាវាលស្វែងរក ឬទម្រង់ចូល។ សម្រាប់ហេតុផលនេះ Bootstrap មិនរំពឹងថា (ឬបន្ថែមដោយស្វ័យប្រវត្តិ) ណាមួយនៃ roleនិង aria-គុណលក្ខណៈដែលត្រូវការសម្រាប់ ម៉ឺនុយ ARIA ពិត។ អ្នកនិពន្ធនឹងត្រូវបញ្ចូលគុណលក្ខណៈជាក់លាក់បន្ថែមទៀតទាំងនេះដោយខ្លួនឯង។

ទោះជាយ៉ាងណាក៏ដោយ Bootstrap បន្ថែមការគាំទ្រដែលភ្ជាប់មកជាមួយសម្រាប់អន្តរកម្មម៉ឺនុយក្តារចុចស្តង់ដារភាគច្រើន ដូចជាសមត្ថភាពក្នុងការផ្លាស់ទីតាមរយៈ .dropdown-itemធាតុនីមួយៗដោយប្រើគ្រាប់ចុចទស្សន៍ទ្រនិច និងបិទម៉ឺនុយដោយប្រើ ESCគ្រាប់ចុច។

ឧទាហរណ៍

រុំបិទបើករបស់ទម្លាក់ចុះ (ប៊ូតុង ឬតំណរបស់អ្នក) និងម៉ឺនុយទម្លាក់ចុះនៅក្នុង .dropdownឬធាតុផ្សេងទៀតដែលប្រកាស position: relative;។ ការទម្លាក់ចុះអាចត្រូវបានបង្កឡើងពី <a>ឬ <button>ធាតុនានាដើម្បីឱ្យសមនឹងតម្រូវការសក្តានុពលរបស់អ្នក។ ឧទាហរណ៍ដែលបង្ហាញនៅទីនេះប្រើ <ul>ធាតុ semantic ដែលសមស្រប ប៉ុន្តែការសម្គាល់ផ្ទាល់ខ្លួនត្រូវបានគាំទ្រ។

ប៊ូតុងតែមួយ

មួយណា .btnក៏បានអាចត្រូវបានប្រែក្លាយទៅជាការបិទបើកដោយទម្លាក់ចុះជាមួយនឹងការផ្លាស់ប្តូរការសម្គាល់មួយចំនួន។ នេះជារបៀបដែលអ្នកអាចដាក់ពួកវាឱ្យធ្វើការជាមួយ <button>ធាតុទាំងពីរ៖

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

ហើយជាមួយនឹង <a>ធាតុ៖

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

ផ្នែកដ៏ល្អបំផុតគឺអ្នកអាចធ្វើវាបានជាមួយនឹងវ៉ារ្យ៉ង់ប៊ូតុងណាមួយផងដែរ៖

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ប៊ូតុងបំបែក

ស្រដៀងគ្នានេះដែរ បង្កើតការទម្លាក់ចុះនៃប៊ូតុងបំបែកជាមួយនឹងសញ្ញាសម្គាល់ស្ទើរតែដូចគ្នាទៅនឹងការទម្លាក់ចុះនៃប៊ូតុងតែមួយ ប៉ុន្តែជាមួយនឹងការបន្ថែម .dropdown-toggle-splitសម្រាប់គម្លាតត្រឹមត្រូវជុំវិញប្រអប់ទម្លាក់ចុះ។

យើងប្រើថ្នាក់បន្ថែមនេះ ដើម្បីកាត់បន្ថយការផ្តេក paddingនៅផ្នែកម្ខាងៗនៃ cart 25% ហើយដកផ្នែក margin-leftដែលត្រូវបានបន្ថែមសម្រាប់ការទម្លាក់ប៊ូតុងធម្មតា។ ការផ្លាស់ប្តូរបន្ថែមទាំងនោះរក្សាគំនូសនៅកណ្តាលនៅក្នុងប៊ូតុងបំបែក និងផ្តល់នូវទំហំដែលសមស្របជាងមុនដែលនៅជិតប៊ូតុងមេ។

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ទំហំ

ប៊ូតុងទម្លាក់ចុះដំណើរការជាមួយប៊ូតុងគ្រប់ទំហំ រួមទាំងប៊ូតុងទម្លាក់ចុះលំនាំដើម និងបំបែក។

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ការធ្លាក់ចុះងងឹត

ជ្រើសរើសចូលទៅក្នុងបញ្ជីទម្លាក់ចុះដែលងងឹតជាងមុន ដើម្បីផ្គូផ្គងរបាររុករកងងឹត ឬរចនាប័ទ្មផ្ទាល់ខ្លួនដោយបន្ថែម .dropdown-menu-darkទៅលើធាតុដែលមានស្រាប់ .dropdown-menu។ មិនតម្រូវឱ្យមានការផ្លាស់ប្តូរចំពោះធាតុទម្លាក់ចុះទេ។

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ហើយដាក់វាទៅប្រើក្នុង navbar មួយ៖

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ទិសដៅ

RTL

ទិសដៅត្រូវបានឆ្លុះបញ្ចាំងនៅពេលប្រើ Bootstrap ក្នុង RTL មានន័យថា .dropstartនឹងបង្ហាញនៅផ្នែកខាងស្តាំ។

កណ្តាល

ធ្វើឱ្យម៉ឺនុយទម្លាក់ចុះនៅកណ្តាលខាងក្រោមបិទបើកជាមួយ .dropdown-centerធាតុមេ។

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ទម្លាក់ចុះ

កេះម៉ឺនុយទម្លាក់ចុះខាងលើធាតុដោយបន្ថែម .dropupទៅធាតុមេ។

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ទម្លាក់ចំកណ្តាល

ធ្វើឱ្យម៉ឺនុយទម្លាក់ចុះនៅកណ្តាលខាងលើបិទបើកជាមួយ .dropup-centerធាតុមេ។

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ទម្លាក់

កេះម៉ឺនុយទម្លាក់ចុះនៅខាងស្តាំនៃធាតុដោយបន្ថែម .dropendទៅធាតុមេ។

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ការចាប់ផ្តើម

កេះម៉ឺនុយទម្លាក់ចុះនៅខាងឆ្វេងនៃធាតុដោយបន្ថែម .dropstartទៅធាតុមេ។

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

អ្នកអាចប្រើ <a>ឬ <button>ធាតុជាធាតុទម្លាក់ចុះ។

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

អ្នកក៏អាចបង្កើតធាតុទម្លាក់ចុះដែលមិនអន្តរកម្មជាមួយ .dropdown-item-text. មានអារម្មណ៍សេរីដើម្បីធ្វើរចនាប័ទ្មបន្ថែមទៀតជាមួយ CSS ឬឧបករណ៍ប្រើប្រាស់អត្ថបទផ្ទាល់ខ្លួន។

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

សកម្ម

បន្ថែម .activeទៅធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះដើម្បីធ្វើ រចនាប័ទ្មពួកវាជាសកម្ម ។ ដើម្បីបញ្ជូនស្ថានភាពសកម្មទៅបច្ចេកវិទ្យាជំនួយ សូមប្រើ aria-currentគុណលក្ខណៈ — ដោយប្រើ pageតម្លៃសម្រាប់ទំព័របច្ចុប្បន្ន ឬ trueសម្រាប់ធាតុបច្ចុប្បន្ននៅក្នុងសំណុំមួយ។

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

ពិការ

បន្ថែម .disabledទៅធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះដើម្បីធ្វើ រចនាប័ទ្មពួកវាថាបានបិទ ។

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ 100% ពីខាងលើ និងនៅផ្នែកខាងឆ្វេងនៃមេរបស់វា។ អ្នកអាចផ្លាស់ប្តូរវាជាមួយនឹងថ្នាក់ទិសដៅ .drop*ប៉ុន្តែអ្នកក៏អាចគ្រប់គ្រងពួកវាជាមួយនឹងថ្នាក់កែប្រែបន្ថែមផងដែរ។

បន្ថែម .dropdown-menu-endទៅ .dropdown-menuស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។ ទិសដៅត្រូវបានឆ្លុះបញ្ចាំងនៅពេលប្រើ Bootstrap ក្នុង RTL មានន័យថា .dropdown-menu-endនឹងបង្ហាញនៅផ្នែកខាងឆ្វេង។

ព្រឺក្បាល! ការទម្លាក់ចុះត្រូវបានដាក់ដោយអរគុណចំពោះ Popper លើកលែងតែនៅពេលដែលពួកវាត្រូវបានផ្ទុកនៅក្នុងរបាររុករក។

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

ការតម្រឹមឆ្លើយតប

ប្រសិនបើអ្នកចង់ប្រើការតម្រឹមឆ្លើយតប សូមបិទការកំណត់ទីតាំងថាមវន្តដោយបន្ថែម data-bs-display="static"គុណលក្ខណៈ ហើយប្រើថ្នាក់បំរែបំរួលដែលឆ្លើយតប។

ដើម្បីតម្រឹម ខាងស្តាំ ម៉ឺនុយទម្លាក់ចុះជាមួយនឹងចំណុចឈប់ដែលបានផ្តល់ឱ្យ ឬធំជាងនេះ សូមបន្ថែម .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

ដើម្បីតម្រឹម ខាងឆ្វេង ម៉ឺនុយទម្លាក់ចុះជាមួយនឹងចំណុចឈប់ដែលបានផ្តល់ឱ្យឬធំជាងនេះ បន្ថែម .dropdown-menu-endនិង .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

ចំណាំថាអ្នកមិនចាំបាច់បន្ថែម data-bs-display="static"គុណលក្ខណៈទៅប៊ូតុងទម្លាក់ចុះនៅក្នុងរបាររុករកទេ ដោយសារ Popper មិនត្រូវបានប្រើនៅក្នុងរបាររុករក។

ជម្រើសតម្រឹម

ដោយទទួលយកជម្រើសភាគច្រើនដែលបានបង្ហាញខាងលើ នេះជាការបង្ហាញឧបករណ៍លិចផ្ទះបាយតូចមួយនៃជម្រើសនៃការតម្រឹមទម្លាក់ចុះជាច្រើននៅក្នុងកន្លែងតែមួយ។

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

បឋមកថា

បន្ថែមបឋមកថាទៅផ្នែកស្លាកនៃសកម្មភាពនៅក្នុងម៉ឺនុយទម្លាក់ចុះណាមួយ។

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

ការបែងចែក

បំបែកក្រុមនៃធាតុម៉ឺនុយដែលពាក់ព័ន្ធជាមួយផ្នែកបែងចែក។

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

អត្ថបទ

ដាក់អត្ថបទទម្រង់ឥតគិតថ្លៃណាមួយនៅក្នុងម៉ឺនុយទម្លាក់ចុះដែលមានអត្ថបទ ហើយប្រើ ឧបករណ៍ប្រើប្រាស់គម្លាត ។ ចំណាំថាអ្នកទំនងជាត្រូវការរចនាប័ទ្មទំហំបន្ថែម ដើម្បីរឹតបន្តឹងទទឹងម៉ឺនុយ។

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

ទម្រង់

ដាក់ទម្រង់បែបបទនៅក្នុងម៉ឺនុយទម្លាក់ចុះ ឬបង្កើតវាទៅក្នុងម៉ឺនុយទម្លាក់ចុះ ហើយប្រើឧបករណ៍ប្រើប្រាស់ រឹម ឬឧបករណ៍ប្រើប្រាស់ ដើម្បីផ្តល់ឱ្យវានូវចន្លោះអវិជ្ជមានដែលអ្នកត្រូវការ។

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

ប្រើ data-bs-offsetឬ data-bs-referenceផ្លាស់ប្តូរទីតាំងនៃបញ្ជីទម្លាក់ចុះ។

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

ឥរិយាបថបិទដោយស្វ័យប្រវត្តិ

តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានបិទនៅពេលចុចខាងក្នុង ឬខាងក្រៅម៉ឺនុយទម្លាក់ចុះ។ អ្នកអាចប្រើ autoCloseជម្រើសដើម្បីផ្លាស់ប្តូរឥរិយាបថនៃការទម្លាក់ចុះនេះ។

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

អថេរ

បានបន្ថែមនៅក្នុង v5.2.0

ជាផ្នែកមួយនៃវិធីសាស្រ្តអថេរ CSS ដែលកំពុងវិវឌ្ឍន៍របស់ Bootstrap ការទម្លាក់ចុះឥឡូវនេះប្រើអថេរ CSS មូលដ្ឋាន .dropdown-menuសម្រាប់ការកែលម្អតាមពេលវេលាជាក់ស្តែង។ តម្លៃសម្រាប់អថេរ CSS ត្រូវបានកំណត់តាមរយៈ Sass ដូច្នេះការប្ដូរតាមបំណង Sass នៅតែត្រូវបានគាំទ្រផងដែរ។

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

ការប្ដូរតាមបំណងតាមរយៈអថេរ CSS អាចមើលឃើញនៅលើ .dropdown-menu-darkថ្នាក់ដែលយើងបដិសេធតម្លៃជាក់លាក់ដោយមិនបន្ថែមឧបករណ៍ជ្រើសរើស CSS ស្ទួន។

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

អថេរ Sass

អថេរសម្រាប់ទម្លាក់ចុះទាំងអស់៖

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

អថេរសម្រាប់ ទម្លាក់ចុះងងឹត ៖

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

អថេរសម្រាប់ CSS-based carets ដែលបង្ហាញពីអន្តរកម្មរបស់ dropdown៖

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

ល្បាយ

Mixins ត្រូវបានប្រើដើម្បីបង្កើត CSS-based carets ហើយអាចរកបាននៅក្នុង scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

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

តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript កម្មវិធីជំនួយទម្លាក់ចុះបិទបើកមាតិកាដែលលាក់ (ម៉ឺនុយទម្លាក់ចុះ) ដោយបិទបើក .showថ្នាក់នៅលើមេ .dropdown-menu។ គុណលក្ខណៈ data-bs-toggle="dropdown"គឺពឹងផ្អែកលើការបិទម៉ឺនុយទម្លាក់ចុះនៅកម្រិតកម្មវិធី ដូច្នេះវាជាការប្រសើរក្នុងការប្រើវាជានិច្ច។

នៅលើឧបករណ៍ដែលបើកការប៉ះ ការបើកបញ្ជីទម្លាក់ចុះបន្ថែម mouseoverឧបករណ៍ដោះស្រាយទទេទៅកូន ៗ នៃ <body>ធាតុ។ ការ hack ដ៏អាក្រក់នេះពិតជាចាំបាច់ ដើម្បីធ្វើការជុំវិញ បញ្ហានៅក្នុងប្រតិភូព្រឹត្តិការណ៍របស់ iOS ដែលនឹងការពារការប៉ះនៅកន្លែងណាមួយនៅខាងក្រៅកម្មវិធីទម្លាក់ចុះពីការកេះកូដដែលបិទការទម្លាក់ចុះ។ mouseoverនៅពេលដែលការទម្លាក់ចុះត្រូវបានបិទ ឧបករណ៍ដោះស្រាយ ទទេបន្ថែមទាំងនេះ ត្រូវបានដកចេញ។

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

បន្ថែម data-bs-toggle="dropdown"ទៅតំណ ឬប៊ូតុងដើម្បីបិទបើកបញ្ជីទម្លាក់ចុះ។

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

តាមរយៈ JavaScript

ហៅបញ្ជីទម្លាក់ចុះតាមរយៈ JavaScript៖

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`នៅតែត្រូវការ

មិនថាអ្នកហៅ dropdown របស់អ្នកតាមរយៈ JavaScript ឬជំនួសអោយប្រើ data-api ទេ data-bs-toggle="dropdown"តែងតែតម្រូវឱ្យមានវត្តមាននៅលើធាតុ trigger របស់ dropdown ។

ជម្រើស

ដោយសារជម្រើសអាចត្រូវបានឆ្លងកាត់តាមគុណលក្ខណៈទិន្នន័យ ឬ 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}'.

ឈ្មោះ	ប្រភេទ	លំនាំដើម	ការពិពណ៌នា
`autoClose`	ប៊ូលីន, ខ្សែអក្សរ	`true`	កំណត់រចនាសម្ព័ន្ធឥរិយាបថបិទដោយស្វ័យប្រវត្តិនៃបញ្ជីទម្លាក់ចុះ៖ `true`- បញ្ជីទម្លាក់ចុះនឹងត្រូវបានបិទដោយចុចខាងក្រៅឬខាងក្នុងម៉ឺនុយទម្លាក់ចុះ។ `false`- បញ្ជីទម្លាក់ចុះនឹងត្រូវបានបិទដោយចុចប៊ូតុងបិទបើក ហើយហៅដោយដៃ `hide`ឬ `toggle`វិធីសាស្ត្រ។ (ក៏នឹងមិនត្រូវបានបិទដោយការចុច `esc`គ្រាប់ចុចផងដែរ) `'inside'`- បញ្ជីទម្លាក់ចុះនឹងត្រូវបានបិទ (តែប៉ុណ្ណោះ) ដោយចុចនៅខាងក្នុងម៉ឺនុយទម្លាក់ចុះ។ `'outside'`- បញ្ជីទម្លាក់ចុះនឹងត្រូវបានបិទ (តែប៉ុណ្ណោះ) ដោយចុចនៅខាងក្រៅម៉ឺនុយទម្លាក់ចុះ។ ចំណាំ៖ បញ្ជីទម្លាក់ចុះតែងតែអាចបិទដោយប្រើ `ESC`សោ។
`boundary`	ខ្សែអក្សរ, ធាតុ	`'clippingParents'`	ព្រំដែនកម្រិតលើសចំណុះនៃម៉ឺនុយទម្លាក់ចុះ (អនុវត្តតែចំពោះកម្មវិធីកែប្រែទប់ស្កាត់ការហូរលើសរបស់ Popper ប៉ុណ្ណោះ)។ តាមលំនាំដើម វាជា `clippingParents`និងអាចទទួលយកឯកសារយោង HTMLElement (តាមរយៈ JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារ detectOverflow របស់ Popper ។
`display`	ខ្សែអក្សរ	`'dynamic'`	តាមលំនាំដើម យើងប្រើ Popper សម្រាប់ការកំណត់ទីតាំងថាមវន្ត។ បិទវាជាមួយ `static`.
`offset`	អារេ ខ្សែអក្សរ មុខងារ	`[0, 2]`	អុហ្វសិតនៃការទម្លាក់ចុះទាក់ទងទៅនឹងគោលដៅរបស់វា។ អ្នកអាចបញ្ជូនខ្សែអក្សរក្នុងគុណលក្ខណៈទិន្នន័យដែលមានតម្លៃបំបែកដោយសញ្ញាក្បៀសដូចជា៖ `data-bs-offset="10,20"`. នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់អុហ្វសិត វាត្រូវបានហៅជាមួយវត្ថុដែលមានការដាក់ popper ឯកសារយោង និង popper rects ជាអាគុយម៉ង់ដំបូងរបស់វា។ ថ្នាំង DOM ធាតុកេះត្រូវបានឆ្លងកាត់ជាអាគុយម៉ង់ទីពីរ។ អនុគមន៍ត្រូវតែត្រឡប់អារេដែលមានលេខពីរ ៖ រំលង ចម្ងាយ ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper ។
`popperConfig`	null, object, function	`null`	ដើម្បីផ្លាស់ប្តូរការកំណត់ Popper លំនាំដើមរបស់ Bootstrap សូមមើល ការកំណត់រចនាសម្ព័ន្ធរបស់ Popper ។ នៅពេលដែលមុខងារមួយត្រូវបានប្រើដើម្បីបង្កើតការកំណត់រចនាសម្ព័ន្ធ Popper វាត្រូវបានហៅជាមួយវត្ថុដែលមានការកំណត់រចនាសម្ព័ន្ធ Popper លំនាំដើមរបស់ Bootstrap ។ វាជួយអ្នកប្រើ និងបញ្ចូលលំនាំដើមជាមួយការកំណត់ផ្ទាល់ខ្លួនរបស់អ្នក។ មុខងារត្រូវតែត្រឡប់វត្ថុកំណត់រចនាសម្ព័ន្ធសម្រាប់ Popper ។
`reference`	ខ្សែអក្សរ, ធាតុ, វត្ថុ	`'toggle'`	ធាតុយោងនៃម៉ឺនុយទម្លាក់ចុះ។ ទទួលយកតម្លៃនៃ `'toggle'`, `'parent'`, សេចក្តីយោង HTMLElement ឬវត្ថុដែលផ្តល់ `getBoundingClientRect`. សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារ constructor របស់ Popper និង ឯកសារ និម្មិត ។

ការប្រើប្រាស់មុខងារជាមួយ`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

វិធីសាស្រ្ត

វិធីសាស្រ្ត	ការពិពណ៌នា
`dispose`	បំផ្លាញការទម្លាក់ចុះនៃធាតុមួយ។ (លុបទិន្នន័យដែលបានរក្សាទុកនៅលើធាតុ DOM)
`getInstance`	វិធីសាស្ត្រឋិតិវន្តដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុទម្លាក់ចុះដែលទាក់ទងនឹងធាតុ DOM អ្នកអាចប្រើវាដូចនេះ៖ `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	វិធីសាស្ត្រឋិតិវន្តដែលត្រឡប់វត្ថុទម្លាក់ចុះដែលភ្ជាប់ទៅធាតុ DOM ឬបង្កើតថ្មីមួយ ក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម។ អ្នកអាចប្រើវាដូចនេះ៖ `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	លាក់ម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`show`	បង្ហាញម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`toggle`	បិទ/បើកម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`update`	ធ្វើបច្ចុប្បន្នភាពទីតាំងនៃការទម្លាក់ចុះនៃធាតុមួយ។

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

ព្រឹត្តិការណ៍ទម្លាក់ចុះទាំងអស់ត្រូវបានបញ្ឆេះនៅធាតុបិទបើក ហើយបន្ទាប់មកមានពពុះ។ ដូច្នេះ អ្នកក៏អាចបន្ថែមអ្នកស្តាប់ព្រឹត្តិការណ៍នៅលើ .dropdown-menuធាតុមេរបស់។ hide.bs.dropdownហើយ hidden.bs.dropdownព្រឹត្តិការណ៍មាន clickEventលក្ខណសម្បត្តិ (តែនៅពេលដែលប្រភេទព្រឹត្តិការណ៍ដើមគឺ click) ដែលមាន Event Object សម្រាប់ព្រឹត្តិការណ៍ចុច។

ប្រភេទព្រឹត្តិការណ៍	ការពិពណ៌នា
`hide.bs.dropdown`	ឆេះភ្លាមៗនៅពេលដែល `hide`វិធីសាស្ត្រ instance ត្រូវបានហៅ។
`hidden.bs.dropdown`	ចាប់ផ្តើមនៅពេលដែលការទម្លាក់ចុះបានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ ហើយការផ្លាស់ប្តូរ CSS បានបញ្ចប់។
`show.bs.dropdown`	ឆេះភ្លាមៗនៅពេលដែល `show`វិធីសាស្ត្រ instance ត្រូវបានហៅ។
`shown.bs.dropdown`	ដំណើរការនៅពេលដែលការទម្លាក់ចុះត្រូវបានធ្វើឱ្យមើលឃើញដោយអ្នកប្រើប្រាស់ ហើយការផ្លាស់ប្តូរ CSS បានបញ្ចប់។

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

ទម្លាក់ចុះ

ទិដ្ឋភាពទូទៅ

ភាពងាយស្រួល

ឧទាហរណ៍

ប៊ូតុងតែមួយ

ប៊ូតុងបំបែក

ទំហំ

ការធ្លាក់ចុះងងឹត

ទិសដៅ

RTL

កណ្តាល

ទម្លាក់ចុះ

ទម្លាក់ចំកណ្តាល

ទម្លាក់

ការចាប់ផ្តើម

ធាតុម៉ឺនុយ

សកម្ម

ពិការ

ការតម្រឹមម៉ឺនុយ

ការតម្រឹមឆ្លើយតប

ជម្រើសតម្រឹម

មាតិកាម៉ឺនុយ

បឋមកថា

ការបែងចែក

អត្ថបទ

ទម្រង់

ឥរិយាបថបិទដោយស្វ័យប្រវត្តិ

CSS

អថេរ

អថេរ Sass

ល្បាយ

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

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

តាមរយៈ JavaScript

`data-bs-toggle="dropdown"`នៅតែត្រូវការ

ជម្រើស

ការប្រើប្រាស់មុខងារជាមួយ`popperConfig`

វិធីសាស្រ្ត

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

ទម្លាក់ចុះ

ទិដ្ឋភាពទូទៅ

ភាពងាយស្រួល

ឧទាហរណ៍

ប៊ូតុងតែមួយ

ប៊ូតុងបំបែក

ទំហំ

ការធ្លាក់ចុះងងឹត

ទិសដៅ

RTL

កណ្តាល

ទម្លាក់ចុះ

ទម្លាក់ចំកណ្តាល

ទម្លាក់

ការចាប់ផ្តើម

ធាតុម៉ឺនុយ

សកម្ម

ពិការ

ការតម្រឹមម៉ឺនុយ

ការតម្រឹមឆ្លើយតប

ជម្រើសតម្រឹម

មាតិកាម៉ឺនុយ

បឋមកថា

ក្បាលចុះក្រោម

ការបែងចែក

អត្ថបទ

ទម្រង់

ជម្រើសទម្លាក់ចុះ

ឥរិយាបថបិទដោយស្វ័យប្រវត្តិ

CSS

អថេរ

អថេរ Sass

ល្បាយ

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

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

តាមរយៈ JavaScript

data-bs-toggle="dropdown"នៅតែត្រូវការ

ជម្រើស

ការប្រើប្រាស់មុខងារជាមួយpopperConfig

វិធីសាស្រ្ត

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

`data-bs-toggle="dropdown"`នៅតែត្រូវការ

ការប្រើប្រាស់មុខងារជាមួយ`popperConfig`