Popovers

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

popover ပလပ်အင်ကို အသုံးပြုသည့်အခါ သိထားရမည့်အချက်များ

• Popovers များသည် နေရာချထားရန်အတွက် ပြင်ပအဖွဲ့အစည်း Popper ကို အားကိုးသည် ။ bootstrap.js မတိုင်မီ popper.min.js ပါဝင်ရမည် သို့မဟုတ် Popper ပါရှိသော bootstrap.bundle.min.js/ ကိုအသုံးပြုခြင်းဖြင့် popper များအလုပ်လုပ်နိုင်စေရန်။bootstrap.bundle.js
• Popover များသည် မှီခိုမှုအဖြစ် tooltip plugin ကို လိုအပ်သည်။
• Popovers များသည် စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက် ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် အစပြုရပါမည် ။
• သုညအလျား titleနှင့် contentတန်ဖိုးများသည် ပေါ်ပြူလာကို ဘယ်သောအခါမှ ပြသမည်မဟုတ်ပါ။
• ပိုမိုရှုပ်ထွေးသော အစိတ်အပိုင်းများတွင် တင်ဆက်ခြင်းပြဿနာများကို ရှောင်ရှားရန် ( ကျွန်ုပ်တို့၏ container: 'body'ထည့်သွင်းမှုအုပ်စုများ၊ ခလုတ်အဖွဲ့များ စသည်ဖြင့်) ကို ရှောင်ရှားရန် သတ်မှတ်ပါ။
• လျှို့ဝှက်ဒြပ်စင်များပေါ်တွင် popover များကို အစပျိုးခြင်းသည် အလုပ်မဖြစ်ပါ။
• ထုပ်ပိုးမှု ဒြပ်စင်တစ်ခုပေါ်တွင် ပေါ်လာသည့်အရာများ .disabledသို့မဟုတ် disabledဒြပ်စင်များကို အစပျိုးရပါမည်။
• မျဥ်းများစွာကို ပတ်ထားသော ကျောက်ဆူးများမှ အစပျိုးသောအခါ၊ ကျောက်ဆူးများ၏ အကျယ်အဝန်းကြားတွင် ပေါ်လာသော အကွက်များကို ဗဟိုပြုပါမည်။ ဤအပြုအမူကိုရှောင်ရှားရန် .text-nowrapသင့်တွင် အသုံးပြု ပါ။<a>
• ၎င်းတို့၏သက်ဆိုင်ရာဒြပ်စင်များကို DOM မှဖယ်ရှားခြင်းမပြုမီ Popovers များကိုဝှက်ထားရပါမည်။
• DOM အရိပ်အတွင်း ဒြပ်စင်တစ်ခုကြောင့် Popover များကို အစပျိုးနိုင်သည်။

ဥပမာအချို့နှင့်အတူ popover များအလုပ်လုပ်ပုံကိုကြည့်ရှုရန်ဆက်လက်ဖတ်ရှုပါ။

ဥပမာ- နေရာတိုင်းတွင် popovers ကိုဖွင့်ပါ။

စာမျက်နှာတစ်ခုပေါ်ရှိ popover အားလုံးကို အစပြုရန် နည်းလမ်းတစ်ခုမှာ ၎င်းတို့၏ data-bs-toggleအရည်အချင်းဖြင့် ၎င်းတို့ကို ရွေးချယ်ရန်ဖြစ်သည်-

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

ဥပမာ- containerရွေးချယ်ခွင့် ကို အသုံးပြုခြင်း။

containerသင့်တွင် popover ကို အနှောင့်အယှက်ဖြစ်စေသော ပင်မဒြပ်စင်တစ်ခုတွင် ပုံစံအချို့ရှိသောအခါ၊ ထိုအစား popover ၏ HTML သည် ထိုဒြပ်စင်အတွင်းတွင် ပေါ်လာစေရန် စိတ်ကြိုက်တစ်ခုကို သတ်မှတ်လို မည်ဖြစ်သည်။

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

ဥပမာ

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

ရွေးချယ်စရာ လေးခု ရနိုင်သည်- အပေါ်၊ ညာဘက်၊ အောက်နှင့် ဘယ်ဘက် ညှိထားသည်။ RTL တွင် Bootstrap ကိုအသုံးပြုသည့်အခါ လမ်းညွှန်ချက်များကို ထင်ဟပ်စေသည်။

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

နောက်ကလစ်မှာ ဖြုတ်လိုက်ပါ။

ပြောင်း သုံးသည့် focusဒြပ်ထက် မတူညီသောဒြပ်စင်၏ နောက်ကလစ်တွင် အသုံးပြုသူ၏နောက်ထပ်ကလစ်တွင် popover များကိုပယ်ရန် trigger ကိုသုံးပါ။

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

မသန်စွမ်းတာတော့ မဟုတ်ပါဘူး။

