ဆွဲချမှုများ

Bootstrap dropdown plugin ဖြင့် လင့်ခ်များစာရင်းများနှင့် အခြားအရာများကိုပြသရန်အတွက် ဆက်စပ်သောထပ်ဆင့်မှုများကို အဖွင့်အပိတ်လုပ်ပါ။

ဤစာမျက်နှာတွင်

ခြုံငုံသုံးသပ်ချက်

လင့်ခ်များစာရင်းများနှင့် အခြားအရာများကိုပြသရန်အတွက် ဆက်စပ်အလွှာများ နှင့် အခြားအရာများကို ပြောင်းလဲနိုင်သည်။ ၎င်းတို့သည် ပါဝင်သော Bootstrap dropdown JavaScript plugin ဖြင့် အပြန်အလှန်တုံ့ပြန်မှု ပြုလုပ်ထားသည်။ ပျံဝဲခြင်းမဟုတ်ဘဲ ကလစ်ဖြင့် ခလုတ်နှိပ်ခြင်း၊ ဒါက ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်တစ်ခု ပါ။

Dropdown များကို ရွေ့လျားနေရာချထားခြင်းနှင့် မြင်ကွင်းပို့သိရှိခြင်းတို့ကို ပံ့ပိုးပေးသည့် ပြင်ပအဖွဲ့အစည်းစာကြည့်တိုက်၊ Popper ပေါ်တွင် တည်ဆောက်ထားသည် ။ Bootstrap ၏ JavaScript မတိုင်မီ popper.min.js ကိုထည့်သွင်းပါ သို့မဟုတ် Popper ပါရှိသော bootstrap.bundle.min.js/ ကိုအသုံးပြုပါ။ bootstrap.bundle.jsPopper သည် navbars တွင် dropdowns များကို နေရာချရန် အသုံးမပြုသော်လည်း dynamic positioning ကို မလိုအပ်ပါ။

သုံးစွဲနိုင်မှု

WAI ARIA စံနှုန်းသည် တကယ့်ဝစ်ဂျက်တစ်ခုကို သတ်မှတ် role="menu"ပေးသည် ၊ သို့သော် ၎င်းသည် လုပ်ဆောင်ချက်များ သို့မဟုတ် လုပ်ဆောင်ချက်များကို အစပျိုးပေးသည့် အပလီကေးရှင်းကဲ့သို့သော မီနူးများအတွက် သီးသန့်ဖြစ်သည်။ ARIA မီနူးများတွင် မီနူးအရာများ၊ အမှတ်ခြစ်ထားသော မီနူးအရာများ၊ ရေဒီယိုခလုတ်မီနူးအရာများ၊ ရေဒီယိုခလုတ်အုပ်စုများနှင့် မီနူးခွဲများသာ ပါဝင်နိုင်သည်။

တစ်ဖက်တွင်မူ Bootstrap ၏ dropdowns များသည် ယေဘူယျဖြစ်ပြီး အခြေအနေအမျိုးမျိုးနှင့် markup တည်ဆောက်ပုံများတွင် အသုံးပြုနိုင်စေရန် ဒီဇိုင်းထုတ်ထားသည်။ ဥပမာအားဖြင့်၊ ရှာဖွေမှုအကွက်များ သို့မဟုတ် လော့ဂ်အင်ဖောင်များကဲ့သို့သော ထပ်လောင်းထည့်သွင်းမှုများနှင့် ဖောင်ထိန်းချုပ်မှုများပါရှိသော dropdown များကို ဖန်တီးနိုင်သည်။ ဤအကြောင်းကြောင့်၊ Bootstrap သည် စစ်မှန်သော ARIA မီနူး များအတွက် လိုအပ်သော အရည်အချင်းများ roleနှင့် မည်သည်ကိုမျှ (အလိုအလျောက်ထည့်မည်မဟုတ်) မျှော်လင့်မထားပေ ။ စာရေးဆရာများသည် ဤပိုမိုတိကျသော အရည်အချင်းများကို ကိုယ်တိုင်ထည့်သွင်းရပါမည်။aria-

