نان تست

با یک نان تست، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، اعلان‌ها را به بازدیدکنندگان خود ارسال کنید.

در این صفحه

نان تست ها اعلان های سبک وزنی هستند که برای تقلید از اعلان های فشاری که توسط سیستم عامل های موبایل و دسکتاپ رایج شده اند طراحی شده اند. آنها با فلکس باکس ساخته شده اند، بنابراین به راحتی قابل تراز و قرار دادن هستند.

بررسی اجمالی

نکاتی که هنگام استفاده از پلاگین نان تست باید بدانید:

نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
اگر نان تست را مشخص نکنید به طور خودکار پنهان می شوند 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در اینجا با حذف پیش‌فرض ، افزودن یک نماد مخفی سفارشی از Bootstrap Icons و استفاده از برخی ابزارهای فلکس‌باکس برای تنظیم طرح ، یک نان تست ساده‌تر ایجاد کرده‌ایم .

سلام دنیا! این یک پیام نان تست است.

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.

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، نان تست‌ها اکنون از متغیرهای 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 ” به “ kebab-case ” تغییر دهید. به عنوان مثال، data-bs-custom-class="beautifier"به جای استفاده از data-bs-customClass="beautifier".

از Bootstrap 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)`نمونه تست Bootstrap را برمی گرداند.
`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...
})