Source

ဆန္ဒပြုခြင်း။

ပေါ့ပါးပြီး စိတ်ကြိုက်ပြင်ဆင်နိုင်သော သတိပေးချက် မက်ဆေ့ခ်ျတစ်ခုဖြင့် ဆန္ဒပြုထားသော ဧည့်သည်များထံ အသိပေးချက်များကို တွန်းပို့ပါ။

Toasts များသည် မိုဘိုင်းနှင့် ဒက်စ်တော့ လည်ပတ်မှုစနစ်များ တွင် ခေတ်စားလာခဲ့သည့် တွန်းအားပေး အသိပေးချက်များကို အတုယူရန် ဒီဇိုင်းထုတ်ထားသည့် ပေါ့ပါးသော အသိပေးချက်များ ဖြစ်သည်။ ၎င်းတို့ကို flexbox ဖြင့် တည်ဆောက်ထားသောကြောင့် ၎င်းတို့သည် ချိန်ညှိရန်နှင့် နေရာချထားရန် လွယ်ကူသည်။

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

toast plugin ကိုအသုံးပြုသည့်အခါ သိထားရမည့်အချက်များ-

  • အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။
  • Toasts များကို စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက် ရွေးချယ်ထားသောကြောင့် ၎င်းတို့ကို သင်ကိုယ်တိုင် အစပြုရပါမည် ။
  • ဆန္ဒပြုမှုများကို နေရာချထားရန် သင့်တွင် တာဝန်ရှိကြောင်း သတိပြုပါ။
  • သင်မသတ်မှတ်ထားပါက Toasts များသည် အလိုအလျောက် ဖျောက်သွားပါမည် autohide: false။

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

ဥပမာများ

အခြေခံ

တိုးချဲ့နိုင်သော နှင့် ကြိုတင်မှန်းဆနိုင်သော မုန့်များကို အားပေးရန်၊ ခေါင်းစီးနှင့် စာကိုယ်ကို အကြံပြုပါသည်။ display: flexကျွန်ုပ်တို့၏ အနားသတ်နှင့် flexbox အသုံးဝင်မှုများကြောင့် အကြောင်းအရာများကို လွယ်ကူစွာ ချိန်ညှိနိုင်စေရန် Toast ခေါင်းစီးများကို အသုံးပြု ပါသည်။

ပေါင်မုန့်များသည် သင်လိုအပ်သလောက် လိုက်လျောညီထွေရှိပြီး လိုအပ်သော စျေးနှုံးအနည်းငယ်သာရှိသည်။ အနည်းဆုံးအားဖြင့်၊ ကျွန်ုပ်တို့သည် သင်၏ “ကြော်ထားသော” အကြောင်းအရာများ ပါဝင်ရန် အစိတ်အပိုင်းတစ်ခုမှ လိုအပ်ပြီး ခလုတ်ကို ဖြုတ်ရန် ပြင်းပြင်းထန်ထန် အားပေးပါသည်။

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ကြည်လင်သော

မုန့်ဖုတ်များသည် အနည်းငယ် အလင်းဝင်သည် ဖြစ်သောကြောင့် ၎င်းတို့ ပေါ်လာသမျှကို ရောစပ်ထားသည်။ CSS ပိုင်ဆိုင်မှု ကို ပံ့ပိုးပေးသည့် ဘရောက်ဆာများအတွက် backdrop-filter၊ ကျွန်ုပ်တို့သည် ဆန္ဒပြုချက်တစ်ခုအောက်တွင် အစိတ်အပိုင်းများကို မှုန်ဝါးအောင်ကြိုးစားပါမည်။

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

တစ်ထပ်တည်း

သင့်တွင် ဆန္ဒပြုစရာများစွာရှိသောအခါ၊ ၎င်းတို့ကို ဒေါင်လိုက်အစီအစဥ်ဖြင့် ဖတ်ရှုနိုင်စေရန် ပုံသေသတ်မှတ်ထားပါသည်။

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

နေရာချထားခြင်း။