.dropdown-itemသို့သော်၊ Bootstrap သည် cursor ခလုတ်များကို အသုံးပြု၍ ခလုတ်များကို အသုံးပြု၍ အစိတ်အပိုင်းတစ်ခုချင်းစီကို ရွေ့လျားနိုင်ပြီး မီနူးကို သော့ဖြင့်ပိတ် နိုင်မှုကဲ့သို့သော စံကီးဘုတ်မီနူး အပြန်အလှန်တုံ့ပြန်မှုအများစုအတွက် built-in ပံ့ပိုးမှုကို ထည့်သွင်းထားသည် ESC။

ဥပမာများ

dropdown ၏ toggle (သင့်ခလုတ် သို့မဟုတ် လင့်ခ်) နှင့် dropdown menu အတွင်း .dropdownသို့မဟုတ် ကြေငြာသော အခြားအရာတစ်ခုကို ခြုံ position: relative;ပါ။ <a>သင်၏ ဖြစ်နိုင်ချေ ရှိသော <button>လိုအပ်ချက်များနှင့် ပိုမိုကိုက်ညီစေရန် အစိတ်အပိုင်းများ မှ ဆွဲချမှုများကို အစပျိုးနိုင်သည် ။ ဤနေရာတွင် ပြသထားသော ဥပမာများသည် <ul>သင့်လျော်သောနေရာတွင် အဓိပ္ပါယ်ရှိသော ဒြပ်စင်များကို အသုံးပြုသော်လည်း စိတ်ကြိုက် markup ကို ပံ့ပိုးထားသည်။

တစ်ချက်နှိပ်လိုက်ပါ။

မည်သည့်တစ်ခုတည်းကိုမဆို .btnmarkup အပြောင်းအလဲများဖြင့် dropdown toggle အဖြစ်ပြောင်းနိုင်သည်။ <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-splitdropdown caret တစ်ဝိုက်တွင် သင့်လျော်သောအကွာအဝေးအတွက် ပေါင်းထည့်ခြင်းဖြင့်။

paddingကတ်၏တစ်ဖက်တစ်ချက်ရှိ အလျားလိုက်ကို 25% လျှော့ချရန်နှင့် margin-leftပုံမှန်ခလုတ် dropdowns အတွက် ထည့်သွင်းထားသည့် အရာများကို ဖယ်ရှားရန် ဤအပိုအတန်းအစားကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။ ဤအပိုပြောင်းလဲမှုများသည် ကတ်ကိုခွဲခလုတ်တွင် ဗဟိုပြုထားကာ ပင်မခလုတ်ဘေးရှိ ပိုမိုသင့်လျော်သော အရွယ်အစားထိမှန်ဧရိယာကို ပေးဆောင်သည်။

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

အရွယ်အစား

ခလုတ် dropdowns များသည် ပုံသေနှင့် ခွဲထားသော dropdown ခလုတ်များအပါအဝင် အရွယ်အစားအားလုံး၏ ခလုတ်များနှင့် အလုပ်လုပ်ပါသည်။

<!-- 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ရှိပြီးသားတစ်ခုသို့ ပေါင်းထည့်ခြင်းဖြင့် မှောင်သော navbar သို့မဟုတ် စိတ်ကြိုက်စတိုင်နှင့် ကိုက်ညီရန် ပိုနက်သော dropdowns များကို ရွေးချယ်ပါ .dropdown-menu။ dropdown items အတွက် အပြောင်းအလဲ မလိုအပ်ပါ။

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

RTL တွင် Bootstrap ကိုအသုံးပြုသည့်အခါ လမ်းညွှန်ချက်များကို ထင်ဟပ်စေသည်၊ အဓိပ္ပါယ်မှာ .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

.dropupပင်မဒြပ်စင်သို့ ပေါင်းထည့်ခြင်းဖြင့် ဒြပ်စင်များအထက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<!-- 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 ကို ဗဟိုပြုသည်။

.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ပင်မဒြပ်စင်သို့ ထည့်ခြင်းဖြင့် ဒြပ်စင်များ၏ညာဘက်ရှိ dropdown menus များကို အစပျိုးပါ ။

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

