ទម្លាក់ចុះ

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

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

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

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

ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារutil.js .

ភាពងាយស្រួល

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

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

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

ឧទាហរណ៍

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

ប៊ូតុងតែមួយ

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

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

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ទំហំ

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

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ទិសដៅ

ទម្លាក់ចុះ

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ទំលាក់

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

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ទម្លាក់

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

មាតិកាម៉ឺនុយទម្លាក់ចុះជាប្រវត្តិសាស្ត្រ ត្រូវតែ ជាតំណភ្ជាប់ ប៉ុន្តែនោះមិនមែនជាករណីជាមួយ v4 ទៀតទេ។ ឥឡូវនេះអ្នកអាចប្រើជាជម្រើសក្នុងការប្រើ <button>ធាតុនៅក្នុងបញ្ជីទម្លាក់ចុះរបស់អ្នកជំនួសឱ្យគ្រាន់តែ <a>s ។

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

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

សកម្ម

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ពិការ

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ 100% ពីខាងលើ និងនៅផ្នែកខាងឆ្វេងនៃមេរបស់វា។ បន្ថែម .dropdown-menu-rightទៅ .dropdown-menuស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។

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

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

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

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

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

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

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

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

បឋមកថា

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

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

ការបែងចែក

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

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

អត្ថបទ

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

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

ទម្រង់

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

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

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

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

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

តាមរយៈ JavaScript

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

$('.dropdown-toggle').dropdown()

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

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

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-offset="".

ឈ្មោះ	ប្រភេទ	លំនាំដើម	ការពិពណ៌នា
អុហ្វសិត	លេខ \| ខ្សែអក្សរ \| មុខងារ	0	អុហ្វសិតនៃការទម្លាក់ចុះទាក់ទងទៅនឹងគោលដៅរបស់វា។ នៅពេលដែលអនុគមន៍មួយត្រូវបានប្រើដើម្បីកំណត់អុហ្វសិត វាត្រូវបានហៅជាមួយវត្ថុដែលមានទិន្នន័យអុហ្វសិតជាអាគុយម៉ង់ដំបូងរបស់វា។ មុខងារត្រូវតែត្រឡប់វត្ថុដែលមានរចនាសម្ព័ន្ធដូចគ្នា។ ថ្នាំង DOM ធាតុកេះត្រូវបានឆ្លងកាត់ជាអាគុយម៉ង់ទីពីរ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារអុហ្វសិត របស់ Popper.js ។
ត្រឡប់	ប៊ូលីន	ពិត	អនុញ្ញាតឱ្យទម្លាក់ចុះដើម្បីត្រឡប់ក្នុងករណីមានការជាន់គ្នាលើធាតុយោង។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារត្រឡប់ របស់ Popper.js ។
ព្រំដែន	ខ្សែអក្សរ \| ធាតុ	'scrollParent'	ហួសព្រំដែនកំណត់នៃម៉ឺនុយទម្លាក់ចុះ។ ទទួលយកតម��លៃនៃ `'viewport'`, `'window'`, `'scrollParent'`, ឬឯកសារយោង HTMLElement (JavaScript តែប៉ុណ្ណោះ)។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើលឯកសារ PreventOverflow របស់ Popper.js ។
ឯកសារយោង	ខ្សែអក្សរ \| ធាតុ	'បិទ/បើក'	ធាតុយោងនៃម៉ឺនុយទម្លាក់ចុះ។ ទទួលយកតម្លៃនៃ `'toggle'`, `'parent'`, ឬសេចក្តីយោង HTMLElement ។ សម្រាប់ព័ត៌មានបន្ថែម សូមមើល ឯកសារយោង របស់ Popper.js ។
បង្ហាញ	ខ្សែអក្សរ	'ថាមវន្ត'	តាមលំនាំដើម យើងប្រើ Popper.js សម្រាប់ការកំណត់ទីតាំងថាមវន្ត។ បិទវាជាមួយ `static`.
popperConfig	null \| វត្ថុ	មោឃៈ	ដើម្បីផ្លាស់ប្តូរការកំណត់លំនាំដើម Popper.js របស់ Bootstrap សូមមើល ការកំណត់រចនាសម្ព័ន្ធរបស់ Popper.js

ចំណាំនៅពេលដែល boundaryត្រូវបានកំណត់ទៅតម្លៃណាមួយក្រៅពី 'scrollParent'រចនាប័ទ្ម position: staticត្រូវបានអនុវត្តទៅ .dropdownកុងតឺន័រ។

វិធីសាស្រ្ត

វិធីសាស្រ្ត	ការពិពណ៌នា
`$().dropdown('toggle')`	បិទ/បើកម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`$().dropdown('show')`	បង្ហាញម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`$().dropdown('hide')`	លាក់ម៉ឺនុយទម្លាក់ចុះនៃរបាររុករកដែលបានផ្តល់ឱ្យ ឬការរុករកផ្ទាំង។
`$().dropdown('update')`	ធ្វើបច្ចុប្បន្នភាពទីតាំងនៃការទម្លាក់ចុះនៃធាតុមួយ។
`$().dropdown('dispose')`	បំផ្លាញការទម្លាក់ចុះនៃធាតុមួយ។

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

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

ទម្លាក់ចុះ

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

ភាពងាយស្រួល

ឧទាហរណ៍

ប៊ូតុងតែមួយ

ប៊ូតុងបំបែក

ទំហំ

ទិសដៅ

ទម្លាក់ចុះ

ទំលាក់

ទម្លាក់

ធាតុម៉ឺនុយ

សកម្ម

ពិការ

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

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

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

បឋមកថា

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

ការបែងចែក

អត្ថបទ

ទម្រង់

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

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

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

តាមរយៈ JavaScript

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

ជម្រើស

វិធីសាស្រ្ត

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

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