ကင်းဗတ်
အတန်းအနည်းငယ်နှင့် ကျွန်ုပ်တို့၏ JavaScript ပလပ်အင်များဖြင့် လမ်းကြောင်းပြခြင်း၊ စျေးဝယ်လှည်းများနှင့် အခြားအရာများအတွက် သင့်ပရောဂျက်တွင် လျှို့ဝှက်ဘေးဘားများကို တည်ဆောက်ပါ။
ဘယ်လိုအလုပ်လုပ်လဲ
Offcanvas သည် viewport ၏ ဘယ်၊ ညာ သို့မဟုတ် အောက်ခြေအစွန်းမှ ပေါ်လာရန် JavaScript မှတစ်ဆင့် ပြောင်းနိုင်သည့် ဘေးဘားအစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ ခလုတ်များ သို့မဟုတ် ကျောက်ဆူးများကို သင်ဖွင့်လိုက်သော သီးခြားဒြပ်စင်များနှင့် တွဲဖက်ထားသည့် အစပျိုးများအဖြစ် data
အသုံးပြုထားပြီး ကျွန်ုပ်တို့၏ JavaScript ကို ခေါ်ဆိုရန်အတွက် ရည်ညွှန်းချက်များကို အသုံးပြုပါသည်။
- Offcanvas သည် တူညီသော JavaScript ကုဒ်အချို့ကို modals အဖြစ်မျှဝေပါသည်။ သဘောတရားအရ၊ ၎င်းတို့သည် အလွန်ဆင်တူသော်လည်း ၎င်းတို့သည် သီးခြား plugins များဖြစ်သည်။
- အလားတူ၊ offcanvas ၏စတိုင်များနှင့်အတိုင်းအတာများအတွက်အချို့သော အရင်းအမြစ် Sass variable များသည် modal ၏ variables များမှအမွေဆက်ခံသည်။
- ပြထားသည့်အခါတွင်၊ offcanvas တွင် offcanvas ကို ဝှက်ထားရန် ကလစ်နှိပ်နိုင်သည့် မူရင်းနောက်ခံတစ်ခု ပါဝင်သည်။
- modals နှင့်ဆင်တူသည်၊ တစ်ကြိမ်လျှင် offcanvas တစ်ခုသာပြသနိုင်သည်။
ကြိုတင်အသိပေးသည်! margin
CSS သည် အန်နီမေးရှင်းများကို ကိုင်တွယ်ပုံအား ပေးသောကြောင့် သင်သည် သို့မဟုတ် ဒြပ်စင် translate
တစ်ခုကို အသုံးပြု၍ မရပါ ။ .offcanvas
ယင်းအစား၊ အတန်းကို သီးခြား ထုပ်ပိုးမှုတစ်ခုအဖြစ် အသုံးပြုပါ။
prefers-reduced-motion
မီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ
။
ဥပမာများ
Offcanvas အစိတ်အပိုင်းများ
အောက်တွင် ပုံသေပြထားသည့် offcanvas နမူနာတစ်ခုဖြစ်သည် ( .show
on .offcanvas
) ။ Offcanvas တွင် အပိတ်ခလုတ်ပါသော ခေါင်းစီးအတွက် ပံ့ပိုးမှုနှင့် ကနဦးအချို့အတွက် ရွေးချယ်နိုင်သော ကိုယ်ထည်အတန်းအစား padding
ပါဝင်သည်။ ဖြစ်နိုင်သည့်အခါတိုင်း ဖယ်ရှားရန် လုပ်ဆောင်ချက်များပါရှိသည့် offcanvas ခေါင်းစီးများကို ထည့်သွင်းရန် သို့မဟုတ် ပြတ်သားစွာ ဖယ်ရှားရန် လုပ်ဆောင်ရန် အကြံပြုအပ်ပါသည်။
ကင်းဗတ်
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
တိုက်ရိုက်သရုပ်ပြ
.show
အတန်းကို အတန်းနှင့် ဒြပ်စင်တစ်ခုပေါ်ရှိ အတန်းကို ပြောင်းပေးသည့် JavaScript မှတစ်ဆင့် offcanvas ဒြပ်စင်ကို ပြသရန်နှင့် ဝှက်ရန် အောက်ဖော်ပြပါ ခလုတ်များကို အသုံးပြုပါ .offcanvas
။
.offcanvas
အကြောင်းအရာကို ဝှက်ထားသည် (မူလ).offcanvas.show
အကြောင်းအရာကိုပြသသည်။
href
ရည်ညွှန်းချက်နှင့်အတူ လင့်ခ် တစ်ခု သို့မဟုတ် ရည်ညွှန်းချက်ပါသည့် ခလုတ် တစ်ခုကို သင်သုံးနိုင်သည် data-bs-target
။ နှစ်ခုစလုံးတွင်၊ data-bs-toggle="offcanvas"
လိုအပ်သည်။
ကင်းဗတ်
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
နေရာချထားခြင်း။
offcanvas အစိတ်အပိုင်းများအတွက် ပုံသေနေရာချထားခြင်း မရှိသောကြောင့် အောက်ပါမွမ်းမံမှုအတန်းများထဲမှ တစ်ခုကို ထည့်ရပါမည်။
.offcanvas-start
viewport ၏ဘယ်ဘက်တွင် offcanvas နေရာများ (အထက်တွင်ပြထားသည်).offcanvas-end
viewport ၏ညာဘက်တွင် offcanvas နေရာများ.offcanvas-top
viewport ၏ထိပ်တွင် offcanvas ထားရှိပါ။.offcanvas-bottom
viewport ၏အောက်ခြေတွင် offcanvas ထားရှိပါ။
အပေါ်၊ ညာဘက်၊ အောက်ခြေ နမူနာများကို အောက်တွင် စမ်းကြည့်ပါ။
Offcanvas ထိပ်
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas မဟုတ်လား။
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas အောက်ခြေ
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
နောက်ခံကား
offcanvas <body>
နှင့် ၎င်း၏နောက်ခံမြင်ကွင်းကိုမြင်ရသောအခါတွင် ဒြပ်စင်ကို ရွှေ့ခြင်းကို ပိတ်ထားသည်။ လှိမ့် ခြင်းကိုပြောင်းရန်နှင့် နောက်ခံမြင်ကွင်းကိုပြောင်းရန် data-bs-scroll
ရည်ညွှန်းချက်ကို အသုံးပြုပါ ။<body>
data-bs-backdrop
ရောင်စုံလှိမ့်
ဤရွေးချယ်မှုကို လုပ်ဆောင်ရန် ကျန်စာမျက်နှာကို ရွှေ့ကြည့်ပါ။
နောက်ခံကားချပ်များဖြင့် ပိတ်စ
.....
ရွှေ့ခြင်းဖြင့် နောက်ခံထားသည်။
ဤရွေးချယ်မှုကို လုပ်ဆောင်ရန် ကျန်စာမျက်နှာကို ရွှေ့ကြည့်ပါ။
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
သုံးစွဲနိုင်မှု
offcanvas panel သည် conceptually modal dialog တစ်ခုဖြစ်သောကြောင့်၊ aria-labelledby="..."
offcanvas title ကို ရည်ညွှန်းခြင်း—သို့ ထည့်ရန်သေချာပါစေ .offcanvas
။ role="dialog"
JavaScript ကတဆင့် ထည့်ပြီးသား မို့ ထည့်ဖို့ မလိုဘူးဆိုတာ သတိပြုပါ ။
ဆူး
ကိန်းရှင်များ
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
အသုံးပြုမှု
offcanvas plugin သည် လေးလံသော ရုတ်သိမ်းခြင်းကို ကိုင်တွယ်ရန် အတန်းအနည်းငယ်နှင့် အရည်အချင်းများကို အသုံးပြုသည်-
.offcanvas
အကြောင်းအရာကို ဝှက်ထားသည်။.offcanvas.show
အကြောင်းအရာကိုပြသသည်။.offcanvas-start
ဘယ်ဘက်တွင် offcanvas ဝှက်ထားသည်။.offcanvas-end
ညာဘက်တွင် offcanvas ဝှက်ထားသည်။.offcanvas-bottom
အောက်ခြေတွင် offcanvas ဝှက်ထားသည်။
data-bs-dismiss="offcanvas"
JavaScript လုပ်ဆောင်နိုင်စွမ်းကို အစပျိုးပေးသည့် attribute ဖြင့် dismiss ခလုတ်ကို ထည့်ပါ ။ <button>
စက်ပစ္စည်းအားလုံးတွင် သင့်လျော်သောအပြုအမူအတွက် ၎င်းနှင့်အတူ ဒြပ်စင် ကို အသုံးပြုရန် သေချာ ပါစေ။
ဒေတာဂုဏ်တော်များမှတဆင့်
offcanvas ဒြပ်စင်တစ်ခု၏ ထိန်းချုပ်မှုကို အလိုအလျောက်သတ်မှတ်ရန် အစိတ်အပိုင်းတစ်ခု data-bs-toggle="offcanvas"
နှင့် တစ်ခု data-bs-target
သို့မဟုတ် အစိတ်အပိုင်းသို့ ပေါင်းထည့်ပါ ။ ရည်ညွှန်းချက်သည် offcanvas ကိုအသုံးပြုရန် CSS ရွေးချယ်မှုအား လက်ခံသည် href
။ အတန်း ကို offcanvas အစိတ်အပိုင်း data-bs-target
သို့ ထည့်ရန် သေချာပါစေ ။ offcanvas
၎င်းကို ပုံသေဖွင့်လိုပါက နောက်ထပ်အတန်းကို ထည့်ပါ show
။
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
ရွေးချယ်စရာများ
ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-
ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-backdrop=""
။
နာမည် | ရိုက်ပါ။ | ပုံသေ | ဖော်ပြချက် |
---|---|---|---|
backdrop |
ဘူလီယံ | true |
offcanvas ဖွင့်ထားစဉ် ကိုယ်ထည်ပေါ်တွင် နောက်ခံကို လိမ်းပါ။ |
keyboard |
ဘူလီယံ | true |
Escape သော့ကို နှိပ်လိုက်သောအခါ offcanvas ကိုပိတ်ပါ။ |
scroll |
ဘူလီယံ | false |
offcanvas ဖွင့်ထားစဉ် ခန္ဓာကိုယ်လှိမ့်ခြင်းကို ခွင့်ပြုပါ။ |
နည်းလမ်းများ
Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ
API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။
နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။
သင့်အကြောင်းအရာကို offcanvas အစိတ်အပိုင်းတစ်ခုအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object
။
ဥပမာအားဖြင့် constructor ဖြင့် offcanvas instance တစ်ခုကို ဖန်တီးနိုင်သည်။
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
နည်းလမ်း | ဖော်ပြချက် |
---|---|
toggle |
ပြရန် သို့မဟုတ် ဝှက်ထားရန် ကင်းဗတ်ဒြပ်စင်တစ်ခုကို ပြောင်းသည်။ offcanvas ဒြပ်စင်ကို အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်းမပြုမီ ခေါ်ဆိုသူshown.bs.offcanvas ထံသို့ ပြန်လည်ရောက်ရှိ hidden.bs.offcanvas သည် |
show |
ကင်းဗတ်ဒြပ်စင်ကို ပြသည်။ offcanvas ဒြပ်စင်ကို အမှန်တကယ် မပြသမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဆိုလိုသည်မှာ shown.bs.offcanvas ပွဲမဖြစ်ပွားမီ)။ |
hide |
offcanvas အစိတ်အပိုင်းတစ်ခုကို ဝှက်ထားသည်။ offcanvas ဒြပ်စင်ကို အမှန်တကယ် ဝှက်မထားမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဆိုလိုသည်မှာ hidden.bs.offcanvas ပွဲမဖြစ်ပွားမီ)။ |
getInstance |
DOM ဒြပ်စင်နှင့်ဆက်စပ်နေသော offcanvas instance ကိုရနိုင်စေသည့် Static method |
getOrCreateInstance |
DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော offcanvas instance ကိုရယူရန်ခွင့်ပြုသည့် Static method သည် ၎င်းကိုမစတင်ပါက အသစ်တစ်ခုဖန်တီးပါ။ |
အဲ့ဒါနဲ့
Bootstrap ၏ offcanvas အတန်းသည် offcanvas လုပ်ဆောင်နိုင်စွမ်းသို့ချိတ်ဆက်ရန်အတွက်ဖြစ်ရပ်အချို့ကိုဖော်ထုတ်သည်။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.offcanvas |
show သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ |
shown.bs.offcanvas |
အသုံးပြုသူမြင်နိုင်စေရန် offcanvas ဒြပ်စင်ကို ပြုလုပ်ထားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
hide.bs.offcanvas |
hide နည်းလမ်းကို ခေါ်လိုက် သောအခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖယ်ရှားသည်။ |
hidden.bs.offcanvas |
အသုံးပြုသူမှ offcanvas ဒြပ်စင်ကို ဝှက်ထားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})