in English

ټاسټونه

خپلو لیدونکو ته خبرتیاوې د ټوسټ ، لږ وزن لرونکي او په اسانۍ سره د تنظیم وړ خبرتیا پیغام سره فشار ورکړئ.

ټوسټونه لږ وزن لرونکي خبرتیاوې دي چې د پش خبرتیاو نقل کولو لپاره ډیزاین شوي چې د ګرځنده او ډیسټاپ عملیاتي سیسټمونو لخوا مشهور شوي. دوی د فلیکس بکس سره جوړ شوي، نو دوی د ترتیب او موقعیت لپاره اسانه دي.

کتنه

د ټوسټ پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:

  • که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .
  • ټاسټونه د فعالیت دلایلو لپاره غوره شوي ، نو تاسو باید دوی پخپله پیل کړئ .
  • مهرباني وکړئ په یاد ولرئ چې تاسو د ټیسټونو موقعیت لپاره مسؤل یاست.
  • ټاسټونه به په اوتومات ډول پټ شي که تاسو مشخص نه کړئ autohide: false.

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

مثالونه

بنسټیز

د تمدید وړ او وړاندوینې وړ ټیسټ هڅولو لپاره ، موږ سرلیک او بدن وړاندیز کوو. د ټوسټ سرلیکونه کاروي display: flex، زموږ د حاشیې او فلیکس بکس اسانتیاو څخه مننه د مینځپانګې اسانه تنظیم کولو ته اجازه ورکوي.

ټوسټونه هغومره انعطاف منونکي دي څومره چې تاسو ورته اړتیا لرئ او خورا لږ اړین مارک اپ لري. لږترلږه، موږ یو واحد عنصر ته اړتیا لرو چې ستاسو "ټوسټ شوي" مینځپانګې ولري او په کلکه د ګوښه کولو تڼۍ وهڅوو.

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

شفاف

ټوسټونه هم یو څه شفاف دي، نو دوی په هر هغه څه سره مخلوط کوي چې ممکن یې ښکاره شي. د هغو براوزرونو لپاره چې د backdrop-filterCSS ملکیت ملاتړ کوي، موږ به هڅه وکړو چې عناصر د ټوسټ لاندې روښانه کړو.

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

بوټسټپ 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>

تاسو کولی شئ د فلیکس بکس اسانتیاو سره هم خوند واخلئ ترڅو ټیسټونه په افقی او / یا عمودی ډول تنظیم کړئ.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

لاسرسی

ټاسټونه ستاسو د لیدونکو یا کاروونکو لپاره کوچني مداخلې لپاره دي ، نو د سکرین لوستونکو او ورته مرستندویه ټیکنالوژیو سره د مرستې لپاره ، تاسو باید خپل ټوسټونه په یوه aria-liveسیمه کې وپلټئ . په ژوندیو سیمو کې بدلونونه (لکه د ټوسټ برخې انجیک کول / تازه کول) د سکرین لوستونکو لخوا په اوتومات ډول اعلان کیږي پرته لدې چې د کارونکي تمرکز حرکت وکړي یا بل ډول د کارونکي مداخله وکړي. برسیره پردې، دا شامل aria-atomic="true"کړئ چې ډاډ ترلاسه کړئ چې ټول ټوسټ تل د یو واحد (اټومي) واحد په توګه اعلان کیږي، د دې پر ځای چې څه بدل شوي اعلان کړي (کوم چې تاسو یوازې د ټوسټ مینځپانګې برخه تازه کړئ، یا که د ورته ټوسټ مینځپانګې ښودلو کې ستونزې رامینځته کولی شي. د وخت په تیریدو سره). که اړین معلومات د پروسې لپاره مهم وي، د بیلګې په توګه په فورمه کې د غلطیو لیست لپاره، نو بیا د خبرتیا برخې وکاروئد ټیسټ پرځای.

په یاد ولرئ چې ژوندۍ سیمه باید مخکې له دې چې ټوسټ تولید یا تازه شي په مارک اپ کې شتون ولري. که تاسو په متحرک ډول دواړه په ورته وخت کې تولید کړئ او پاڼې ته یې داخل کړئ، دوی به عموما د مرستندویه ټیکنالوژیو لخوا اعلان نشي.

تاسو اړتیا لرئ چې د مینځپانګې پراساس roleاو کچه هم تنظیم کړئ. aria-liveکه دا یو مهم پیغام وي لکه تېروتنه، استعمال کړئ role="alert" aria-live="assertive"، که نه نو role="status" aria-live="polite"ځانګړتیاوې وکاروئ.

لکه څنګه چې هغه مینځپانګه چې تاسو یې بدلونونه ښیې، ډاډ ترلاسه کړئ چې د 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>

جاواسکریپټ چلند

کارول

د جاواسکریپټ له لارې ټیسټ پیل کړئ:

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-animation="".

نوم ډول ډیفالټ تفصیل
حرکت بولین ریښتیا د ټوسټ لپاره د CSS فیډ لیږد تطبیق کړئ
اتومات پټول بولین ریښتیا په اتوماتيک ډول ټوسټ پټ کړئ
ځنډ شمیره 500 د ټوسټ پټول ځنډول (ms)

میتودونه

غیر متناسب میتودونه او لیږدونه

د API ټولې طریقې غیر متناسب دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته راستانه کیږي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

$().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مثال میتود ویل کیږي.
ښودل شوی.bs.toast دا پیښه له مینځه وړل کیږي کله چې ټوسټ کارونکي ته ښکاره شي.
hide.bs.toast دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.toast دا پیښه له مینځه وړل کیږي کله چې ټوسټ د کارونکي څخه پټ شوی وي.
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})