Popovers

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

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

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

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

ဥပမာများ

Popovers ကိုဖွင့်ပါ။

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

တိုက်ရိုက်သရုပ်ပြ

အောက်ဖော်ပြပါ တိုက်ရိုက်ထုတ်လွှတင်ခြင်းကို တင်ဆက်ရန်အတွက် အထက်ဖော်ပြပါ အတိုအထွာနှင့် ဆင်တူသော JavaScript ကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။ ခေါင်းစဉ်များမှတစ်ဆင့် သတ်မှတ်ပြီး data-bs-titleကိုယ်ရေးကိုယ်တာအကြောင်းအရာကို တစ်ဆင့်သတ်မှတ်ထားသည် data-bs-content။

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

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

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

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

စိတ်ကြိုက်container

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

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

တိကျပြတ်သားသော စိတ်ကြိုက်တစ်ခု သတ်မှတ်လိုသည့် နောက်ထပ်အခြေအနေတစ်ခုမှာ popover သည် modal နှင့် ထပ်ပေါင်းထားကြောင်း သေချာစေရန် modal dialogcontainer အတွင်းရှိ popover များ ဖြစ်သည်။ အပြန်အလှန်အကျိုးပြုသည့်ဒြပ်စင်များပါရှိသော popover များအတွက် ၎င်းသည် အထူးအရေးကြီးသည် – modal dialogs များသည် focus ကို ထောင်ချောက်ဆင်လိမ့်မည်၊ ထို့ကြောင့် popover သည် modal ၏ ကလေးဒြပ်စင်မဟုတ်ပါက၊ အသုံးပြုသူများသည် ဤအပြန်အလှန်အကျိုးသက်ရောက်သောဒြပ်စင်များကို အာရုံစိုက်ခြင်း သို့မဟုတ် အသက်သွင်းနိုင်မည်မဟုတ်ပေ။

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

စိတ်ကြိုက် popovers

CSS variables များကို အသုံးပြု၍ popover များ၏ အသွင်အပြင်ကို စိတ်ကြိုက်ပြင်ဆင် နိုင်ပါသည်။ data-bs-custom-class="custom-popover"ကျွန်ုပ်တို့၏ စိတ်ကြိုက်အသွင်အပြင်ကို အတိုင်းအတာတစ်ခုအထိ အတိုင်းအတာတစ်ခုအထိ စိတ်ကြိုက်အတန်းတစ်ခု သတ်မှတ်ပြီး အချို့သော ဒေသဆိုင်ရာ CSS variable များကို အစားထိုးရန် ၎င်းကို အသုံးပြုပါသည်။

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

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

const popover = new bootstrap.Popover('.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>

CSS

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

Bootstrap ၏ တိုးတက်ပြောင်းလဲနေသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခု popover များသည် .popoverအချိန်နှင့်တစ်ပြေးညီ စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် local CSS variable များကို အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို Sass မှတစ်ဆင့် သတ်မှတ်ပေးထားသောကြောင့် Sass စိတ်ကြိုက်ပြင်ဆင်ခြင်းကိုလည်း ပံ့ပိုးထားပါသည်။

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

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

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

အသုံးပြုမှု

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

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

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

ရွေးချယ်မှုများကို ဒေတာ 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}'

Using function with popperConfig

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

Methods

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Events

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