Li-toast

Tsoela pele ho tsebiso ho baeti ba hau ka toast, molaetsa oa tlhokomeliso o bobebe ebile o ka o etsa habonolo.

Li-toasts ke litsebiso tse bobebe tse etselitsoeng ho etsisa litsebiso tsa push tse 'nileng tsa tuma ke lits'ebetso tsa mobile le tsa desktop. Li hahiloe ka flexbox, kahoo li bonolo ho ikamahanya le maemo.

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea toast:

• Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .
• Li-toast li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
• Li-toast li tla ipata haeba u sa hlakise autohide: false.

Mehlala

Motheo

Ho khothaletsa li-toast tse atolositsoeng le tse ka lebelloang, re khothaletsa hlooho le 'mele. Lihlooho tsa toast li sebelisa display: flex, li lumella ho hlophisoa habonolo ha litaba ka lebaka la lisebelisoa tsa rona tsa margin le flexbox.

Li-toast li tenyetseha ka moo u hlokang 'me li na le li-markup tse nyane haholo tse hlokahalang. Bonyane, re hloka ntho e le 'ngoe ho kenyelletsa litaba tsa hau tse "tosted" le ho khothaletsa ka matla konopo ea ho lahla.

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

Translucent

Li-toasts le tsona lia feto-fetoha hanyenyane, kahoo li kopanya holim'a eng kapa eng eo li ka hlahang ho eona. Bakeng sa libatli tse tšehetsang backdrop-filterthepa ea CSS, re tla leka ho fifatsa likarolo tlas'a toast.

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

Stacking

Ha o na le li-toast tse ngata, re lula re li beha ka mokhoa o hlakileng.

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

Ho beha

Beha li-toast tse nang le CSS e tloaelehileng kamoo u li hlokang kateng. Ka holimo ho le letona hangata ho sebelisoa bakeng sa litsebiso, joalo ka bohareng ba holimo. Haeba u tla bontša toast e le 'ngoe feela ka nako, beha mekhoa ea ho beha hantle holim'a .toast.

<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 litsamaiso tse hlahisang litemoso tse ngata, nahana ka ho sebelisa ntho e phuthelang e le hore li ka phutheha habonolo.

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

U ka boela ua ba majabajaba ka lisebelisoa tsa flexbox ho hokahanya li-toast ka holimo le/kapa ka ho otloloha.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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>

Ho fihlella

Li-toast li reretsoe ho ba litšitiso tse nyane ho baeti kapa basebelisi ba hau, kahoo ho thusa ba nang le libali tsa skrine le mahlale a tšoanang a thusang, o lokela ho phuthela li-toast tsa hau aria-livesebakeng se itseng . Liphetoho libakeng tse phelang (joalo ka ho kenya / ho nchafatsa karolo ea toast) li phatlalatsoa ka bo eona ke babali ba skrineng ntle le ho tsamaisa sepheo sa mosebelisi kapa ho sitisa mosebelisi ho seng joalo. Ho phaella moo, kenyelletsa aria-atomic="true"ho netefatsa hore toast eohle e lula e phatlalatsoa e le yuniti e le 'ngoe (athomo), ho e-na le ho phatlalatsa se fetotsoeng (e leng se ka lebisang mathateng haeba u ka ntlafatsa feela karolo ea likahare tsa toast, kapa haeba u hlahisa lintho tse tšoanang tsa toast. kamora nako). Haeba lintlha tse hlokahalang li le bohlokoa bakeng sa ts'ebetso, mohlala, bakeng sa lethathamo la liphoso ka foromo, sebelisa karolo ea tlhokomeliso.sebakeng sa toast.

Hlokomela hore sebaka se phelang se hloka ho ba teng ka har'a markup pele toast e hlahisoa kapa e nchafatsoa. Haeba u li hlahisa ka bobeli ka nako e le 'ngoe' me u li kenya leqepheng, hangata li ke ke tsa phatlalatsoa ke mahlale a thusang.

U boetse u hloka ho ikamahanya le maemo rolele aria-liveboemo ho latela litaba. Haeba e le molaetsa oa bohlokoa joalo ka phoso, sebelisa role="alert" aria-live="assertive", ho seng joalo sebelisa role="status" aria-live="polite"litšobotsi.

Ha litaba tseo u li bonts'ang li fetoha, etsa bonnete ba hore u nchafatsa nako ea delaynako ho netefatsa hore batho ba na le nako e lekaneng ea ho bala toast.

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

Ha o sebelisa autohide: false, o tlameha ho kenya konopo e koalang ho lumella basebelisi ho tlosa toast.

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

Boitšoaro ba JavaScript

Tšebeliso

Qala ho toast ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Mekhoa

$().toast(options)

E hokela sesebelisoa sa toast pokellong ea lintho.

.toast('show')

E hlahisa toast ea element. E khutlela ho ea letselitseng pele toast e bonts'oa (ke hore pele shown.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho, ho fapana le hoo, toast ea hau e ke ke ea hlaha.

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

.toast('hide')

E pata toast ea element. E khutlela ho ea letselitseng pele toast e patiloe (ke hore pele hidden.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho haeba u entse autohideho false.

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

.toast('dispose')

E pata toast ea element. Toast ea hau e tla lula ho DOM empa ha e sa tla hlola e hlaha.

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

Liketsahalo

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