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 .
• Beidh tósta i bhfolach go huathoibríoch mura sonraíonn tú autohide: false.

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 a dhí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 le backdrop-filterhairíonna 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 toasts agat, ní mór dúinn iad a chruachadh go hingearach ar bhealach inléite.

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

<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 bheith ann 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="".

Modhanna

$().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í

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