Tosts
Gwthiwch hysbysiadau i'ch ymwelwyr gyda llwncdestun, neges rybuddio ysgafn y gellir ei haddasu'n hawdd.
Mae tosts yn hysbysiadau ysgafn sydd wedi'u cynllunio i ddynwared yr hysbysiadau gwthio sydd wedi'u poblogeiddio gan systemau gweithredu symudol a bwrdd gwaith. Maent wedi'u hadeiladu gyda flexbox, felly maent yn hawdd eu halinio a'u lleoli.
Trosolwg
Pethau i'w gwybod wrth ddefnyddio'r ategyn tost:
- Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angen
util.js
. - Mae tost yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
- Sylwch mai chi sy'n gyfrifol am leoli llwncdestun.
- Bydd toasts yn cuddio'n awtomatig os nad ydych yn nodi
autohide: false
.
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Enghreifftiau
Syml
Er mwyn annog tostau estynadwy a rhagweladwy, rydym yn argymell pennawd a chorff. Mae penawdau tost yn defnyddio display: flex
, gan ganiatáu aliniad hawdd o gynnwys diolch i'n cyfleustodau ymyl a flexbox.
Mae tostau mor hyblyg ag sydd eu hangen arnoch ac ychydig iawn o farcio gofynnol sydd ganddynt. O leiaf, mae angen un elfen i gynnwys eich cynnwys “wedi'i dostio” ac rydym yn annog yn gryf botwm diswyddo.
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Byw
Cliciwch y botwm isod i ddangos tost (wedi'i leoli gyda'n cyfleustodau yn y gornel dde isaf) sydd wedi'i guddio yn ddiofyn gyda .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Tryleu
Mae tost ychydig yn dryloyw i gyd-fynd â'r hyn sydd oddi tanynt.
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Pentyrru
Pan fydd gennych nifer o dost, rydym yn rhagosod i'w pentyrru'n fertigol mewn modd darllenadwy.
<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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
Lleoliad
Rhowch dostau gyda CSS personol yn ôl yr angen. Defnyddir y dde uchaf yn aml ar gyfer hysbysiadau, fel y mae'r canol uchaf. Os mai dim ond un llwncdestun y byddwch chi'n ei ddangos ar y tro, rhowch yr arddulliau lleoli yn gywir ar y .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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Ar gyfer systemau sy'n cynhyrchu mwy o hysbysiadau, ystyriwch ddefnyddio elfen lapio fel y gallant bentyrru'n hawdd.
<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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
Gallwch hefyd ddod yn ffansi gyda chyfleustodau flexbox i alinio tostau yn llorweddol a / neu'n fertigol.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
Hygyrchedd
Bwriedir i dostau fod yn ymyriadau bach i’ch ymwelwyr neu ddefnyddwyr, felly i helpu’r rhai sydd â darllenwyr sgrin a thechnolegau cynorthwyol tebyg, dylech lapio’ch llwncdestun mewn aria-live
rhanbarth . Mae newidiadau i ranbarthau byw (fel chwistrellu/diweddaru cydran tost) yn cael eu cyhoeddi'n awtomatig gan ddarllenwyr sgrin heb fod angen symud ffocws y defnyddiwr neu dorri ar draws y defnyddiwr fel arall. Yn ogystal, cynhwyswch aria-atomic="true"
er mwyn sicrhau bod y tost cyfan bob amser yn cael ei gyhoeddi fel un uned (atomig), yn hytrach na dim ond cyhoeddi'r hyn a newidiwyd (a allai arwain at broblemau os mai dim ond rhan o gynnwys y tost rydych chi'n ei ddiweddaru, neu os ydych chi'n arddangos yr un cynnwys tost yn nes ymlaen). Os yw'r wybodaeth sydd ei hangen yn bwysig ar gyfer y broses, ee ar gyfer rhestr o wallau ar ffurf, yna defnyddiwch y gydran rhybuddioyn lle tost.
Sylwch fod angen i'r rhanbarth byw fod yn bresennol yn y marcio cyn i'r tost gael ei gynhyrchu neu ei ddiweddaru. Os ydych chi'n cynhyrchu'r ddau yn ddeinamig ar yr un pryd ac yn eu chwistrellu i'r dudalen, yn gyffredinol ni fyddant yn cael eu cyhoeddi gan dechnolegau cynorthwyol.
Mae angen i chi hefyd addasu'r lefel role
a'r aria-live
lefel yn dibynnu ar y cynnwys. Os yw'n neges bwysig fel gwall, defnyddiwch role="alert" aria-live="assertive"
, fel arall defnyddiwch role="status" aria-live="polite"
briodoleddau.
Wrth i'r cynnwys rydych chi'n ei arddangos newid, gwnewch yn siŵr eich bod chi'n diweddaru'r delay
terfyn amser fel bod gan ddefnyddwyr ddigon o amser i ddarllen y tost.
<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>
Wrth ddefnyddio autohide: false
, rhaid i chi ychwanegu botwm cau i ganiatáu i ddefnyddwyr ddiystyru'r tost.
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Er ei bod yn dechnegol yn bosibl ychwanegu rheolyddion ffocws/gweithredu (fel botymau neu ddolenni ychwanegol) yn eich tost, dylech osgoi gwneud hyn ar gyfer cuddio tost yn awtomatig. Hyd yn oed os byddwch yn rhoi seibiant hir i'r delay
llwncdestun , efallai y bydd defnyddwyr bysellfwrdd a thechnoleg gynorthwyol yn ei chael hi'n anodd cyrraedd y llwncdestun mewn pryd i weithredu (gan nad yw llwncdestun yn cael ffocws pan gânt eu harddangos). Os oes rhaid i chi gael rheolyddion pellach, rydym yn argymell defnyddio tost gyda autohide: false
.
Ymddygiad JavaScript
Defnydd
Cychwyn llwncdestun trwy JavaScript:
$('.toast').toast(option)
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-animation=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | Cymhwyso trawsnewidiad pylu CSS i'r tost |
cuddio yn awtomatig | boolaidd | gwir | Cuddiwch y tost yn awtomatig |
oedi | rhif | 500 |
Oedi cuddio'r tost (ms) |
Dulliau
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
$().toast(options)
Yn cysylltu triniwr tost wrth gasgliad elfennau.
.toast('show')
Yn datgelu llwncdestun elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei ddangos (hy cyn i'r shown.bs.toast
digwyddiad ddigwydd). Mae'n rhaid i chi alw'r dull hwn â llaw, yn lle hynny ni fydd eich tost yn dangos.
$('#element').toast('show')
.toast('hide')
Yn cuddio tost elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei guddio (hy cyn i'r hidden.bs.toast
digwyddiad ddigwydd). Mae'n rhaid i chi ffonio'r dull hwn â llaw os gwnaethoch wneud autohide
hynny false
.
$('#element').toast('hide')
.toast('dispose')
Yn cuddio tost elfen. Bydd eich tost yn aros ar y DOM ond ni fydd yn dangos mwyach.
$('#element').toast('dispose')
Digwyddiadau
Math o Ddigwyddiad | Disgrifiad |
---|---|
dangos.bs.tost | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
dangos.bs.tost | Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi'i wneud yn weladwy i'r defnyddiwr. |
tost.bs | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
tost.bs. cudd | Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi gorffen cael ei guddio rhag y defnyddiwr. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})