Source

Toasts

Agahdariyên ji bo mêvanên xwe bi toast, peyamek hişyariya sivik û bi hêsanî xwerû bişînin.

Toasts notifications sivik in ku ji bo teqlîdkirina notifications push ku ji hêla pergalên xebitandinê yên mobîl û sermaseyê ve hatine populer kirin hatine çêkirin. Ew bi flexbox-ê hatine çêkirin, ji ber vê yekê ew bi hev veqetandin û pozîsyonê hêsan in.

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka toast bikar tînin:

  • Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .
  • Toast ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
  • Ji kerema xwe not bikin ku hûn berpirsiyar in ji bo danîna toastan.
  • Ger tu diyar nekî Toast dê bixweber veşêrin autohide: false.

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Examples

Bingehîn

Ji bo teşwîqkirina tostên berfireh û pêşbînîkirî, em sernav û laşek pêşniyar dikin. Sernavên Toast bikar tînin display: flex, bi saya karûbarên meya marjînal û flexbox-ê rê dide hevrêzkirina naverokê hêsan.

Toast bi qasî ku hûn hewce ne maqûl in û îşaretek pir hindik hewce ne. Bi kêmanî, em ji hêmanek yekane hewce dikin ku naveroka weya "toast" hebe û bi tundî bişkokek betalkirinê teşwîq bike.

<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

Toast di heman demê de hinekî zelal in, ji ber vê yekê ew li ser her tiştê ku dibe ku xuya bibin tevlihev dibin. Ji bo gerokên ku backdrop-filtertaybetmendiya CSS-ê piştgirî dikin, em ê jî hewl bidin ku hêmanên di binê tostê de bişewitînin.

<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

Gava ku we gelek tost hene, em jixweber wan bi rengek verastkirî bi rengek xwendinê li hev kom dikin.

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

Cihkirin

Li gorî ku hûn hewce ne bi CSS-ya xwerû toastan bi cih bikin. Rastê jorîn bi gelemperî ji bo ragihandinê tê bikar anîn, wekî navîna jorîn. Ger hûn ê her gav tenê yek tost nîşan bidin, şêwazên pozîsyonê rast li ser bixin .toast.

Bootstrap 11 deqîqe berê
Silav, dinya! Ev peyamek toast e. 
<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>

Ji bo pergalên ku bêtir agahdarî diafirînin, bi karanîna hêmanek pêçandî bifikirin da ku ew bi hêsanî bicivînin.

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

Her weha hûn dikarin bi karûbarên flexbox-ê xweş bibin da ku tostanan bi horizontî û/an verastalî hev bikin.

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

Gihîştina

Toast têne armanc kirin ku ji bo serdan an bikarhênerên we re qutkirinên piçûk bin, ji ber vê yekê ji bo ku hûn bi xwendevanên ekranê û teknolojiyên alîkar ên mîna wan re bibin alîkar, divê hûn tostanên xwe li aria-liveherêmek bipêçin . Guhertinên li herêmên zindî (wek derzîkirin/nûvekirina hêmanek toast) bixweber ji hêla xwendevanên ekranê ve têne ragihandin bêyî ku hewce bike ku bala bikarhêner biguhezîne an bi rengek din bikarhêner were qut kirin. Wekî din, têxin nav aria-atomic="true"xwe da ku pê ewle bibin ku tevahiya toast her gav wekî yekeyek yekane (atomî) tê ragihandin, li şûna ragihandina tiştê ku hatî guhertin (ku dibe sedema pirsgirêkan heke hûn tenê beşek ji naveroka toast nûve bikin, an heke heman naveroka toastê li ser nîşan bidin. demek paşerojê). Ger agahdariya ku hewce dike ji bo pêvajoyê girîng e, mînakî ji bo navnîşek xeletiyên di formekê de, wê hingê beşa hişyariyê bikar bînin.li şûna toast.

Bala xwe bidinê ku berî ku toast were çêkirin an nûvekirin pêdivî ye ku devera zindî di nîşankirinê de hebe. Ger hûn di heman demê de herduyan bi dînamîk biafirînin û wan di rûpelê de derxînin, ew ê bi gelemperî ji hêla teknolojiyên arîkar ve neyên ragihandin.

Di heman demê de pêdivî ye ku hûn li gorî naverokê astê roleû astê biguhezînin. aria-liveGer ew peyamek girîng e mîna xeletiyek, bikar bînin role="alert" aria-live="assertive", wekî din role="status" aria-live="polite"taybetmendiyan bikar bînin.

Gava ku naveroka ku hûn nîşan didin diguhezin, pê ewle bin ku wextê nûve bikin da ku pê ewle bin ku mirov têra xwe wextê xwendina tostê heye delay.

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

Dema ku hûn bikar tînin autohide: false, divê hûn bişkokek nêzîk lê zêde bikin da ku bihêlin bikarhêneran tostê biavêjin.

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

tevgera JavaScript

Bikaranîna

Bi JavaScriptê toastan bidin destpêkirin:

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

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Nav Awa Destçûnî Terîf
jayandarî boolean rast Veguheztina fade ya CSS-ê li toastê bicîh bikin
otohide boolean rast Auto veşêre toast
derengxistin jimare 500 Dereng veşartina tostê (ms)

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

$().toast(options)

Desthilatdarek toast bi berhevokek elementê ve girêdide.

.toast('show')

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

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

.toast('hide')

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

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

.toast('dispose')

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

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

Events

Event Type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.bs.toast Dema ku tost ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})