Tósta

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

Ar an leathanach seo

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:

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.

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 a dhíbhe.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Beo

Cliceáil ar an gcnaipe thíos chun tósta a thaispeáint (suite lenár bhfóntais sa chúinne íochtarach ar dheis) atá curtha i bhfolach de réir réamhshocraithe le .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Tréshoilseach

Tá tósta beagáinín tréshoilseach le cumasc isteach lena bhfuil thíos leo.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Cruachta

Is féidir leat tóstaí a chruachadh trí iad a fhilleadh i gcoimeádán tósta, rud a chuirfidh roinnt spásáil go hingearach leis.

Féach? Díreach mar seo.

Cinn suas, beidh tósta cruachta go huathoibríoch

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Ábhar saincheaptha

Déan do chuid tósta a shaincheapadh trí fho-chomhpháirteanna a bhaint, iad a úsáid le fóntais , nó trí do mharcáil féin a chur leis. Anseo tá tósta níos simplí cruthaithe againn tríd an réamhshocrú a bhaint .toast-header, deilbhín seithí saincheaptha a chur leis ó Bootstrap Icons , agus úsáid a bhaint as roinnt fóntais flexbox chun an leagan amach a choigeartú.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Nó, is féidir leat rialuithe agus comhpháirteanna breise a chur le tósta.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Scéimeanna datha

Ag tógáil ar an sampla thuas, is féidir leat scéimeanna datha tósta éagsúla a chruthú lenár bhfóntais datha agus chúlra . Anseo táimid tar éis cur leis .bg-primaryagus .text-whiteleis an .toast, agus ansin curtha .btn-close-whitelenár gcnaipe dúnta. Le haghaidh imeall briosc, bainimid an teorainn réamhshocraithe le .border-0.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </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.

Féach? Díreach mar seo.

Cinn suas, beidh tósta cruachta go huathoibríoch

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 díreach a fhógairt cad a athraíodh (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 agat 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, cinntigh an t-am istigh a nuashonrú ionas go mbeidh go leor delayama ag úsáideoirí an tósta a léamh.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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.

Dia duit, domhan! Is teachtaireacht tósta é seo.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Cé gur féidir, go teicniúil, rialtáin infhócasaithe/inghníomhaithe (cosúil le cnaipí nó naisc bhreise) a chur le do thósta, ba cheart duit é seo a sheachaint chun tósta a chur i bhfolach. Fiú má thugann tú delayteorainn ama fada don tósta , d’fhéadfadh sé go mbeadh sé deacair ar úsáideoirí méarchláir agus ar theicneolaíocht chúnta an tósta a bhaint amach in am chun beart a dhéanamh (toisc nach bhfaigheann tóstaí fócas nuair a thaispeánfar iad). Más fíor go gcaithfidh tú rialuithe breise a bheith agat, molaimid tósta a úsáid le autohide: false.

Sass

Athróga

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

Úsáid

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, 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-bs-, mar atá i data-bs-animation="".

Ainm	Cineál	Réamhshocrú	Cur síos
`animation`	Boole	`true`	Cuir trasdul céimnithe CSS i bhfeidhm ar an tósta
`autohide`	Boole	`true`	Auto cheilt ar an tósta
`delay`	uimhir	`5000`	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 chomh luath agus 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 .

seó

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.

toast.show()

ceilt

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

toast.hide()

a dhiúscairt

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

toast.dispose()

faighInstance

Modh statach a ligeann duit an ásc scrollspy a bhaineann le heilimint DOM a fháil

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Modh statach a cheadaíonn duit an t-ásc scrollspy a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nach bhfuil sé inisealaithe

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Imeachtaí

Cineál imeachta	Cur síos
`show.bs.toast`	Téann an teagmhas seo chun solais láithreach nuair `show`a ghlaoitear an modh ásc.
`shown.bs.toast`	Cuirtear an teagmhas seo ar ceal nuair a bhíonn an tósta infheicthe don úsáideoir.
`hide.bs.toast`	Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an `hide`modh ásc glaoite.
`hidden.bs.toast`	Cuirtear an teagmhas seo ar ceal nuair a bhíonn an tósta i bhfolach ón úsáideoir.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})