သင်လိုအပ်သလို စိတ်ကြိုက် CSS ဖြင့် ကြော်ထားသော မုန့်များကို နေရာချပါ။ အပေါ်ဘက် အလယ်ကို မကြာခဏဆိုသလို အသိပေးချက်များအတွက် အသုံးပြုပါသည်။ တစ်ချိန်တည်းမှာ မုန့်တစ်ခုပဲ ပြတော့မယ်ဆိုရင် နေရာချထားမှုပုံစံတွေကို ညာဘက်မှာ ထားလိုက်ပါ .toast။

Bootstrap လွန်ခဲ့သော 11 မိနစ်က
မင်္ဂလာပါကမ္ဘာလောက! ဒါက ဆန္ဒပြုတဲ့ မက်ဆေ့ချ်ပါ။ 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

အကြောင်းကြားချက်များကို ပိုမိုဖန်တီးပေးသည့် စနစ်များအတွက်၊ ၎င်းတို့ကို လွယ်ကူစွာ စုပုံနိုင်စေရန် ထုပ်ပိုးထားသော အစိတ်အပိုင်းကို အသုံးပြုရန် စဉ်းစားပါ။

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Toasts များကို အလျားလိုက် နှင့်/သို့မဟုတ် ဒေါင်လိုက် ချိန်ညှိရန် flexbox utilities များဖြင့်လည်း စိတ်ကူးယဉ်နိုင်သည် ။

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

သုံးစွဲနိုင်မှု

