Tosty

Powiadomienia push dla odwiedzających z toastem, lekkim i łatwo konfigurowalnym komunikatem ostrzegawczym.

Na tej stronie

Toasty to lekkie powiadomienia zaprojektowane w celu naśladowania powiadomień push, które zostały spopularyzowane przez mobilne i stacjonarne systemy operacyjne. Są zbudowane z flexboxem, dzięki czemu można je łatwo wyrównać i ustawić.

Przegląd

Co należy wiedzieć podczas korzystania z wtyczki toast:

Tosty są włączane ze względu na wydajność, więc musisz je zainicjować samodzielnie .
Tosty zostaną automatycznie ukryte, jeśli nie określisz autohide: false.

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

Przykłady

Podstawowy

Aby zachęcić do rozszerzania się i przewidywania toastów, zalecamy nagłówek i treść. Używają nagłówków Toast display: flex, co pozwala na łatwe wyrównanie treści dzięki naszym narzędziom marginesów i flexbox.

Tosty są tak elastyczne, jak potrzebujesz i mają bardzo mało wymaganych znaczników. Wymagamy co najmniej jednego elementu, aby zawierał „wypiekaną” treść i zdecydowanie zachęcamy do przycisku odrzucenia.

Witaj świecie! To jest wiadomość toastowa.

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>

Wcześniej nasze skrypty dynamicznie dodawały .hideklasę, aby całkowicie ukryć toast ( display:nonezamiast za pomocą opacity:0). Nie jest to już konieczne. Jednak dla wstecznej kompatybilności nasz skrypt będzie nadal przełączać klasę (nawet jeśli nie ma takiej praktycznej potrzeby) aż do następnej głównej wersji.

Przykład na żywo

Kliknij przycisk poniżej, aby wyświetlić toast (umieszczony za pomocą naszych narzędzi w prawym dolnym rogu), który został domyślnie ukryty.

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>

Używamy następującego kodu JavaScript, aby uruchomić nasze demo toastów na żywo:

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

    toast.show()
  })
}

Przeświecający

Grzanki są lekko przezroczyste, aby zmieszać się z tym, co znajduje się pod nimi.

Witaj świecie! To jest wiadomość toastowa.

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>

Układanie

Tosty można układać w stosy, owijając je w pojemnik na tosty, który doda trochę odstępu w pionie.

Widzieć? Takie jak to.

Uwaga, tosty układają się automatycznie

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>

Treści niestandardowe

Dostosuj swoje tosty, usuwając podkomponenty, modyfikując je za pomocą narzędzi lub dodając własne znaczniki. Tutaj stworzyliśmy prostszy toast, usuwając domyślną .toast-header, dodając niestandardową ikonę ukrywania z ikon Bootstrap i używając niektórych narzędzi flexbox do dostosowania układu.

Witaj świecie! To jest wiadomość toastowa.

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>

Alternatywnie możesz również dodać dodatkowe elementy sterujące i komponenty do tostów.

Witaj świecie! To jest wiadomość toastowa.

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>

Schematy kolorów

Opierając się na powyższym przykładzie, możesz tworzyć różne schematy kolorów tostowych za pomocą naszych narzędzi do koloru i tła . Tutaj dodaliśmy .text-bg-primarydo .toast, a następnie dodaliśmy .btn-close-whitedo naszego przycisku zamykania. Aby uzyskać wyraźną krawędź, usuwamy domyślną ramkę za pomocą .border-0.

Witaj świecie! To jest wiadomość toastowa.

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>

Umieszczenie

Umieszczaj tosty za pomocą niestandardowego kodu CSS, gdy ich potrzebujesz. Prawy górny róg jest często używany do powiadomień, podobnie jak górny środkowy. Jeśli masz zamiar pokazywać tylko jeden toast na raz, ustaw style pozycjonowania bezpośrednio na .toast.

Witaj świecie! To jest wiadomość toastowa.

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>

W przypadku systemów, które generują więcej powiadomień, rozważ użycie elementu opakowującego, aby można je było łatwo układać w stos.

Widzieć? Takie jak to.

Uwaga, tosty układają się automatycznie

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>

Możesz również zainteresować się narzędziami flexbox, aby wyrównać tosty w poziomie i/lub w pionie.

Witaj świecie! To jest wiadomość toastowa.

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>

Dostępność

