Tositiw bɛ kɛ
Aw bɛ kunnafoniw gɛlɛya aw ka taamakɛlaw ma ni tositi ye, lasɔmini cikan min ka nɔgɔn ani min bɛ se ka ladilan nɔgɔya la.
Tositiw ye kunnafoni nɔgɔmanw ye minnu dilannen don walasa ka push kunnafoniw ladege minnu kɛra fɛn ye min diyara mobili ni tabali baarakɛminɛnw ye. U bɛ jɔ ni flexbox ye, o la u labɛncogo n’u jɔyɔrɔ ka nɔgɔn.
Kuma bɛɛ lajɛlen
Fɛn minnu ka kan ka dɔn ni i bɛ baara kɛ ni tositi plugin ye:
- N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiya
util.js
. - Tositiw ye opt-in ye baarakɛcogo kunw kosɔn, o la aw yɛrɛ ka kan k’u daminɛ .
- Aw k’a kɔlɔsi ko aw de ka baara ye ka tobilikɛminɛnw bila yɔrɔ la.
- Tositiw bɛna dogo u yɛrɛma ni aw ma a jira
autohide: false
.
prefers-reduced-motion
media ɲininkali de la. aw ye
an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .
Misaliw
Kunfɔlɔ
Walasa ka dusu don tobilikɛminɛnw kɔnɔ minnu bɛ se ka bonya ani minnu bɛ se ka fɔ ka ɲɛ, an bɛ kuncɛ ni farikolo dɔ laadi. Toast headers use display: flex
, min bɛ sira Di kɔnɔkow labɛncogo nɔgɔman ma k’a sababu Kɛ an ka margin ni flexbox nafalanw ye.
Tositiw bɛ se ka wuli ka bɔ u nɔ na i n’a fɔ i mago bɛ cogo min na ani u ka taamasiyɛn wajibiyalenw ka dɔgɔ kosɛbɛ. A dɔgɔyalenba la, an bɛ fɛn kelen de wajibiya walasa k’i ka “tositi” kɔnɔkow mara ani ka dusu don kosɛbɛ ka bɔ baara la.
<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>
Ka balo
Butɔn digi min bɛ duguma walasa ka tositi dɔ jira (min sigilen bɛ ni an ka nafamafɛnw ye duguma kininbolo fɛ) min dogolen bɛ ka daminɛ ni .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>
Translucent ye
Tositiw bɛ yeelen bɔ dɔɔni walasa ka u fara ɲɔgɔn kan ni min bɛ u jukɔrɔ.
<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>
Stacking (Sɔrɔdasi).
Ni tositi caman b’i bolo, an bɛ default (default) k’u stacking vertically (jɛrɛnkɛrɛnnenya la) cogo la min bɛ se ka kalan.
<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>
Yɔrɔ bilali
Aw bɛ tositiw bila ni CSS ladamulen ye i n’a fɔ aw mago bɛ u la cogo min na. Sanfɛ kininbolo bɛ kɛ tuma caman na kunnafoniw kama, i n’a fɔ sanfɛla cɛmancɛ. Ni aw bɛna tositi kelen dɔrɔn jira don dɔ la a waati kelen na, aw bɛ jɔyɔrɔfacogow bila .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>
Sitimɛw kama minnu bɛ kunnafoni caman dilan, aw bɛ aw hakili to baara kɛli la ni fɛn dɔ ye min bɛ kɛ ka fɛnw siri walasa u ka se ka ɲɔgɔn lajɛ nɔgɔya la.
<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>
Aw bɛ se fana ka fansi sɔrɔ ni flexbox utilités ye walasa ka tositiw labɛn ka ɲɛ ani/walima cogo tilennen na.
<!-- 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>
Seko ni dɔnko
Tositiw dabɔra ka kɛ tigɛda misɛnninw ye i ka taamakɛlaw walima i ka baarakɛlaw fɛ, o la walasa ka mɔgɔ minnu dɛmɛ ni ɛkran kalanbagaw ye ani o ɲɔgɔnna dɛmɛnanw, aw ka kan k’aw ka tositiw siri aria-live
mara dɔ kɔnɔ . Yɛlɛma minnu bɛ kɛ mara ɲɛnamaw la (i n’a fɔ tositi yɔrɔ dɔ pikiri/k’a ladamuni) bɛ laseli kɛ u yɛrɛma ɛkran kalanbagaw fɛ k’a sɔrɔ u ma kɛ wajibi ye ka baarakɛla ka ɲɛmajɔli lamaga walima ka baarakɛla tigɛ cogo wɛrɛ la. Ka fara o kan, aw bɛ a fara a kan aria-atomic="true"
walasa ka a jira ko tositi bɛɛ bɛ laseli kɛ tuma bɛɛ i n’a fɔ yɔrɔ kelen (atomiki), sanni aw ka fɛn min Changé (o bɛ se ka na ni gɛlɛyaw ye ni aw ye tositi kɔnɔfɛn yɔrɔ dɔ dɔrɔn de kuraya, walima ni aw bɛ tositi kɔnɔfɛn kelen jira waati wɛrɛ la). Ni kunnafoni minnu ka kan ka kɛ, olu nafa ka bon baarakɛcogo la, misali la, filiw lisɛli sɛbɛn dɔ kɔnɔ, o tuma na, baara kɛ ni lasɔmini yɔrɔ yetositi nɔ na.
A kɔlɔsi ko mara ɲɛnama ka kan ka kɛ taamasiyɛn na sani tositi ka dilan walima ka a kuraya. N'i ye u fla bɛɛ Lawuli ni fanga ye waati kelen na k'u pikiri ɲɛ kan, a ka c'a la, u tɛna Laseli dɛmɛ-fɛɛrɛw fɛ.
Aw ka kan fana ka ladilan role
ani aria-live
nivo ka kɛɲɛ ni kɔnɔkow ye. Ni cikan nafama don i n’a fɔ fili, baara kɛ ni role="alert" aria-live="assertive"
, n’o tɛ baara kɛ ni role="status" aria-live="polite"
fɛnw ye.
Ni i bɛ kunnafoni minnu jira, olu bɛ Changé, i janto ka delay
waati dafalen kuraya walasa baarakɛlaw ka waati bɛrɛ sɔrɔ ka tositi kalan.
<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>
Ni aw bɛ baara kɛ ni autohide: false
, aw ka kan ka butɔni dɔ fara a kan walasa baarakɛlaw ka se ka tobilikɛminɛn bila.
<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>
Hali ni fɛɛrɛko siratigɛ la, a bɛ se ka kɛ ka kunnafoni dɔw fara a kan minnu bɛ se ka sinsin/wale kɛ (i n’a fɔ butɔni wɛrɛw walima jɛgɛnsira wɛrɛw) i ka tobilikɛminɛnw na, aw ka kan k’aw yɛrɛ tanga o kɛli ma tobilikɛminɛnw dogolenw na. Hali n’i ye waati jan di tositi ma delay
, klaviyeti ni dɛmɛnanw baarakɛlaw bɛ se ka gɛlɛya sɔrɔ ka se tositi ma waati kɔnɔ walasa ka fɛɛrɛ tigɛ (k’a masɔrɔ tobilikɛminɛnw tɛ fosi sɔrɔ n’u jirala). Ni aw ka kan ka kunnafoni wɛrɛw sɔrɔ tigitigi, an bɛ a fɔ aw ye ko aw ka tositi kɛ ni autohide: false
.
JavaScript kɛcogo
Baarakɛcogo
Tositiw daminɛni JavaScript fɛ:
$('.toast').toast(option)
Sugandili minnu bɛ kɛ
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-
, i n’a fɔ a bɛ cogo min na data-animation=""
.
Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
---|---|---|---|
animation (ɲɛnamaya kɛcogo ɲuman). | boolean ye | sɛbɛ | Aw bɛ CSS fade transition dɔ kɛ toast kan |
autohide ye | boolean ye | sɛbɛ | Auto ka tositi dogo |
ka mɛ | nimɔrɔ | 500 |
Tositi dogo waati latɛmɛni (ms) . |
Fɛɛrɛw
Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli
API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .
aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .
$().toast(options)
A bɛ tositi minɛbaga dɔ siri fɛnw lajɛlen dɔ la.
.toast('show')
A bɛ element dɔ ka tositi jira. A bɛ segin welebaga ma sani tobili ka jira tiɲɛ na (o kɔrɔ ye ko sani shown.bs.toast
ko ka kɛ). Aw ka kan ka nin fɛɛrɛ in wele ni bolo ye, o nɔ na aw ka tositi tɛna jira.
$('#element').toast('show')
.toast('hide')
A bɛ element dɔ ka tositi dogo. A bɛ segin welebaga ma sani tobili ka dogo tiɲɛ na (o kɔrɔ ye ko sani hidden.bs.toast
ko ka kɛ). Aw ka kan ka nin fɛɛrɛ in wele ni bolo ye ni aw ye a kɛ autohide
ka false
.
$('#element').toast('hide')
.toast('dispose')
A bɛ element dɔ ka tositi dogo. Aw ka tositi bɛna to DOM kan nka a tɛna jira tugun.
$('#element').toast('dispose')
Ko minnu kɛra
Ko kɛlen suguya | Cogojirali |
---|---|
jira.bs.tositi | O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni show misali fɛɛrɛ Weelela. |
jiralen.bs.tositi | O ko in bɛ Fɔ ni tobilikɛminɛn in Kɛra baarakɛla ye min bɛ Ye. |
dogo.bs.tositi | O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hide misali fɛɛrɛ Weelera. |
dogolen.bs.tositi | O ko in bɛ Fɔ ni tobilikɛminɛn dogolen Dònna baarakɛla la. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})