.dropstartပင်မဒြပ်စင်သို့ ပေါင်းထည့်ခြင်းဖြင့် ဒြပ်စင်များ၏ဘယ်ဘက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<!-- 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>ဒြပ်စင်များကို dropdown items အဖြစ် သင်သုံးနိုင်သည် ။

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 items များကိုလည်း ဖန်တီးနိုင်သည် .dropdown-item-text။ စိတ်ကြိုက် CSS သို့မဟုတ် စာသား utilities များဖြင့် ထပ်မံစတိုင်လ်ကျရန် လွပ်လပ်စွာခံစားပါ။

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 dropdown ရှိ အရာများ ထဲသို့ ထည့်ပါ ။ လက်ရှိစာမျက်နှာအတွက် တန်ဖိုးကို အသုံးပြု၍ သို့မဟုတ် အစုတစ်ခုအတွင်းရှိ လက်ရှိအရာအတွက် ရည်ညွှန်း ချက်ကို အသုံးပြု၍ တက်ကြွသောအခြေအနေအား ပံ့ပိုးပေးသည့်နည်းပညာများကို အသုံးပြု ပါ။aria-currentpagetrue

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 အဖြစ် ပုံစံသတ်မှတ်ရန်.disabled dropdown ရှိ အရာများ ထဲသို့ ထည့်ပါ ။

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>

ပုံမှန်အားဖြင့်၊ dropdown menu ကို ထိပ်ပိုင်းနှင့် ၎င်း၏မိဘ၏ ဘယ်ဘက်ခြမ်းတွင် 100% အလိုအလျောက် နေရာချထားပါသည်။ ၎င်းကို ဦးတည်သည့် .drop*အတန်းများဖြင့် သင်ပြောင်းလဲနိုင်သော်လည်း ၎င်းတို့ကို အပိုမွမ်းမံမှုအတန်းများဖြင့်လည်း သင်ထိန်းချုပ်နိုင်သည်။

dropdown menu ကို ညာဘက်သို့ ချိန်ညှိရန် .dropdown-menu-enda သို့ ထည့်ပါ ။ .dropdown-menuRTL တွင် Bootstrap ကိုအသုံးပြုသောအခါ လမ်းညွှန်ချက်များကို ထင်ဟပ်စေသည်၊ ဆိုလိုသည်မှာ .dropdown-menu-endဘယ်ဘက်ခြမ်းတွင် ပေါ်လာမည်ဖြစ်သည်။

ကြိုတင်အသိပေးသည်! ဆွဲချမှုများကို navbar တွင်ထည့်သွင်းထားသည့်အခါမှလွဲ၍ 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"တုံ့ပြန်မှုပုံစံပြောင်းလဲခြင်းအတန်းများကို အသုံးပြုခြင်းဖြင့် တက်ကြွသောနေရာချထားခြင်းကို ပိတ်ပါ။

ပေးထားသော breakpoint သို့မဟုတ် ပိုကြီးသော dropdown menu ကို ညာဘက်သို့ ညှိရန် ၊ ထည့်ပါ .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>

ပေးထားသော breakpoint သို့မဟုတ် ပိုကြီးသော dropdown menu ကို ဘယ်ဘက် တွင် ညှိရန် ၊ ပေါင်းထည့် .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 ကို navbars တွင် အသုံးမပြုသောကြောင့် သင်သည် navbars တွင် dropdown ခလုတ်များ အတွက် attribute ကိုထည့်ရန် မလိုအပ်ကြောင်း သတိပြုပါ။

ချိန်ညှိမှု ရွေးချယ်စရာများ

အထက်တွင်ပြထားသည့်ရွေးချယ်စရာအများစုကိုယူပြီး၊ ဤနေရာတွင် တစ်နေရာတည်းတွင် အမျိုးမျိုးသော dropdown alignment options များ၏ မီးဖိုချောင်သုံးရေကန်ငယ် နမူနာတစ်ခုဖြစ်သည်။

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>

ခေါင်းစီးများ

မည်သည့် dropdown menu တွင်မဆို လုပ်ဆောင်ချက်များ၏ အညွှန်းကဏ္ဍများသို့ ခေါင်းစီးတစ်ခုထည့်ပါ။

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>

စာသား

စာသားပါသော dropdown menu တွင် မည်သည့် freeform စာသားကိုမဆို နေရာချပြီး spacing utilities ကိုသုံး ပါ။ မီနူးအကျယ်ကို ကန့်သတ်ရန် အပိုအရွယ်အစားစတိုင်များ လိုအပ်ကြောင်း သတိပြုပါ။

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>

ပုံစံများ

