ټاسټونه

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

په دې پاڼه کې

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

کتنه

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

ټاسټونه د فعالیت دلایلو لپاره غوره شوي ، نو تاسو باید دوی پخپله پیل کړئ .
ټاسټونه به په اوتومات ډول پټ شي که تاسو مشخص نه کړئ autohide: false.

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

مثالونه

اساسی

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

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

سلام نړی! دا د ټیسټ پیغام دی.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

مخکې، زموږ سکریپټونو په متحرک ډول .hideټولګي اضافه کړه ترڅو په بشپړ ډول ټیسټ پټ کړي (سره display:none، نه یوازې د سره opacity:0). دا اوس نور اړین نه دی. په هرصورت، د شاته مطابقت لپاره، زموږ سکریپټ به د ټولګي بدلولو ته دوام ورکړي (که څه هم د دې لپاره هیڅ عملي اړتیا نشته) تر راتلونکي لوی نسخه پورې.

ژوندۍ بېلګه

د ټوسټ ښودلو لپاره لاندې تڼۍ کلیک وکړئ (زموږ د اسانتیاوو سره په ښکته ښیې کونج کې موقعیت لري) چې د ډیفالټ لخوا پټ شوی.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

موږ لاندې جاواسکریپټ کاروو ترڅو زموږ د ژوندی ټوسټ ډیمو متحرک کړو:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

شفاف

ټوسټونه یو څه شفاف دي ترڅو د لاندې شیانو سره مخلوط شي.

سلام نړی! دا د ټیسټ پیغام دی.

html

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

سټکینګ

تاسو کولی شئ ټوسټونه په ټوسټ کانټینر کې په لپاس کولو سره ذخیره کړئ ، کوم چې به په عمودي ډول یو څه فاصله اضافه کړي.

وګوره؟ بس همداسی.

سر پورته کړئ، ټیسټونه به په اوتومات ډول سټیک شي

html

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

دودیز منځپانګې

خپل ټوسټونه د فرعي اجزاوو په لرې کولو، د اسانتیاوو سره ټیک کولو ، یا خپل مارک اپ اضافه کولو سره تنظیم کړئ. دلته موږ د ډیفالټ لرې کولو ، د بوټسټریپ آئیکونونو څخه.toast-header د دودیز پټولو آئیکون اضافه کولو ، او د ترتیب تنظیم کولو لپاره د فلیکس بکس ځینې اسانتیاو په کارولو سره یو ساده ټوسټ رامینځته کړی.

سلام نړی! دا د ټیسټ پیغام دی.

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

په بدیل سره ، تاسو کولی شئ اضافي کنټرولونه او اجزاو ته هم اضافه کړئ.

سلام نړی! دا د ټیسټ پیغام دی.

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

د رنګ سکیمونه

د پورته مثال په اساس، تاسو کولی شئ زموږ د رنګ او شالید اسانتیاوو سره د ټوسټ مختلف رنګ سکیمونه جوړ کړئ . دلته مو په نزد تڼۍ کې اضافه .text-bg-primaryکړه .toast، او بیا .btn-close-whiteمو د تړلو تڼۍ ته اضافه کړه. د کرکري څنډې لپاره ، موږ د ډیفالټ سرحد له سره لرې کوو .border-0.

سلام نړی! دا د ټیسټ پیغام دی.

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ځای پرځای کول

ټاسټونه د دودیز CSS سره ځای په ځای کړئ لکه څنګه چې تاسو ورته اړتیا لرئ. پورتنۍ ښیې اکثرا د خبرتیاو لپاره کارول کیږي ، لکه څنګه چې پورتنۍ مینځنۍ برخه ده. که تاسو په یو وخت کې یوازې یو ټوسټ ښودلو ته ځئ ، د موقعیت سټایلونه په سم ځای کې واچوئ .toast.

سلام نړی! دا د ټیسټ پیغام دی.

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

د هغه سیسټمونو لپاره چې ډیر خبرتیاوې رامینځته کوي ، د ریپینګ عنصر کارولو ته پام وکړئ نو دوی په اسانۍ سره سټیک کولی شي.

وګوره؟ بس همداسی.

سر پورته کړئ، ټیسټونه به په اوتومات ډول سټیک شي

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

سلام نړی! دا د ټیسټ پیغام دی.

html

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

کله چې کاروئ autohide: false، تاسو باید د نږدې تڼۍ اضافه کړئ ترڅو کاروونکو ته اجازه ورکړي چې ټوسټ ګوښه کړي.

سلام نړی! دا د ټیسټ پیغام دی.

html

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