ရည်ညွှန်းချက်ပါ သည့်ဒြပ်စင် disabledများသည် အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသောကြောင့် အသုံးပြုသူများသည် popover (သို့မဟုတ် ကိရိယာအကြံပြုချက်) ကို အစပျိုးရန် ၎င်းတို့ကို ပျံဝဲ သို့မဟုတ် ကလစ်နှိပ်၍ မရနိုင်ပါ။ ဖြေရှင်းနည်းတစ်ခုအနေဖြင့်၊ သင်သည် ထုပ်ပိုးမှုတစ်ခုမှ popover ကို အစပျိုးလိုလိမ့်မည် <div>သို့မဟုတ် <span>၊ အကောင်းဆုံးအားဖြင့် ဖန်တီးထားသော ကီးဘုတ်ကို အသုံးပြု၍ အာရုံစူးစိုက်နိုင်သော tabindex="0".

disabled popover အစပျိုးမှုများအတွက်၊ popover သည် disabled element ကိုနှိပ်ရန်data-bs-trigger="hover focus" မမျှော်လင့်နိုင်သောကြောင့် သင့်အသုံးပြုသူများအတွက် ချက်ချင်းမြင်သာသော တုံ့ပြန်ချက်အဖြစ် ပေါ်လာစေရန် သင်နှစ်သက်နိုင်သည်။

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ဆူး

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

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

အသုံးပြုမှု

JavaScript မှတဆင့် popovers ကိုဖွင့်ပါ-

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

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

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

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

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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

ရှိုး

ဒြပ်စင်တစ်ခု၏ popover ကိုဖော်ပြသည်။ popover အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ shown.bs.popoverပွဲမစမီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။ ခေါင်းစဉ်နှင့် အကြောင်းအရာ နှစ်ခုစလုံးသည် သုည-အရှည်ဖြစ်သည့် Popover များကို မည်သည့်အခါမျှ ပြသမည်မဟုတ်ပါ။

myPopover.show()

ပုန်း

ဒြပ်စင်တစ်ခု၏ popover ကို ဝှက်ထားသည်။ popover သည် အမှန်တကယ် ဝှက်ထားခြင်းမရှိမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ hidden.bs.popoverပွဲမဖြစ်ပွားမီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။

myPopover.hide()

ပြောင်းရန်

ဒြပ်စင်တစ်ခု၏ popover ကို ပြောင်းသည်။ popover သည် အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်းမပြုမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဆိုလိုသည်မှာ ဖြစ်ရပ်မတိုင်မီ shown.bs.popoverသို့မဟုတ် hidden.bs.popoverဖြစ်ရပ်မဖြစ်ပေါ်မီ)။ ဤသည်မှာ ပေါ်လာခြင်း၏ "လက်စွဲစာအုပ်" ဟု ယူဆပါသည်။

myPopover.toggle()

စွန့်ပစ်ပါ။

ဒြပ်စင်တစ်ခု၏ popover ကို ဖျောက်ဖျက်ပစ်သည် (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)။ ကိုယ်စားလှယ်လွှဲစာ ( ရွေးချယ်ခွင့် ကို အသုံးပြု၍ ဖန်တီးထားသည့်) Popovers များသည် မျိုးဆက်selector ပွားအစပျိုးဒြပ်စင်များပေါ်တွင် တစ်ဦးချင်း ဖျက်ဆီး၍မရပါ။

myPopover.dispose()

ဖွင့်ပါ။

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန်စွမ်းရည်ကိုပေးသည်။ Popovers များကို မူရင်းအတိုင်း ဖွင့်ထားသည်။

myPopover.enable()

ပိတ်ပါ။

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန်စွမ်းရည်ကို ဖယ်ရှားသည်။ ပြန်ဖွင့်ထားမှသာ ပေါ့ပ်ဗာကို ပြသနိုင်မည်ဖြစ်သည်။

myPopover.disable()

ခလုတ်ဖွင့်ထားသည်။

ဒြပ်စင်တစ်ခု၏ popover ကိုပြသရန် သို့မဟုတ် ဝှက်ထားရန် စွမ်းရည်ကို ပြောင်းပေးသည်။

myPopover.toggleEnabled()

အပ်ဒိတ်

ဒြပ်စင်တစ်ခု၏ popover အနေအထားကို အပ်ဒိတ်လုပ်သည်။

myPopover.update()

getInstance

DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော popover instance ကိုရရှိရန်ခွင့်ပြုသည့် Static နည်းလမ်း

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

DOM ဒြပ်စင်တစ်ခုနှင့်ဆက်စပ်နေသော popover instance ကိုရယူရန်ခွင့်ပြုသည့် Static method သည် ၎င်းကိုမစတင်ပါက အသစ်တစ်ခုဖန်တီးပါ။

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

အဲ့ဒါနဲ့

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})