dropdown menu အတွင်း ဖောင်တစ်ခုထည့်ပါ သို့မဟုတ် dropdown menu တွင် ပြုလုပ်ပါ၊ ၎င်းကို သင်လိုအပ်သော အနုတ်လက္ခဏာနေရာ ပေးရန် အတွက် အနားသတ် သို့မဟုတ် ပက်ဒ် utilities ကို အသုံးပြုပါ။

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>

dropdown ၏တည်နေရာကိုပြောင်းလဲရန် 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>

အလိုအလျောက်ပိတ်သောအပြုအမူ

ပုံသေအားဖြင့်၊ dropdown menu သည် dropdown menu အတွင်း သို့မဟုတ် အပြင်ဘက်တွင် နှိပ်သောအခါတွင် dropdown menu ကို ပိတ်ထားသည်။ autoClosedropdown ၏ဤအပြုအမူကိုပြောင်းလဲရန်ရွေးချယ်မှုကို သင်အသုံးပြုနိုင်ပါသည် ။

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 တွင် ထည့်သွင်းထားသည်။

Bootstrap ၏ ပြောင်းလဲနေသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခု dropdowns များသည် local CSS variables များကို .dropdown-menuပိုမိုကောင်းမွန်အောင် အချိန်နှင့်တပြေးညီ စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို 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};

.dropdown-menu-darkထပ်နေသော CSS ရွေး စရာများကို မထည့်ဘဲ သီးခြားတန်ဖိုးများကို ထပ်မွမ်းမံထားသည့် CSS variable များမှတစ်ဆင့် စိတ်ကြိုက်ပြုလုပ်ခြင်းကို အတန်းတွင်တွေ့နိုင်ပါသည် ။

  --#{$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 ကိန်းရှင်များ

dropdowns အားလုံးအတွက် variable များ-

$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 အတွက် variable များ

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

dropdown ၏ အပြန်အလှန်တုံ့ပြန်မှုကို ညွှန်ပြသော CSS-based carets အတွက် variables များ-

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

Mixins

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

အသုံးပြုမှု

ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့်၊ dropdown plugin သည် .showမိဘရှိ အတန်းကို ပြောင်းခြင်းဖြင့် ဝှက်ထားသော အကြောင်းအရာ (dropdown menus) ကို ပြောင်းပေးသည် .dropdown-menu။ ရည်ညွှန်းချက်သည် အ data-bs-toggle="dropdown"ပလီကေးရှင်းအဆင့်ရှိ dropdown menus များကိုပိတ်ရန်အတွက် အားကိုးထားသောကြောင့် ၎င်းကို အမြဲသုံးရန် စိတ်ကူးကောင်းပါသည်။

ထိတွေ့အသုံးပြုနိုင်သော စက်များတွင်၊ ဒေါင်းလုပ်တစ်ခုဖွင့်ခြင်းသည် ဒြပ်စင် mouseover၏ ချက်ချင်းလက်ငင်းကလေးများထံသို့ ဗလာရှိသော ကိုင်တွယ်သူများကို ပေါင်းထည့် သည်။ <body>ဤရုပ်ဆိုးသော ဟက်ခ်သည် iOS ၏ အစီအစဉ်ကိုယ်စားလှယ်အဖွဲ့တွင် ဇာတ် ကွက်တစ်ခုလုပ်ဆောင်ရန် လိုအပ်သည် ၊ ၎င်းသည် dropdown ၏အပြင်ဘက်ရှိ မည်သည့်နေရာတွင်မဆို နှိပ်ခြင်းဖြင့် dropdown ကိုပိတ်သောကုဒ်ကိုစတင်ခြင်းမှတားဆီးနိုင်မည်ဖြစ်သည်။ dropdown ကို ပိတ်ပြီးသည်နှင့်၊ ဤအပိုအလွတ် mouseoverကိုင်တွယ်သူများကို ဖယ်ရှားပါမည်။

ဒေတာဂုဏ်တော်များမှတဆင့်

data-bs-toggle="dropdown"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 မှတဆင့် dropdown များကိုခေါ်ဆိုပါ-

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"dropdown ၏ trigger element တွင် အမြဲရှိနေရန် လိုအပ်သည်။

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့် ကျော်ဖြတ်နိုင်သောကြောင့်၊ သင်သည် ရွေးချယ်မှုအမည်တစ်ခုအား ထည့်သွင်း data-bs-နိုင်သည် data-bs-animation="{value}"။ ဒေတာ attribute များမှတစ်ဆင့် ရွေးချယ်မှုများကို ဖြတ်သန်းသည့်အခါ “ camelCase ” မှ “ kebab-case ” သို့ ရွေးချယ်မှုအမည်၏ case အမျိုးအစားကို ပြောင်းလဲရန် သေချာပါစေ ။ ဥပမာအားဖြင့်၊ data-bs-custom-class="beautifier"အစားကို သုံးပါ data-bs-customClass="beautifier"။