Toasts များသည် သင်၏လာရောက်လည်ပတ်သူများ သို့မဟုတ် အသုံးပြုသူများအတွက် သေးငယ်သောအနှောင့်အယှက်ဖြစ်စေရန် ရည်ရွယ်ပါသည်၊ ထို့ကြောင့် စခရင်ဖတ်သူများနှင့် အလားတူအကူအညီနည်းပညာများရှိသည့်သူများကို ကူညီရန်အတွက်၊ သင့်ပေါင်မုန့်များကို aria-liveဒေသ တစ်ခုတွင် ခြုံထားသင့်သည် ။ တိုက်ရိုက်ထုတ်လွှင့်သည့် ဒေသများတွင် ပြောင်းလဲမှုများ (Toast အစိတ်အပိုင်းတစ်ခုကို ထိုးသွင်းခြင်း/မွမ်းမံခြင်းကဲ့သို့) သည် အသုံးပြုသူ၏အာရုံကို ရွှေ့ရန် သို့မဟုတ် အသုံးပြုသူကို အနှောင့်အယှက်ပေးစရာမလိုဘဲ စခရင်ဖတ်သူများမှ အလိုအလျောက်ကြေညာပေးပါသည်။ ထို့အပြင်၊ aria-atomic="true"ဆန္ဒပြုချက်တစ်ခုလုံးကို ပြောင်းလဲထားသည်ကို ကြေညာမည့်အစား (အက်တမ်တစ်ခုတည်း (အက်တမ်) ယူနစ်တစ်ခုအဖြစ် အမြဲတမ်းကြေညာကြောင်း သေချာစေရန် (ထိုအရာသည် သင်ဆန္ဒပြုသည့်အကြောင်းအရာ၏ တစ်စိတ်တစ်ပိုင်းကိုသာ အပ်ဒိတ်လုပ်ပါက သို့မဟုတ် တူညီသောဆန္ဒပြုသည့်အကြောင်းအရာကို ပြသပါက ပြဿနာများရှိလာနိုင်သည်။ နောက်တစ်ခုက အချိန်တစ်ခု)။ လုပ်ငန်းစဉ်အတွက် လိုအပ်သော အချက်အလက်သည် အရေးကြီးပါက ဥပမာ- ပုံစံတစ်ခုရှိ အမှားအယွင်းများစာရင်းအတွက်၊ ထို့နောက် သတိပေးချက်အစိတ်အပိုင်း ကို အသုံးပြုပါ။ပေါင်မုန့်အစား။

ဆန္ဒပြုမှုကို မထုတ်ပေး မီ သို့မဟုတ် မွမ်းမံပြင်ဆင်ခြင်းမပြုမီ တိုက်ရိုက်ထုတ်လွှင့်သည့်ဒေသသည် အမှတ်တံဆိပ်တွင် ရှိနေရန် လိုအပ်ကြောင်း သတိပြုပါ ။ နှစ်ခုလုံးကို တစ်ချိန်တည်းတွင် ဒိုင်းနမစ်ပုံစံထုတ်ပြီး စာမျက်နှာထဲသို့ ထိုးသွင်းပါက၊ ၎င်းတို့ကို အထောက်အကူပြုနည်းပညာများဖြင့် ယေဘုယျအားဖြင့် ကြေညာမည်မဟုတ်ပါ။

အကြောင်းအရာပေါ်မူတည်၍ အဆင့် roleနှင့် လိုက်လျောညီထွေရှိရန်လည်း လိုအပ်ပါသည် ။ aria-liveerror ကဲ့သို့ အရေးကြီးသော မက်ဆေ့ချ်တစ်ခုဖြစ်ပါက အသုံးပြု role="alert" aria-live="assertive"ပါ၊ သို့မဟုတ် role="status" aria-live="polite"ပါက attribute ကိုသုံးပါ။

သင်ပြသနေသည့်အကြောင်းအရာသည် အပြောင်းအလဲများဖြစ်သောကြောင့်၊ လူများသည် ဆန္ဒပြုဖတ်ရန် အချိန်အလုံအလောက်ရှိစေရန်အတွက် delayအချိန်ကုန်ဆုံး မှုကို အပ်ဒိတ်လုပ်ပါ။

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

အသုံးပြုသည့်အခါတွင် autohide: false၊ အသုံးပြုသူများသည် ဆန္ဒပြုခြင်းကို ပယ်ရန် အပိတ်ခလုတ်ကို ထည့်သွင်းရပါမည်။

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript အပြုအမူ

အသုံးပြုမှု

JavaScript မှတစ်ဆင့် ပေါင်မုန့်များကို စတင်ပါ-

$('.toast').toast(option)

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

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
ကာတွန်း ဘူလီယံ မှန်ပါတယ်။ ဆန္ဒပြုရန်အတွက် CSS မှိန်သောအကူးအပြောင်းကို အသုံးပြုပါ။
autohide ဘူလီယံ မှန်ပါတယ်။ ဆန္ဒပြုချက်ကို အလိုအလျောက် ဖျောက်ပါ။
နှောင့်နှေးခြင်း။ နံပါတ် 500 ဆန္ဒပြုမှုကို ဝှက်ထားရန် နှောင့်နှေးခြင်း (ms)

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

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်တွင် method call ကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။

$().toast(options)

ဒြပ်စင်စုစည်းမှုတွင် မုန့်ဖုတ်လက်ကိုင်ကို ပူးတွဲပါ။

.toast('show')

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

$('#element').toast('show')

.toast('hide')

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

$('#element').toast('hide')

.toast('dispose')

အစိတ်အပိုင်းတစ်ခု၏ဆန္ဒကို ဝှက်ထားသည်။ သင့်ဆန္ဒပြုချက်သည် DOM တွင်ရှိနေမည်ဖြစ်သော်လည်း ပြသတော့မည်မဟုတ်ပါ။

$('#element').toast('dispose')

အဲ့ဒါနဲ့

ပွဲအမျိုးအစား ဖော်ပြချက်
show.bs.toast showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
show.bs.toast ဆန္ဒပြုချက်ကို အသုံးပြုသူမြင်အောင် ပြုလုပ်ထားသောအခါ ဤဖြစ်ရပ်ကို ဖယ်ရှားလိုက်ပါသည်။
hide.bs.toast hideသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ခြင်း အလုပ်ဖြုတ်သည် ။
hidden.bs.toast ဆန္ဒပြုခြင်းကို အသုံးပြုသူမှ ဝှက်ထားခြင်း ပြီးဆုံးသောအခါ ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်လိုက်ပါသည်။ 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})