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.

html

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

Roimhe seo, chuir ár gcuid scripteanna leis an .hiderang go dinimiciúil chun tósta a cheilt go hiomlán (le display:none, seachas díreach le opacity:0). Níl sé seo riachtanach a thuilleadh. Ar mhaithe le comhoiriúnacht siar, áfach, leanfaidh ár script ag scoránú an ranga (cé nach bhfuil aon ghá praiticiúil leis) go dtí an chéad mhórleagan eile.

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

Hello, world! This is a toast message.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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>

Bainimid úsáid as an JavaScript seo a leanas chun ár dtaispeántas beo tósta a spreagadh:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

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.

html

<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ína timfhilleadh 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

html

<div class="toast-container position-static">
  <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.

html

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

html

<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 .text-bg-primaryleis 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.

html

<div class="toast align-items-center text-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 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.

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

html

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

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

html

<!-- 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, bain úsáid as 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 dúnta a chur leis chun ligean d'úsáideoirí an tósta a dhíbhe.

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

html

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

CSS

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann tóstaí athróga áitiúla CSS anois .toastchun saincheaptha feabhsaithe fíor-ama a dhéanamh. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Athróga Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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($black, .05);

Úsáid

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Truicear

Is féidir dífhostú a bhaint amach leis an datatréith ar chnaipe laistigh den toast mar a léirítear thíos:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

nó ar chnaipe lasmuigh den tósta ag baint úsáide as an data-bs-targetméid a léirítear thíos:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

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`	Cuir an tósta i bhfolach go huathoibríoch tar éis na moille.
`delay`	uimhir	`5000`	Moill sna milleasoicindí sula gcuirtear an tósta i bhfolach.

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 .

Modh	Cur síos
`dispose`	Folaigh tósta eiliminte. Fanfaidh do thósta ar an DOM ach ní thaispeánfar a thuilleadh é.
`getInstance`	Modh statach a cheadaíonn duit an tósta a bhaineann le heilimint DOM a fháil. Mar shampla: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Filltear sampla tósta Bootstrap.
`getOrCreateInstance`	Modh statach a cheadaíonn duit an sampla tósta a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú, ar eagla nach gcuirfí tús leis. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Seoltar sampla tósta Bootstrap ar ais.
`hide`	Folaigh tósta eiliminte. Filleann sé ar an nglaoiteoir sula gcuirtear an tósta i bhfolach (.i. sula `hidden.bs.toast`dtarlaíonn an teagmhas). Caithfidh tú an modh seo a ghlaoch de láimh má rinne tú `autohide`é `false`.
`isShown`	Filleann sé boolean de réir staid infheictheachta an tósta.
`show`	Nochtann tósta eilimint. Filleann sé ar an té atá ag glaoch sula dtaispeántar an tósta (ie sula `shown.bs.toast`dtarlaíonn an teagmhas). Caithfidh tú an modh seo a ghlaoch de láimh, ina ionad sin ní thaispeánfar do thósta.

Imeachtaí

Imeacht	Cur síos
`hide.bs.toast`	Cuirtear an teagmhas seo ar ceal láithreach nuair `hide`a ghlaoitear an modh ásc.
`hidden.bs.toast`	Cuirtear an teagmhas seo ar ceal nuair a bhíonn an tósta i bhfolach ón úsáideoir.
`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.

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