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 toast wiadomość.

<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). Teraz 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="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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:

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

    toast.show()
  })
}

Przeświecający

Grzanki są lekko przezroczyste, aby wtopić się w to, co jest pod nimi.

Witaj świecie! To jest toast wiadomość.

<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ępów w pionie.

Widzieć? Takie jak to.

Uwaga, tosty układają się automatycznie

<div class="toast-container">
  <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 toast wiadomość.

<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 toast wiadomość.

<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 kolorowania i tła . Tutaj dodaliśmy .bg-primaryi .text-whitedo .toast, a następnie .btn-close-whitedo naszego przycisku zamykania. Aby uzyskać wyraźną krawędź, usuwamy domyślną ramkę za pomocą .border-0.

Witaj świecie! To jest toast wiadomość.

<div class="toast align-items-center text-white 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 toast wiadomość.

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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 toast wiadomość.

<!-- 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 toast wiadomość.

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

Sass

Zmienne

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-animation="".

Nazwa	Rodzaj	Domyślna	Opis
`animation`	logiczne	`true`	Zastosuj zanikające przejście CSS do toastu
`autohide`	logiczne	`true`	Automatycznie ukryj tosty
`delay`	numer	`5000`	Opóźnienie ukrycia tostów (ms)

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 .

pokazać

Ujawnia toast elementu. Wraca do dzwoniącego przed faktycznym wyświetleniem toastu (tj. przed shown.bs.toastwystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, zamiast tego twój tost się nie pokaże.

toast.show()

ukryć

Ukrywa toast elementu. Wraca do dzwoniącego przed faktycznym ukryciem toastu (tj. przed hidden.bs.toastwystąpieniem zdarzenia). Musisz ręcznie wywołać tę metodę, jeśli zrobiłeś autohideto false.

toast.hide()

dysponować

Ukrywa toast elementu. Twój toast pozostanie w DOM, ale nie będzie już wyświetlany.

toast.dispose()

uzyskac instancje

Metoda statyczna , która pozwala uzyskać wyskakującą instancję powiązaną z elementem DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Metoda statyczna , która pozwala uzyskać wyskakującą instancję powiązaną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Wydarzenia

Typ wydarzenia	Opis
`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.
`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.

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