Bootstrap 4 Dropdowns
အခြေခံ Dropdown
dropdown menu သည် အသုံးပြုသူအား ကြိုတင်သတ်မှတ်ထားသောစာရင်းမှ တန်ဖိုးတစ်ခုကို ရွေးချယ်နိုင်စေမည့် ခလုတ်ဖွင့်နိုင်သော မီနူးတစ်ခုဖြစ်သည်-
ဥပမာ
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
နမူနာရှင်းပြထားပါတယ်။
.dropdownအတန်းသည် dropdown menu ကိုညွှန်ပြသည် ။
dropdown menu ကိုဖွင့်ရန်၊ class တစ်ခု .dropdown-toggleနှင့်
data-toggle="dropdown"attribute ပါရှိသော ခလုတ်တစ်ခု သို့မဟုတ် လင့်ခ်တစ်ခုကို အသုံးပြုပါ။
dropdown menu ကိုအမှန်တကယ်တည်ဆောက်ရန်အတွက် .dropdown-menuclass ကို element တစ်ခုသို့ ထည့်ပါ ။ <div>ထို့နောက်
.dropdown-itemdropdown menu အတွင်းရှိ ဒြပ်စင်တစ်ခုစီ (လင့်ခ်များ သို့မဟုတ် ခလုတ်များ) သို့ အတန်းကို ထည့်ပါ။
Dropdown Divider
အတန်း ကို .dropdown-dividerပါးလွှာသော အလျားလိုက်ဘောင်ဖြင့် dropdown menu အတွင်းရှိ လင့်ခ်များကို ခွဲခြားရန် အသုံးပြုသည်-
ဥပမာ
<div class="dropdown-divider"></div>
ဆွဲချ ခေါင်းစီး
.dropdown-headerdropdown menu အတွင်းရှိ ခေါင်းစီးများကို ထည့်ရန် အတန်းကို အသုံးပြုသည် -
ဥပမာ
<div class="dropdown-header">Dropdown header 1</div>
Disable နှင့် Active items များ
အတန်း နှင့်အတူ သီးခြား dropdown item ကို မီးမောင်းထိုးပြပါ .active(အပြာရောင် နောက်ခံအရောင်ကို ထည့်ပါ)။
dropdown menu ရှိ အရာတစ်ခုအား ပိတ်ရန်၊ .disabledအတန်းကို အသုံးပြုပါ (မီးခိုးရောင် စာသားအရောင်နှင့် အပေါ်သို့ အပေါ်သို့ တင်ထားသော "ကားပါကင်မရှိ-ဆိုင်းဘုတ်" သင်္ကေတကို ရရှိသည်-
ဥပမာ
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Dropdown ရာထူး
.droprightသို့မဟုတ် .dropleftclass ကို dropdown element သို့ ထည့်ခြင်းဖြင့် "dropright" သို့မဟုတ် "dropleft" menu ကို သင် ဖန်တီးနိုင်သည် ။ ဂရု/မြှားကို အလိုအလျောက် ထည့်ထားကြောင်း သတိပြုပါ-
ဖြောင့်ဖြောင့်
<div class="dropdown dropright">
ရေစက်
<div class="dropdown dropleft">
Dropdown Menu ညာဘက်
dropdown menu ကို ညာဘက်ချိန်ညှိရန် .dropdown-menu-right.dropdown-menu ဖြင့် အတန်းထဲသို့ အတန်းကို ထည့်ပါ-
ဥပမာ
<div class="dropdown-menu dropdown-menu-right">
Dropup
အောက်ဘက်အစား dropdown menu ကို အပေါ်ဘက်သို့ ချဲ့လိုပါက၊ class="dropdown" ဖြင့် <div> ဒြပ်စင်ကို "dropup"အောက်ပါ အဖြစ်သို့ ပြောင်းပါ။
ဥပမာ
<div class="dropup">
ဆွဲချစာသား
အတန်းအား ရိုးရှင်းသော စာသားကို .dropdown-item-textdropdown item တစ်ခုသို့ ထည့်ရန် သို့မဟုတ် မူရင်းလင့်ခ်ပုံစံပြုလုပ်ရန်အတွက် လင့်ခ်များတွင် အသုံးပြုသည်။
ဥပမာ
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Dropdown တစ်ခုဖြင့် ခလုတ်များကို အုပ်စုဖွဲ့ထားသည်။
ဥပမာ
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Split Button Dropdowns
ဥပမာ
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
ဒေါင်လိုက်ခလုတ်အဖွဲ့ နှင့် Dropdown
ဥပမာ
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bootstrap 4 Dropdown Reference ကို အပြီးသတ်ပါ။
dropdown ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap 4 JS Dropdown Reference သို့ သွားပါ ။