Source

Tósta

Brúigh fógraí chuig do chuairteoirí le tósta, teachtaireacht rabhaidh éadrom agus inoiriúnaithe go héasca.

Is fógraí éadroma iad tósta atá deartha chun aithris a dhéanamh ar bhrúfhógraí a bhfuil tóir ag córais oibriúcháin soghluaiste agus deisce orthu. Tá siad tógtha le flexbox, mar sin tá siad éasca a ailíniú agus a shuíomh.

Forbhreathnú

Rudaí le fios agus an breiseán tósta in úsáid:

  • Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .
  • Tá rogha an diúltaithe ag tósta ar chúiseanna feidhmíochta, mar sin ní mór duit iad a thosú tú féin .
  • Tabhair faoi deara le do thoil go bhfuil tú freagrach as tósta a shuíomh.
  • Beidh tósta i bhfolach go huathoibríoch mura sonraíonn tú autohide: false.

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Samplaí

Bunúsach

Chun tóstaí sínte agus intuartha a spreagadh, molaimid ceanntásc agus corp. Úsáideann ceanntásca tósta display: flex, a cheadaíonn ailíniú éasca an ábhair a bhuíochas lenár bhfóntais corrlaigh agus flexbox.

Bíonn tósta chomh solúbtha agus is gá duit agus is beag an marcáil riachtanach a bhíonn acu. Ar a laghad, teastaíonn gné amháin uainn chun d’ábhar “tósta” a chuimsiú agus molaimid go láidir cnaipe díbhe.

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

Tréshoilseach

Bíonn tósta beagáinín tréshoilseach freisin, agus mar sin meascann siad cibé rud a d’fhéadfadh a bheith os a chionn. Maidir le brabhsálaithe a thacaíonn leis an backdrop-filterairí CSS, déanfaimid iarracht freisin na heilimintí a dhoiléiriú faoi thósta.

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

Cruachta

Nuair a bhíonn go leor tósta agat, déanaimid iad a chruachadh go hingearach ar bhealach inléite de réir réamhshocraithe.

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

Socrúchán

Cuir tósta le CSS saincheaptha de réir mar is gá duit. Is minic a úsáidtear an barr ar dheis le haghaidh fógraí, mar a úsáidtear sa lár uachtarach. Mura bhfuil tú chun ach tósta amháin a thaispeáint ag an am, cuir na stíleanna suite ar dheis ar an .toast.

Bootstrap 11 nóiméad ó shin
Dia duit, domhan! Is teachtaireacht tósta é seo. 
<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>

Maidir le córais a ghineann níos mó fógraí, smaoinigh ar eilimint timfhilleadh a úsáid ionas gur féidir iad a chruachadh go héasca.

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

Is féidir leat a bheith mhaisiúil freisin le fóntais flexbox chun tósta a ailíniú go cothrománach agus/nó go hingearach.

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

Inrochtaineacht

Is éard atá i gceist le tósta ná cur isteach beag ar do chuairteoirí nó d’úsáideoirí, mar sin chun cabhrú leo siúd a bhfuil léitheoirí scáileáin agus teicneolaíochtaí cúnta comhchosúla acu, ba chóir duit do thóstaí a chuimilt i aria-liveréigiún . Fógraíonn léitheoirí scáileáin go huathoibríoch athruithe ar réigiúin bheo (amhail comhpháirt tósta a instealladh/nuashonrú) gan gá le fócas an úsáideora a bhogadh nó gan cur isteach ar an úsáideoir ar bhealach eile. Ina theannta sin, aria-atomic="true"cinntigh go bhfógrófar an tósta ar fad i gcónaí mar aonad amháin (adamhach), seachas an méid a athraíodh a fhógairt (a d’fhéadfadh fadhbanna a chruthú mura nuashonraíonn tú ach cuid d’ábhar an tósta, nó má tá an t-ábhar tósta céanna á thaispeáint ag pointe ama níos déanaí). Má tá an fhaisnéis atá ag teastáil tábhachtach don phróiseas, m.sh. le haghaidh liosta earráidí i bhfoirm, bain úsáid as an gcomhpháirt foláirimhin ionad tósta.

Tabhair faoi deara go gcaithfidh an réigiún beo a bheith i láthair sa mharcáil sula ndéantar an tósta a ghiniúint nó a nuashonrú. Má ghineann tú an dá cheann go dinimiciúil ag an am céanna agus má instealladh isteach sa leathanach iad, de ghnáth ní dhéanfaidh teicneolaíochtaí cúnta iad a fhógairt.

Ní mór duit freisin a oiriúnú roleagus aria-liveleibhéal ag brath ar an ábhar. Más teachtaireacht thábhachtach é mar earráid, úsáid role="alert" aria-live="assertive", nó bain úsáid as role="status" aria-live="polite"tréithe.

De réir mar a athraíonn an t-ábhar atá á thaispeáint agat, déan cinnte an t-am istigh a nuashonrú chun a chinntiú go mbíonn go leor delayama ag daoine an tósta a léamh.

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

Agus tú ag úsáid autohide: false, ní mór duit cnaipe gar a chur leis chun ligean d'úsáideoirí an tósta a dhíbhe.

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

Iompar javascript

Úsáid

Cuir tús le tósta trí JavaScript:

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

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-animation="".

Ainm Cineál Réamhshocrú Cur síos
beochan Boole fíor Cuir trasdul céimnithe CSS i bhfeidhm ar an tósta
uathfholú Boole fíor Auto cheilt ar an tósta
moill uimhir 500 Moill ar an tósta a chur i bhfolach (ms)

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

$().toast(options)

Ceanglaítear láimhseálaí tósta le bailiúchán eilimintí.

.toast('show')

Nochtann tósta eilimint. Filleann sé ar an té atá ag glaoch sula dtaispeántar an tósta (ie sula shown.bs.toastdtarlaíonn an teagmhas). Caithfidh tú an modh seo a ghlaoch de láimh, ina ionad sin ní thaispeánfar do thósta.

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

.toast('hide')

Folaigh tósta eiliminte. Filleann sé ar an té atá ag glaoch sula gcuirtear an tósta i bhfolach (ie sula hidden.bs.toastdtarlaíonn an t-imeacht). Caithfidh tú an modh seo a ghlaoch de láimh má rinne tú autohideé false.

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

.toast('dispose')

Folaigh tósta eiliminte. Fanfaidh do thósta ar an DOM ach ní thaispeánfar a thuilleadh é.

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

Imeachtaí

Cineál Imeachta Cur síos
taispeáin.bs.tósta Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
léirithe.bs.tósta Cuirtear an teagmhas seo ar ceal nuair a bhíonn an tósta infheicthe don úsáideoir.
folaigh.bs.tósta Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an hidemodh ásc glaoite.
i bhfolach.bs.tósta Cuirtear an teagmhas seo ar ceal nuair a bhíonn an tósta i bhfolach ón úsáideoir. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})