Toasty mają być małymi przerwami dla odwiedzających lub użytkowników, więc aby pomóc osobom korzystającym z czytników ekranu i podobnych technologii wspomagających, należy zawinąć toasty w aria-liveregionie . Zmiany w aktywnych regionach (takie jak wstrzykiwanie/aktualizacja komponentu toastu) są automatycznie ogłaszane przez czytniki ekranu bez konieczności przesuwania fokusu użytkownika lub w inny sposób przerywania użytkownikowi. Dodatkowo uwzględnij, aria-atomic="true"aby upewnić się, że cały toast jest zawsze ogłaszany jako pojedyncza (atomowa) jednostka, a nie tylko ogłaszanie zmian (co może prowadzić do problemów, jeśli zaktualizujesz tylko część treści toastu lub jeśli wyświetlisz tę samą treść toastu w późniejszym czasie). Jeśli potrzebne informacje są ważne dla procesu, np. lista błędów w formularzu, użyj komponentu alertuzamiast tostów.

Pamiętaj, że aktywny region musi być obecny w znacznikach przed wygenerowaniem lub zaktualizowaniem toastu. Jeśli dynamicznie wygenerujesz oba w tym samym czasie i wstawisz je na stronę, generalnie nie zostaną one ogłoszone przez technologie wspomagające.

Musisz również dostosować poziom rolei aria-livew zależności od treści. Jeśli jest to ważna wiadomość, taka jak błąd, użyj role="alert" aria-live="assertive", w przeciwnym razie użyj role="status" aria-live="polite"atrybutów.

Ponieważ treść, którą wyświetlasz, zmienia się, pamiętaj o zaktualizowaniu delaylimitu czasu , aby użytkownicy mieli wystarczająco dużo czasu na przeczytanie toastu.

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

Korzystając z autohide: false, musisz dodać przycisk zamykania, aby umożliwić użytkownikom odrzucenie toastu.

Witaj świecie! To jest wiadomość toastowa.

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>

Chociaż technicznie możliwe jest dodanie kontrolek, które można skoncentrować/działać (takich jak dodatkowe przyciski lub linki) w toastach, należy unikać tego w przypadku automatycznego ukrywania toastów. Nawet jeśli ustawisz toast przez długi delayczas , użytkownicy klawiatury i technologii wspomagających mogą mieć trudności z dotarciem do toastu na czas, aby podjąć działanie (ponieważ tosty nie są wyświetlane, gdy są wyświetlane). Jeśli bezwzględnie musisz mieć dodatkowe elementy sterujące, zalecamy użycie tostów z autohide: false.

CSS

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, tosty używają teraz lokalnych zmiennych CSS, .toastaby zapewnić lepsze dostosowywanie w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

  --#{$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};

Zmienne Sassa

$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);

Stosowanie

Inicjuj tosty za pomocą JavaScript:

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

Wyzwalacze

Zwolnienie można osiągnąć za pomocą dataatrybutu na przycisku w toastu , jak pokazano poniżej:

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

lub na przycisku poza tostem , korzystając z data-bs-targetponiższego:

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

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Nazwa	Rodzaj	Domyślna	Opis
`animation`	logiczne	`true`	Zastosuj przejście CSS do toastu.
`autohide`	logiczne	`true`	Automatycznie ukryj tosty po opóźnieniu.
`delay`	numer	`5000`	Opóźnienie w milisekundach przed ukryciem tostów.

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .

metoda	Opis
`dispose`	Ukrywa toast elementu. Twój toast pozostanie w DOM, ale nie będzie już wyświetlany.
`getInstance`	Metoda statyczna , która pozwala uzyskać wyskakującą instancję skojarzoną z elementem DOM. Na przykład: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Zwraca instancję toastu Bootstrap.
`getOrCreateInstance`	Metoda statyczna , która pozwala uzyskać wyskakującą instancję powiązaną z elementem DOM lub utworzyć nową, jeśli nie została zainicjowana. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Zwraca instancję toastu Bootstrap.
`hide`	Ukrywa toast elementu. Wraca do dzwoniącego przed faktycznym ukryciem toastu (tj. przed `hidden.bs.toast`wystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, jeśli zrobiłeś `autohide`to `false`.
`isShown`	Zwraca wartość logiczną zgodnie ze stanem widoczności toastu.
`show`	Ujawnia toast elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem toastu (tj. przed `shown.bs.toast`wystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, zamiast tego twój tost się nie pokaże.

Wydarzenia

Wydarzenie	Opis
`hide.bs.toast`	To zdarzenie jest wywoływane natychmiast po `hide`wywołaniu metody wystąpienia.
`hidden.bs.toast`	To zdarzenie jest uruchamiane po zakończeniu ukrywania toastu przed użytkownikiem.
`show.bs.toast`	To zdarzenie jest wyzwalane natychmiast po `show`wywołaniu metody wystąpienia.
`shown.bs.toast`	To zdarzenie jest uruchamiane, gdy toast jest widoczny dla użytkownika.

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