Ditositi

Kgorometša ditsebišo go baeti ba gago ka tositi, molaetša wa temošo wo o bofefo le wo o ka fetošwago gabonolo.

Di- toast ke ditsebišo tše boima tšeo di hlametšwego go ekiša ditsebišo tša go kgorometša tšeo di tumišitšwego ke ditshepedišo tša go šoma tša diselefouno le tša khomphutha. Di agilwe ka flexbox, ka fao di bonolo go di logaganya le go di bea.

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša plugin ya tositi:

Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .
Di-toast ke tša go kgetha ka mabaka a go šoma, ka gona o swanetše go di thoma ka bowena .
Hle ela hloko gore o na le maikarabelo a go bea di- toast.
Ditositi di tla iphihla ka go iketla ge e ba o sa laetše autohide: false.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Mehlala

Ya motheo

Go kgothaletša di-toast tšeo di katološwago le tšeo di ka bolelelwago pele, re kgothaletša hlogo le mmele. Toast headers use display: flex, lumella bonolo lolamisiwa ga dikahare leboha rona margin le flexbox utilities.

Di-toast di feto-fetoga le maemo ka mo o nyakago gomme di na le go swaya mo gonyenyane kudu mo go nyakegago. Bonyane, re nyaka elemente e tee go ba le diteng tša gago tša “toasted” gomme re kgothaletša ka maatla konope ya go raka.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Phela

Tobetsa konopo e ka tlase ho bontša tositi (e behilweng le didirišwa tša rena sekhutlong sa ka tlase sa le letona) yeo e utilwego ka go ikemela ka .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>

Se se phadimago

Di-toast di na le translucent go se nene go kopana le seo se lego ka tlase ga tšona.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Go kgoboketša

Ge o na le di-toast tše dintši, re default go di kgoboketša thwii ka mokgwa wo o balegago.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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

Go bewa ga dilo

Bea di-toast ka CSS ya tlwaelo ge o di nyaka. Ka godimo ka go le letona gantši e šomišwa go ditsebišo, go swana le ya bogareng bja godimo. Ge e ba o tla tsoga o bontšha feela tositi e tee ka nako, bea mekgwa ya go bea maemo thwii godimo ga .toast.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Bakeng sa ditshepedišo tšeo di tšweletšago ditsebišo tše ntši, nagana ka go šomiša elemente ya go phuthela gore di kgone go kgoboketša gabonolo.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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

O ka boela wa hwetša go makatša ka didirišwa tša flexbox go logaganya di-toast ka go rapalala le/goba ka go otlologa.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Phihlelelo

Di- toast di reretšwe go ba ditšhitišo tše dinyenyane go baeti ba gago goba badiriši, ka gona bakeng sa go thuša bao ba nago le dibadi tša skrine le thekinolotši e swanago ya go thuša, o swanetše go phuthela di- toast tša gago aria-liveseleteng . Diphetogo go dilete tše di phelago (go swana le go hlaba/go mpshafatša karolo ya tositi) di tsebišwa ka go iketla ke babadi ba skrine ntle le go nyaka go šuthiša nepo ya modiriši goba ka tsela ye nngwe go šitiša modiriši. Go tlaleletša, akaretša aria-atomic="true"go netefatša gore tositi ka moka e tsebišwa ka mehla bjalo ka yuniti e tee (ya athomo), go e na le go no tsebiša seo se fetotšwego (seo se ka lebišago mathata ge o mpshafatša fela karolo ya diteng tša tositi, goba ge e ba o bontšha diteng tše di swanago tša tositi ka morago ga nako). Ge e le gore tshedimoo ye e nyakegago e bohlokwa go tshepedio, mohlala, go lenaneo la diphoo ka foromong, gona omia karolo ya temosogo e na le tositi.

Hlokomela gore selete se se phelago se swanetše go ba gona ka go swaya pele tositi e tšweletšwa goba e mpshafatšwa. Ge e ba o tšweletša ka go fetoga bobedi bja tšona ka nako e tee gomme wa di tsenya letlakaleng, ka kakaretšo di ka se tsebišwe ke thekinolotši ya go thuša.

Gape o swanetše go fetoša maemo a rolele aria-livego ya ka diteng. Ge e le molaetša wa bohlokwa go swana le phošo, šomiša role="alert" aria-live="assertive", go sego bjalo šomiša role="status" aria-live="polite"dika.

Ge diteng tšeo o di bontšhago di fetoga, kgonthišetša gore o mpshafatša nako ya go delayfela gore badiriši ba be le nako e lekanego ya go bala tositi.

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

Ge o diriša autohide: false, o swanetše go oketša konope ya go tswalela go dumelela badiriši go lahla tositi.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Le ge e le gore ka setegeniki go a kgonega go oketša ditaolo tše di tsepamego/tšeo di ka tšeago kgato (go swana le dikonope tša tlaleletšo goba dikgokagano) ka gare ga tositi ya gago, o swanetše go efoga go dira se bakeng sa ditositi tša go iphihla. Even if you give the toast a long delaytimeout , badiriši ba khiiboto le theknolotši ya go thuša ba ka hwetša go le thata go fihlelela tositi ka nako go tšea kgato (ka ge di-toast di sa amogele tsepamiso ya kgopolo ge di bontšhwa). Ge e ba o swanetše go ba le ditaolo tše dingwe ka mo go feletšego, re kgothaletša go diriša tositi yeo e nago le autohide: false.

Boitshwaro bja JavaScript

Tšhomišo

Thoma di-toast ka JavaScript:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Leina	Mohuta	Hlokomologa	Tlhalošo
ditshwantsho tse di phelang	boolean ya go swana	nnete	Diriša phetogo ya go fifala ya CSS go tositi
go iphihla ka go itiragalela	boolean ya go swana	nnete	Auto pata tositi
diega	nomoro	`500`	Diega go uta tositi (ms) .

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

`$().toast(options)`

E kgomaretša sedirišwa sa go swara tositi go kgoboketšo ya elemente.

`.toast('show')`

E senola tositi ya elemente. E boela go mogala pele ga ge tositi e bontšhitšwe e le ka kgonthe (ke gore pele shown.bs.toasttiragalo e direga). O swanetše go bitša mokgwa wo ka seatla, go e na le moo tositi ya gago e ka se bontšhe.

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

`.toast('hide')`

Pata tositi ya elemente. E boela go mogala pele ga ge tositi e tloga e utilwe (ke gore pele ga ge hidden.bs.toasttiragalo e direga). O swanetše go bitša mokgwa wo ka seatla ge o dirile autohidego false.

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

`.toast('dispose')`

Pata tositi ya elemente. Toast ya gago e tla dula e le godimo ga DOM eupša e ka se sa bontšha.

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

Ditiragalo

Mohuta wa Tiragalo	Tlhalošo
bontša.bs.toast	Tiragalo ye e thunya ka pela ge `show`mokgwa wa mohlala o bitšwa.
e bontšhitšwe.bs.toast	Tiragalo ye e thuntšhwa ge tositi e dirilwe gore e bonagale go modiriši.
pata.bs.tositi	Tiragalo ye e thuntšhwa ka pela ge `hide`mokgwa wa mohlala o biditšwe.
e utilwego.bs.toast	Tiragalo ye e thuntšhwa ge tositi e feditše go utollwa go modiriši.

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