پداسې حال کې چې تخنیکي پلوه دا ممکنه ده چې ستاسو په ټوسټ کې د تمرکز وړ / د عمل وړ کنټرولونه (لکه اضافي تڼۍ یا لینکونه) اضافه کړئ، تاسو باید د ځان پټولو لپاره د دې کولو څخه ډډه وکړئ. حتی که تاسو ټوسټ ته اوږد delayوخت ورکړئ ، د کیبورډ او مرستندویه ټیکنالوژۍ کاروونکي ممکن د عمل کولو لپاره په وخت کې ټوسټ ته رسیدل ستونزمن وي (ځکه چې ټوسټونه د ښودلو پرمهال تمرکز نه ترلاسه کوي). که تاسو په بشپړ ډول نور کنټرولونه ولرئ، موږ وړاندیز کوو چې د ټوسټ کارولو سره autohide: false.

سی ایس ایس

متغیرات

په v5.2.0 کې اضافه شوی

د بوټسټریپ د پرمختللې CSS متغیر تګلارې د یوې برخې په توګه ، ټاسټونه اوس ځایی CSS متغیرونه د .toastریښتیني وخت اصلاح کولو لپاره کاروي. د CSS متغیرونو لپاره ارزښتونه د Sass له لارې تنظیم شوي، نو د Sass تخصیص لاهم هم ملاتړ کیږي.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

د Sass متغیرات

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

کارول

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

محرکونه

ګوښه کول د ټوسټ دننه دdata تڼۍ د ځانګړتیا سره ترلاسه کیدی شي لکه څنګه چې لاندې ښودل شوي:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

یا د ټوسټ څخه بهر په تڼۍ کې د لاندې ښودل شوي په کارولو سره data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

اختیارونه

لکه څنګه چې اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټ له لارې لیږدول کیدی شي، تاسو کولی شئ د اختیار نوم په کې ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-animation="{value}". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د " camelCase " څخه " کباب-کیس " ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د data-bs-custom-class="beautifier"ځای پرځای وکاروئ data-bs-customClass="beautifier".

د بوټسټریپ 5.2.0 پورې ، ټولې برخې د تجربې خوندي شوي ډیټا ځانګړتیا ملاتړ کوي data-bs-configچې کولی شي د JSON سټرینګ په توګه د ساده اجزاو ترتیب ځای په ځای کړي. کله چې یو عنصر ولري data-bs-config='{"delay":0, "title":123}'او data-bs-title="456"ځانګړتیاوې ولري، وروستی titleارزښت به وي 456او د جلا معلوماتو ځانګړتیاوې به په ورکړل شوي ارزښتونو باندې غالب شي data-bs-config. برسېره پردې، د موجوده ډاټا ځانګړتیاوې د JSON ارزښتونو لکه data-bs-delay='{"show":0,"hide":150}'.

نوم	ډول	ډیفالټ	تفصیل
`animation`	بولین	`true`	د ټوسټ لپاره د CSS فیډ لیږد تطبیق کړئ.
`autohide`	بولین	`true`	په اتوماتيک ډول د ځنډ وروسته ټوسټ پټ کړئ.
`delay`	شمیره	`5000`	د ټوسټ پټولو دمخه په ملی ثانیو کې ځنډ وکړئ.

میتودونه

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

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

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

طریقه	تفصیل
`dispose`	د عنصر ټیسټ پټوي. ستاسو ټوسټ به په DOM کې پاتې شي مګر نور به ونه ښیې.
`getInstance`	جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي ټوسټ مثال ترلاسه کړئ. د مثال په توګه: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`د بوټسټریپ ټوسټ مثال بیرته راګرځي.
`getOrCreateInstance`	جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي ټوسټ مثال ترلاسه کړئ ، یا یو نوی رامینځته کړئ ، په هغه صورت کې چې دا پیل شوی نه وي. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`د بوټسټریپ ټوسټ مثال بیرته راګرځي.
`hide`	د عنصر ټیسټ پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ټوسټ واقعیا پټ شوی وي (یعنې مخکې له دې چې `hidden.bs.toast`پیښه پیښ شي). تاسو باید په لاسي ډول دا میتود ته زنګ ووهئ که تاسو یې کړی `autohide`وي `false`.
`isShown`	د ټوسټ د لید حالت سره سم بولین بیرته راګرځي.
`show`	د یو عنصر ټوسټ څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ټوسټ واقعیا وښودل شي (یعنې مخکې له دې چې `shown.bs.toast`پیښه پیښ شي). تاسو باید په لاسي ډول دا طریقه زنګ ووهئ، پرځای یې ستاسو ټوسټ به ونه ښیې.

پیښې

پیښه	تفصیل
`hide.bs.toast`	دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د `hide`مثال میتود ویل کیږي.
`hidden.bs.toast`	دا پیښه له مینځه وړل کیږي کله چې ټوسټ د کارونکي څخه پټ شوی وي.
`show.bs.toast`	دا پیښه سمدلاسه اوریږي کله چې د `show`مثال میتود ویل کیږي.
`shown.bs.toast`	دا پیښه له مینځه وړل کیږي کله چې ټوسټ کارونکي ته ښکاره شي.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})