အုပ်စုစာရင်း
စာရင်းအုပ်စုများသည် အကြောင်းအရာစီးရီးများကို ပြသရန်အတွက် ပြောင်းလွယ်ပြင်လွယ်နှင့် အားကောင်းသည့် အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ အတွင်းရှိ မည်သည့်အကြောင်းအရာကိုမဆို ပံ့ပိုးနိုင်စေရန် ၎င်းတို့ကို ပြင်ဆင်ပြီး တိုးချဲ့ပါ။
အခြေခံဥပမာ
အခြေခံအကျဆုံးစာရင်းအုပ်စုသည် စာရင်းမ၀င်သောစာရင်းများနှင့် သင့်လျော်သောအတန်းများပါရှိသည်။ ၎င်းကို လိုက်နာသော ရွေးချယ်မှုများဖြင့် သို့မဟုတ် လိုအပ်သလို သင့်ကိုယ်ပိုင် CSS ဖြင့် တည်ဆောက်ပါ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
တက်ကြွသောအရာများ
လက်ရှိအသက်ဝင်နေသောရွေးချယ်မှုကိုညွှန်ပြရန် .active
a သို့ ထည့်ပါ ။.list-group-item
- အသက်ဝင်သော အရာတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
မသန်စွမ်းသောအရာများ
ပိတ်ထား ပုံပေါ် စေရန် .disabled
a သို့ ထည့်ပါ ။ ၎င်းတို့ ပါရှိသော အချို့သောဒြပ်စင် များသည် ၎င်းတို့၏ကလစ်ဖြစ်ရပ်များ (ဥပမာ၊ လင့်ခ်များ) ကို အပြည့်အဝပိတ်ရန် စိတ်ကြိုက် JavaScript ကိုလည်း လိုအပ်မည်ဖြစ်ကြောင်း သတိပြုပါ။.list-group-item
.disabled
- မသန်စွမ်းသည့်အရာ
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
လင့်များနှင့် ခလုတ်များ
ပေါင်းထည့်ခြင်းဖြင့် လုပ်ဆောင် နိုင်သော စာရင်းအဖွဲ့အရာများကို ဖန်တီးရန် <a>
s သို့မဟုတ် s ကို အသုံးပြု ပါ ။ အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသောဒြပ်စင်များ (s သို့မဟုတ် s ကဲ့သို့သော) စာရင်းအုပ်စုများ ( s သို့မဟုတ် s ကဲ့သို့) ကလစ်တစ်ခု သို့မဟုတ် နှိပ်ခြင်းတို့ကို ပံ့ပိုးပေးခြင်းမရှိကြောင်း သေချာစေရန်အတွက် ကျွန်ုပ်တို့သည် ဤ pseudo-အတန်းအစားများကို ခွဲခြားထားသည် ။<button>
.list-group-item-action
<li>
<div>
ဤနေရာတွင် စံအတန်းများကို အသုံးမပြုရန်.btn
သေချာ ပါစေ ။
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
<button>
s ဖြင့်၊ သင်သည် class အစား disabled
attribute ကို အသုံးပြုနိုင်သည်။ .disabled
ဝမ်းနည်းစရာမှာ၊ <a>
s သည် disabled attribute ကို မပံ့ပိုးပါ။
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
ရေဆွဲချ
.list-group-flush
ပင်မကွန်တိန်နာတစ်ခုရှိ ဘောင်မှအစွန်းအချို့နှင့် လုံးဝန်းသောထောင့်များကို ဖယ်ရှားရန် ပေါင်းထည့်ပါ ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
နံပါတ်တပ်ထားသည်။
နံပါတ်တပ်ထားသော စာရင်းအုပ်စုအရာများကို ရွေးချယ်ရန် .list-group-numbered
ပြုပြင်မွမ်းမံမှု အတန်းအစား ကို ပေါင်းထည့်ပါ (ဒြပ်စင်တစ်ခုအား ရွေးချယ်နိုင်သည်)။ နံပါတ်များ ကို စာရင်းအဖွဲ့အရာများအတွင်း ပိုမိုကောင်းမွန်စွာနေရာချထားရန်နှင့် ပိုမိုကောင်းမွန်သော စိတ်ကြိုက်ပြင်ဆင်မှုများကို ခွင့်ပြုရန်အတွက် <ol>
နံပါတ်များကို CSS မှတစ်ဆင့် ထုတ်လုပ် ပါသည်။<ol>
နံပါတ်များကို အပေါ်တွင် ထုတ်ပေးပြီး counter-reset
နှင့် နှင့် ပေါ်ရှိ pseudo-ဒြပ်စင်တစ်ခု <ol>
ဖြင့် ပုံဖော်ပြီး ထားရှိပါ ။::before
<li>
counter-increment
content
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
ဤအရာများသည် စိတ်ကြိုက်အကြောင်းအရာနှင့်လည်း ကောင်းမွန်စွာ လုပ်ဆောင်နိုင်သည်။
-
ခေါင်းစဉ်ခွဲCras justo odio
-
ခေါင်းစဉ်ခွဲCras justo odio
-
ခေါင်းစဉ်ခွဲCras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
အလျားလိုက်
.list-group-horizontal
ခွဲထွက်မှတ်များအားလုံးတွင် ဒေါင်လိုက်မှ အလျားလိုက်သို့ စာရင်းအုပ်စုအရာများ၏ အပြင်အဆင်ကို ပြောင်းရန် ထည့်ပါ ။ .list-group-horizontal-{sm|md|lg|xl|xxl}
တနည်းအားဖြင့်၊ ထို breakpoint မှစတင်၍ စာရင်းအုပ်စုကို အလျားလိုက်ပြုလုပ်ရန် တုံ့ပြန်မှုမျိုးကွဲတစ်ခုကို ရွေး ပါ min-width
။ လောလောဆယ် အလျားလိုက် စာရင်းအုပ်စုများကို flush list အုပ်စုများနှင့် ပေါင်းစပ်၍မရပါ။
ProTip- အလျားလိုက်ရှိသည့်အခါ မျဥ်းအကျယ် တူညီသောစာရင်းအုပ်စုအရာများကို လိုချင်ပါသလား။ .flex-fill
စာရင်းအုပ်စုတစ်ခုစီသို့ ထည့်ပါ ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
ဆက်စပ်အတန်းများ
ပြည်နယ်အလိုက် နောက်ခံနှင့် အရောင်ရှိသော အရာများစာရင်းကို ပုံစံဖော်ရန် ဆက်စပ်အတန်းများကို အသုံးပြုပါ။
- ရိုးရှင်းသော ပုံသေစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော ပင်မစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော သာမညစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော အောင်မြင်မှုစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော အန္တရာယ်စာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသောသတိပေးချက်စာရင်းအုပ်စုအကြောင်းအရာ
- ရိုးရှင်းသောအချက်အလက်စာရင်းအုပ်စုအကြောင်းအရာ
- ရိုးရှင်းသော ပေါ့ပါးသော စာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော မှောင်မိုက်စာရင်းအုပ်စု အကြောင်းအရာ
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Contextual classes တွေနဲ့လည်း အလုပ်လုပ်ပါတယ် .list-group-item-action
။ ယခင်နမူနာတွင် မပါရှိဘဲ ဤနေရာတွင် ပျံဝဲစတိုင်များ ထပ်တိုးခြင်းကို သတိပြုပါ။ နိုင်ငံတော် ကိုလည်း ထောက်ပံ့သည် .active
။ ဆက်စပ်သောစာရင်းအုပ်စုအကြောင်းအရာတစ်ခုတွင် အသက်ဝင်သောရွေးချယ်မှုကိုညွှန်ပြရန် ၎င်းကိုအသုံးပြုပါ။
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။
အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ဥပမာ မြင်နိုင်သော စာသား) သို့မဟုတ် .visually-hidden
အတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။
တံဆိပ်များနှင့်
အချို့သော အသုံးအဆောင် များ၏အကူအညီဖြင့် မဖတ်ရသေးသော အရေအတွက်များ၊ လုပ်ဆောင်ချက်နှင့် အခြားအရာများကို ပြသရန် မည်သည့်စာရင်းအုပ်စုတွင်မဆို တံဆိပ်များထည့်ပါ ။
- စာရင်းတစ်ခု၁၄
- ဒုတိယစာရင်းတစ်ခု၂
- တတိယစာရင်း၁
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
စိတ်ကြိုက်အကြောင်းအရာ
flexbox utilities များ၏အကူအညီဖြင့် အောက်ဖော်ပြပါကဲ့သို့ လင့်ခ်ချိတ်ထားသော စာရင်းအုပ်စုများအတွက်ပင် အတွင်း၌ မည်သည့် HTML မဆို ထည့်ပါ ။
အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ အသေးလေးတွေ ပုံနှိပ်တယ်။အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ တစ်ချို့က အသံတိတ်ထားတဲ့ ပုံနှိပ်လေးတွေရှိတယ်။အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ တစ်ချို့က အသံတိတ်ထားတဲ့ ပုံနှိပ်လေးတွေရှိတယ်။<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများ
Bootstrap ၏ checkboxes နှင့် radios များကို list group items များအတွင်း ထားရှိကာ လိုအပ်သလို စိတ်ကြိုက်ပြင်ဆင်ပါ။ ၎င်းတို့ကို s မပါဘဲ သင်အသုံးပြုနိုင် သော်လည်း အသုံးပြုခွင့်အတွက် ရည်ညွှန်းချက်နှင့် တန်ဖိုးကို ထည့် <label>
သွင်းရန် ကျေးဇူးပြု၍ သတိရပါ ။aria-label
- ပထမအကွက်ကို အမှန်ခြစ်ပါ။
- ဒုတိယအကွက်ကို အမှန်ခြစ်ပါ။
- တတိယအကွက်
- စတုတ္ထအကွက်ကို အမှန်ခြစ်ပါ။
- ပဉ္စမအကွက်ကို အမှန်ခြစ်ပါ။
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
<label>
ကြီးမားသော hit ဧရိယာများအတွက် s ကို လိုချင်ပါက .list-group-item
၊ သင်လည်းထိုသို့လုပ်နိုင်သည်။
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
ဆူး
ကိန်းရှင်များ
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
Mixins
s အတွက် contextual variant အတန်းများကို$theme-colors
ထုတ်လုပ်ရန် နှင့် ပေါင်းစပ်အသုံးပြုသည် ။.list-group-item
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
ဒကာ
list-group-item-variant()
mixin နှင့် modifier classes များကိုထုတ်ပေးသော loop
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
JavaScript အပြုအမူ
တဘ် JavaScript ပလပ်အင်ကို သုံးပါ—၎င်းကို တစ်ဦးချင်း သို့မဟုတ် စုစည်းထားသော bootstrap.js
ဖိုင်မှတစ်ဆင့်—ဒေသခံအကြောင်းအရာ၏ တက်ဘ်စားနိုင်သော အကန့်များကို ဖန်တီးရန် ကျွန်ုပ်တို့၏စာရင်းအုပ်စုကို တိုးချဲ့ရန်။
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
ဒေတာ attribute ကိုအသုံးပြုခြင်း။
data-bs-toggle="list"
ရိုးရှင်းစွာသတ်မှတ်ခြင်း သို့မဟုတ် ဒြပ်စင်တစ်ခုပေါ်တွင် JavaScript ကိုမရေးဘဲ စာရင်းအုပ်စုလမ်းကြောင်းပြခြင်းကို အသက်သွင်းနိုင်သည် ။ ဤဒေတာ attribute များကို အသုံးပြုပါ .list-group-item
။
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
JavaScript မှတဆင့်
JavaScript မှတဆင့် tabbable list item ကိုဖွင့်ပါ (စာရင်းအကြောင်းအရာတစ်ခုစီကို တစ်ဦးချင်းစီ activate လုပ်ရန် လိုအပ်သည်-
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
တစ်ဦးချင်းစီစာရင်းကို နည်းလမ်းများစွာဖြင့် အသက်သွင်းနိုင်သည်-
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
အရောင်မှိန်စေတယ်။
တဘ်အကန့်ကို မှိန်သွားစေရန်၊ .fade
တစ်ခုစီသို့ ထည့်ပါ .tab-pane
။ ပထမတဘ်အက .show
န့်သည် ကနဦးအကြောင်းအရာကို မြင်နိုင်စေရန်လည်း လိုအပ်သည်။
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
နည်းလမ်းများ
constructor
စာရင်းအကြောင်းအရာ အစိတ်အပိုင်းနှင့် အကြောင်းအရာ ကွန်တိန်နာကို အသက်သွင်းသည်။ တဘ် တွင် DOM တွင် ကွန်တိန်နာ node တစ်ခု data-bs-target
သို့မဟုတ် ပစ်မှတ်တစ်ခု ရှိသင့်သည်။href
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
ရှိုး
ပေးထားသောစာရင်းကို ရွေးပြီး ၎င်း၏ဆက်စပ်အကန့်ကို ပြသည်။ ယခင်က ရွေးချယ်ထားသည့် အခြားစာရင်းပါ အရာများကို ရွေးချယ်ထားခြင်း မရှိတော့ဘဲ ၎င်း၏ ဆက်စပ်အကန့်ကို ဝှက်ထားသည်။ တက်ဘ်အကန့်ကို အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဥပမာ၊ shown.bs.tab
ပွဲမဖြစ်ပွားမီ)။
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
စွန့်ပစ်ပါ။
အစိတ်အပိုင်းတစ်ခု၏ တက်ဘ်ကို ဖျက်ပါ။
getInstance
DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော တက်ဘ် စံနမူနာကို ရယူရန် ခွင့်ပြုသည့် Static နည်းလမ်း
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသည့် တက်ဘ် စံနမူနာကို ရယူရန် ခွင့်ပြုသည့် ပုံသေနည်းလမ်း၊ သို့မဟုတ် ၎င်းကို ကနဦး မလုပ်ဆောင်ပါက အသစ်တစ်ခု ဖန်တီးပါ။
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
အဲ့ဒါနဲ့
တက်ဘ်အသစ်တစ်ခုကို ပြသသောအခါ၊ အဖြစ်အပျက်များသည် အောက်ပါအစီအစဉ်အတိုင်း မီးလောင်သွားသည်-
hide.bs.tab
(လက်ရှိသုံးနေသည့် တက်ဘ်ပေါ်တွင်)show.bs.tab
(ပြသမည့် tab တွင်)hidden.bs.tab
(ယခင်တက်ကြွသောတက်ဘ်တွင်၊hide.bs.tab
အစီအစဉ်နှင့်တူသည်)shown.bs.tab
(အသစ်စက်စက်ပြသထားသည့် တက်ဘ်ပေါ်တွင်၊show.bs.tab
ဖြစ်ရပ်အတွက်နှင့် တူညီသည်)
မည်သည့်တက်ဘ်မှ အသက်ဝင်နေပါက၊ hide.bs.tab
နှင့် hidden.bs.tab
အစီအစဉ်များကို အလုပ်ဖြုတ်မည်မဟုတ်ပါ။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.tab |
ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်၊ သို့သော် တက်ဘ်အသစ်ကို မပြသမီ။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.target ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget |
shown.bs.tab |
တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.target ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget |
hide.bs.tab |
တက်ဘ်အသစ်တစ်ခုကို ပြသသည့်အခါ ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဖျောက်ထားရပါမည်)။ လက်ရှိ အသုံးပြု နေသည့် တက်ဘ်နှင့် မကြာမီ-စတော့မည့်-အသက်ဝင်မည့် တက်ဘ်အသစ်ကို အသီးသီး ပစ်မှတ်ထားပြီး event.target အသုံးပြု ပါ။event.relatedTarget |
hidden.bs.tab |
တက်ဘ်အသစ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဝှက်ထားသည်)။ ယခင် အသုံးပြု event.target နေ event.relatedTarget သည့် တက်ဘ်နှင့် တက်ကြွသောတက်ဘ်အသစ်ကို အသီးသီးပစ်မှတ်ထားရန် အသုံးပြုပါ။ |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}