Bootstrap 5.2.0 အရ၊ အစိတ်အပိုင်းအားလုံးသည် JSON စာကြောင်းကဲ့သို့ ရိုးရှင်းသော အစိတ်အပိုင်းဖွဲ့စည်းမှုပုံစံကို ထားရှိပေးနိုင်သည့် စမ်းသပ် လက်ဝယ်ထားသော ဒေတာ attribute ကို ပံ့ပိုးပေးပါသည်။ data-bs-configဒြပ်စင်တစ်ခုတွင် ရည်ညွှန်းချက်ပါရှိသည့်အခါ ၊ နောက်ဆုံး တန်ဖိုးသည် ဖြစ်မည်ဖြစ်ပြီး သီးခြားဒေ data-bs-config='{"delay":0, "title":123}'တာ attribute များသည် ပေးထားသောတန်ဖိုးများကို အစားထိုးမည်ဖြစ်သည် ။ ထို့အပြင်၊ ရှိပြီးသားဒေတာ attribute များသည် JSON တန်ဖိုးများကဲ့သို့ နေရာယူနိုင်သည် ။data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
`autoClose`	ဘူလီယံ၊ ကြိုးတစ်ချောင်း	`true`	dropdown ၏ အလိုအလျောက်ပိတ်သည့် အပြုအမူကို ပြင်ဆင်သတ်မှတ်ပါ- `true`- အပြင်ဘက် သို့မဟုတ် dropdown menu အတွင်းသို့ နှိပ်ခြင်းဖြင့် dropdown ကို ပိတ်ပါမည်။ `false`- toggle ခလုတ်ကိုနှိပ်ပြီး လူကိုယ်တိုင်ခေါ်ဆိုခြင်း `hide`သို့မဟုတ် `toggle`နည်းလမ်းဖြင့် dropdown ကို ပိတ်ပါမည်။ `esc`( သော့ နှိပ်၍လည်း ပိတ်မည်မဟုတ်ပါ ) `'inside'`- dropdown menu ကိုနှိပ်ခြင်းဖြင့် dropdown ကို (သာလျှင်) ပိတ်လိမ့်မည်။ `'outside'`- dropdown menu အပြင်ဘက်တွင် နှိပ်ခြင်းဖြင့် dropdown ကို (သာ) ပိတ်ပါမည်။ `ESC`မှတ်ချက်- dropdown ကို သော့ ဖြင့် အမြဲပိတ်နိုင်သည် ။
`boundary`	string၊ ဒြပ်စင်	`'clippingParents'`	ဆွဲချမီနူး၏ အလျှံပယ်ကန့်သတ် နယ်နိမိတ် ( Popper ၏ တားဆီးမှု လွှမ်းမိုးမှု ပြုပြင်မွမ်းမံမှု နှင့်သာ သက်ဆိုင်သည်)။ မူရင်းအားဖြင့် ၎င်းသည် `clippingParents`HTMLElement အကိုးအကား (JavaScript မှတဆင့်သာ) လက်ခံနိုင်သည်။ နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ detectOverflow docs ကို ကိုးကားပါ ။
`display`	ကြိုးတစ်ချောင်း	`'dynamic'`	ပုံမှန်အားဖြင့်၊ ကျွန်ုပ်တို့သည် ပြောင်းလဲနေသောနေရာချထားမှုအတွက် Popper ကိုအသုံးပြုသည်။ ၎င်းကို ပိတ်ပါ `static`။
`offset`	array ၊ string ၊ function	`[0, 2]`	၎င်း၏ပစ်မှတ်နှင့် နှိုင်းယှဥ်သော dropdown ၏ offset သင်သည် အောက်ပါကဲ့သို့ ကော်မာခြားထားသော တန်ဖိုးများဖြင့် ဒေတာ attribute များတွင် စာကြောင်းတစ်ခုကို ဖြတ်သန်းနိုင်သည် `data-bs-offset="10,20"`။ အော့ဖ်ဆက်ကို ဆုံးဖြတ်ရန် လုပ်ဆောင်ချက်တစ်ခုကို အသုံးပြုသောအခါ၊ ၎င်းကို ၎င်း၏ပထမအငြင်းအခုံအဖြစ် popper နေရာချထားမှု၊ ရည်ညွှန်းချက်နှင့် popper rects ပါရှိသော အရာတစ်ခုဖြင့် ခေါ်သည်။ အစပျိုးသည့်ဒြပ်စင် DOM node ကို ဒုတိယအငြင်းအခုံအဖြစ် ကျော်ဖြတ်သည်။ လုပ်ဆောင်ချက်သည် နံပါတ်နှစ်ခုပါသော array ကို ပြန်ပေးရမည်- လမ်းချော် ခြင်း၊ အကွာအဝေး ။ နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ offset docs ကို ကိုးကားပါ ။
`popperConfig`	null, object, function	`null`	Bootstrap ၏မူလ Popper config ကိုပြောင်းလဲရန် Popper ၏ဖွဲ့စည်းပုံ ကိုကြည့်ပါ ။ Popper configuration ကိုဖန်တီးရန် function တစ်ခုကိုအသုံးပြုသောအခါ၊ ၎င်းကို Bootstrap ၏မူလ Popper configuration ပါ ၀ င်သည့်အရာတစ်ခုဖြင့်ခေါ်သည်။ ၎င်းသည် သင့်အား သင့်ကိုယ်ပိုင် configuration ဖြင့် ပုံသေပုံစံကို အသုံးပြုပြီး ပေါင်းစည်းရန် ကူညီပေးသည်။ လုပ်ဆောင်ချက်သည် Popper အတွက် ဖွဲ့စည်းမှုအရာဝတ္တုတစ်ခုကို ပြန်ပေးရပါမည်။
`reference`	string, element, object	`'toggle'`	dropdown menu ၏အကိုးအကားဒြပ်စင်။ `'toggle'`, `'parent'`, HTMLElement အကိုးအကား သို့မဟုတ် အရာဝတ္ထုတစ်ခု၏ တန်ဖိုးများကို လက်ခံသည် `getBoundingClientRect`။ နောက်ထပ်အချက်အလက်များအတွက် Popper ၏ တည်ဆောက်ရေး ဆိုင်ရာစာရွက်စာတမ်းများ နှင့် virtual element docs ကို ကိုးကားပါ ။

