Tosty

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

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:

Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to .
Tosty są włączane ze względu na wydajność, więc musisz je zainicjować samodzielnie .
Pamiętaj, że to Ty odpowiadasz za pozycjonowanie tostów.
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.

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

Relacja 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 za pomocą .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Przeświecający

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

Witaj świecie! To jest wiadomość toastowa.

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

Układanie

Gdy masz wiele tostów, domyślnie układamy je pionowo w czytelny sposób.

Widzieć? Takie jak to.

Uwaga, tosty układają się automatycznie

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

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.

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

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

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.

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

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

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

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.

zachowanie JavaScript

Stosowanie

Inicjuj tosty za pomocą JavaScript:

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

Opcje

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

Nazwa	Rodzaj	Domyślna	Opis
animacja	logiczne	PRAWDA	Zastosuj zanikające przejście CSS do toastu
automatyczne chowanie	logiczne	PRAWDA	Automatycznie ukryj tosty
opóźnienie	numer	`500`	Opóźnienie ukrywania 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 .

`$().toast(options)`

Dołącza moduł obsługi tostów do kolekcji elementów.

`.toast('show')`

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.

$('#element').toast('show')

`.toast('hide')`

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.

$('#element').toast('hide')

`.toast('dispose')`

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

$('#element').toast('dispose')

Wydarzenia

Typ wydarzenia	Opis
pokaż.bs.tosty	To zdarzenie jest wyzwalane natychmiast po `show`wywołaniu metody wystąpienia.
pokazano.bs.tosty	To zdarzenie jest uruchamiane, gdy toast jest widoczny dla użytkownika.
ukryj.bs.tosty	To zdarzenie jest wywoływane natychmiast po `hide`wywołaniu metody wystąpienia.
ukryta.bs.tosty	To zdarzenie jest uruchamiane po zakończeniu ukrywania toastu przed użytkownikiem.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})