Function ဖြင့်အသုံးပြုခြင်း။`popperConfig`

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

နည်းလမ်းများ

နည်းလမ်း	ဖော်ပြချက်
`dispose`	ဒြပ်စင်တစ်ခု၏ dropdown ကို ဖျက်ဆီးသည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
`getInstance`	DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော dropdown instance ကိုရရန်ခွင့်ပြုသည့် Static method ကိုသင်ဤကဲ့သို့သုံးနိုင်သည် `bootstrap.Dropdown.getInstance(element)`။
`getOrCreateInstance`	DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော dropdown instance ကိုပြန်ပေးသည့်ပုံစံ သို့မဟုတ် ၎င်းကိုစတင်မလုပ်ဆောင်ပါက အသစ်တစ်ခုဖန်တီးမည့် Static method သင်ဤကဲ့သို့အသုံးပြုနိုင်သည် `bootstrap.Dropdown.getOrCreateInstance(element)`။
`hide`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းကြောင်းပြခြင်း၏ dropdown menu ကို ဝှက်ထားသည်။
`show`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းညွှန်မှု၏ dropdown menu ကို ပြသည်။
`toggle`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းကြောင်းပြခြင်း၏ dropdown menu ကို ပြောင်းပေးသည်။
`update`	ဒြပ်စင်တစ်ခု၏ dropdown အနေအထားကို အပ်ဒိတ်လုပ်သည်။

အဲ့ဒါနဲ့

dropdown ဖြစ်ရပ်များအားလုံးကို toggling element တွင် အလုပ်ဖြုတ်ပြီး bubbled သည်။ .dropdown-menuထို့ကြောင့် သင်သည် 's ပင်မဒြပ်စင်' တွင် ပွဲနားထောင်သူများကိုလည်း ထည့်နိုင်သည် ။ hide.bs.dropdownနှင့် hidden.bs.dropdownအဖြစ်အပျက်များ သည် ကလစ်ဖြစ်ရပ်အတွက် ဖြစ်ရပ်အရာဝတ္တုတစ်ခုပါရှိသည် clickEvent(မူရင်းဖြစ်ရပ်အမျိုးအစားဖြစ်မှသာ) ပိုင်ဆိုင်မှု တစ်ခုရှိသည်။click

ပွဲအမျိုးအစား	ဖော်ပြချက်
`hide.bs.dropdown`	`hide`သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ချက်ချင်းမီးလောင် သည်။
`hidden.bs.dropdown`	အသုံးပြုသူထံမှ လျှို့ဝှက်ထားသည်နှင့် CSS အပြောင်းအရွှေ့များ ပြီးသွားသောအခါတွင် dropdown ကို ဖယ်ရှားလိုက်ပါသည်။
`show.bs.dropdown`	`show`သာဓကနည်းလမ်းကို ခေါ်သော အခါ ချက်ချင်းမီးလောင် သည်။
`shown.bs.dropdown`	dropdown ကိုအသုံးပြုသူမြင်နိုင်စေရန်နှင့် CSS အပြောင်းအရွှေ့များပြီးသွားသောအခါတွင်ထုတ်ပစ်သည်။

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

ဆွဲချမှုများ

ခြုံငုံသုံးသပ်ချက်

သုံးစွဲနိုင်မှု

ဥပမာများ

တစ်ချက်နှိပ်လိုက်ပါ။

ခွဲပေးလိုက်ပါ။

အရွယ်အစား

အမှောင်ချခြင်းများ

လမ်းညွှန်ချက်များ

RTL

ဗဟိုပြုသည်။

Dropup

Dropup ကို ဗဟိုပြုသည်။

ရေစက်

Dropstart

မီနူးပစ္စည်းများ

အသက်ဝင်သည်။

မသန်စွမ်း

မီနူး ချိန်ညှိမှု

တုံ့ပြန်မှု ချိန်ညှိမှု

ချိန်ညှိမှု ရွေးချယ်စရာများ

မီနူး အကြောင်းအရာ

ခေါင်းစီးများ

ပိုင်းခြားခြင်း။

စာသား

ပုံစံများ

အလိုအလျောက်ပိတ်သောအပြုအမူ

CSS

ကိန်းရှင်များ

Sass ကိန်းရှင်များ

Mixins

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

`data-bs-toggle="dropdown"`လိုအပ်နေပါသေးတယ်။

ရွေးချယ်စရာများ

Function ဖြင့်အသုံးပြုခြင်း။`popperConfig`

နည်းလမ်းများ

အဲ့ဒါနဲ့

ဆွဲချမှုများ

ခြုံငုံသုံးသပ်ချက်

သုံးစွဲနိုင်မှု

ဥပမာများ

တစ်ချက်နှိပ်လိုက်ပါ။

ခွဲပေးလိုက်ပါ။

အရွယ်အစား

အမှောင်ချခြင်းများ

လမ်းညွှန်ချက်များ

RTL

ဗဟိုပြုသည်။

Dropup

Dropup ကို ဗဟိုပြုသည်။

ရေစက်

Dropstart

မီနူးပစ္စည်းများ

အသက်ဝင်သည်။

မသန်စွမ်း

မီနူး ချိန်ညှိမှု

တုံ့ပြန်မှု ချိန်ညှိမှု

ချိန်ညှိမှု ရွေးချယ်စရာများ

မီနူး အကြောင်းအရာ

ခေါင်းစီးများ

အောက်ဖော်ပြပါ ခေါင်းစီး

ပိုင်းခြားခြင်း။

စာသား

ပုံစံများ

ဆွဲချရွေးချယ်စရာများ

အလိုအလျောက်ပိတ်သောအပြုအမူ

CSS

ကိန်းရှင်များ

Sass ကိန်းရှင်များ

Mixins

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

data-bs-toggle="dropdown"လိုအပ်နေပါသေးတယ်။

ရွေးချယ်စရာများ

Function ဖြင့်အသုံးပြုခြင်း။popperConfig

နည်းလမ်းများ

အဲ့ဒါနဲ့

`data-bs-toggle="dropdown"`လိုအပ်နေပါသေးတယ်။

Function ဖြင့်အသုံးပြုခြင်း။`popperConfig`