Toasts
Titari awọn iwifunni si awọn alejo rẹ pẹlu tositi kan, iwuwo fẹẹrẹ ati ifiranṣẹ itaniji asefara ni irọrun.
Toasts jẹ awọn iwifunni iwuwo fẹẹrẹ ti a ṣe apẹrẹ lati ṣe afiwe awọn iwifunni titari ti o jẹ olokiki nipasẹ alagbeka ati awọn ọna ṣiṣe tabili tabili. Wọn ṣe pẹlu flexbox, nitorinaa wọn rọrun lati ṣe deede ati ipo.
Akopọ
Awọn nkan lati mọ nigba lilo ohun itanna tositi:
- Toasts ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
- Toasts yoo tọju laifọwọyi ti o ko ba ṣe pato
autohide: false
.
prefers-reduced-motion
ibeere media. Wo
apakan išipopada ti o dinku ti iwe iraye si wa .
Awọn apẹẹrẹ
Ipilẹṣẹ
Lati ṣe iwuri fun awọn tositi ti o ṣee ṣe ati asọtẹlẹ, a ṣeduro akọsori ati ara. Awọn akọsori tositi lo display: flex
, gbigba titete akoonu irọrun o ṣeun si ala wa ati awọn ohun elo flexbox.
Toasts jẹ irọrun bi o ṣe nilo ati pe wọn ni isamisi ti o nilo pupọ. Ni o kere ju, a nilo ipin kan lati ni akoonu “toasted” rẹ ninu ati ṣe iwuri fun bọtini ikọsilẹ.
<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>
Gbe
Tẹ bọtini ti o wa ni isalẹ lati ṣafihan tositi kan (ti o wa pẹlu awọn ohun elo wa ni igun apa ọtun isalẹ) ti o ti farapamọ nipasẹ aiyipada pẹlu .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>
Translucent
Toasts jẹ translucent die-die lati dapọ mọ ohun ti o wa ni isalẹ wọn.
<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>
Iṣakojọpọ
O le tositi tositi nipa yiyi wọn sinu apo eiyan tositi, eyiti yoo ṣafikun aye ni inaro.
<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>
Aṣa akoonu
Ṣe akanṣe awọn tositi rẹ nipa yiyọkuro awọn ẹya-ara, tweaking wọn pẹlu awọn ohun elo , tabi nipa fifi aami si tirẹ kun. Nibi a ti ṣẹda tositi ti o rọrun nipa yiyọkuro aiyipada .toast-header
, fifi aami aami pamọ aṣa lati Awọn aami Bootstrap , ati lilo diẹ ninu awọn ohun elo flexbox lati ṣatunṣe ifilelẹ naa.
<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>
Ni omiiran, o tun le ṣafikun awọn idari afikun ati awọn paati si awọn tositi.
<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>
Awọn eto awọ
Ilé lori apẹẹrẹ ti o wa loke, o le ṣẹda awọn ero awọ tositi oriṣiriṣi pẹlu awọ wa ati awọn ohun elo abẹlẹ . Nibi a ti ṣafikun .bg-primary
ati .text-white
si .toast
, ati lẹhinna ṣafikun .btn-close-white
si bọtini isunmọ wa. Fun eti agaran, a yọ aala aiyipada kuro pẹlu .border-0
.
<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>
Ipo
Gbe tositi pẹlu aṣa CSS bi o ṣe nilo wọn. Oke apa ọtun ni igbagbogbo lo fun awọn iwifunni, bii aarin oke. Ti o ba n lọ lati ṣafihan tositi kan ni akoko kan, fi awọn ara ipo si ọtun lori faili .toast
.
<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>
Fun awọn ọna ṣiṣe ti o ṣe agbejade awọn iwifunni diẹ sii, ronu nipa lilo ohun mimu ki wọn le ni irọrun akopọ.
<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>
O tun le ni igbadun pẹlu awọn ohun elo flexbox lati ṣe deede awọn tositi ni ita ati/tabi ni inaro.
<!-- 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>
Wiwọle
Awọn tositi jẹ ipinnu lati jẹ awọn idilọwọ kekere si awọn alejo tabi awọn olumulo rẹ, nitorinaa lati ṣe iranlọwọ fun awọn ti o ni awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra, o yẹ ki o fi ipari si awọn tositi rẹ ni aria-live
agbegbe kan . Awọn iyipada si awọn agbegbe laaye (gẹgẹbi abẹrẹ/imudojuiwọn paati tositi) jẹ ikede laifọwọyi nipasẹ awọn oluka iboju laisi nilo lati gbe idojukọ olumulo tabi bibẹẹkọ da olumulo duro. Ni afikun, pẹlu aria-atomic="true"
lati rii daju pe gbogbo tositi nigbagbogbo ni a kede bi ẹyọkan (atomu) kan, kuku ki o kan kede ohun ti o yipada (eyiti o le ja si awọn iṣoro ti o ba ṣe imudojuiwọn apakan ti akoonu tositi nikan, tabi ti o ba ṣafihan akoonu tositi kanna. ni akoko kan nigbamii). Ti alaye ti o nilo ba ṣe pataki fun ilana naa, fun apẹẹrẹ fun atokọ awọn aṣiṣe ni fọọmu kan, lẹhinna lo paati gbigbọndipo tositi.
Ṣe akiyesi pe agbegbe laaye nilo lati wa ni isamisi ṣaaju ki tositi ti ipilẹṣẹ tabi imudojuiwọn. Ti o ba ṣe ipilẹṣẹ awọn mejeeji ni akoko kanna ti o fi wọn si oju-iwe naa, wọn kii yoo kede ni gbogbogbo nipasẹ awọn imọ-ẹrọ iranlọwọ.
O tun nilo lati ṣatunṣe role
ati aria-live
ipele ti o da lori akoonu naa. Ti o ba jẹ ifiranṣẹ pataki bi aṣiṣe, lo role="alert" aria-live="assertive"
, bibẹẹkọ lo role="status" aria-live="polite"
awọn abuda.
Bi akoonu ti o n ṣafihan ṣe yipada, rii daju lati ṣe imudojuiwọn delay
akoko ipari ki awọn olumulo ni akoko ti o to lati ka tositi naa.
<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>
Nigbati o ba nlo autohide: false
, o gbọdọ ṣafikun bọtini isunmọ lati gba awọn olumulo laaye lati yọ tositi naa kuro.
<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>
Lakoko ti imọ-ẹrọ o ṣee ṣe lati ṣafikun awọn iṣakoso idojukọ / iṣẹ ṣiṣe (gẹgẹbi awọn bọtini afikun tabi awọn ọna asopọ) ninu tositi rẹ, o yẹ ki o yago fun ṣiṣe eyi fun awọn tositi adaṣe adaṣe. Paapaa ti o ba fun tositi naa ni delay
akoko pipẹ , keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ le rii i nira lati de tositi ni akoko lati ṣe iṣe (niwọn bi awọn tositi ko gba idojukọ nigbati wọn ba han). Ti o ba Egba gbọdọ ni awọn idari siwaju, a ṣeduro lilo tositi pẹlu autohide: false
.
Sass
Awọn oniyipada
$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);
Lilo
Bẹrẹ awọn toasts nipasẹ JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-
, bi ninu data-bs-animation=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
animation |
boolian | true |
Waye iyipada CSS ipare si tositi |
autohide |
boolian | true |
Laifọwọyi tọju tositi naa |
delay |
nọmba | 5000 |
Idaduro fifipamọ tositi (ms) |
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
ifihan
Fi han ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti han gangan (ie ṣaaju ki shown.bs.toast
iṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ, dipo tositi rẹ kii yoo han.
toast.show()
tọju
hides ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti farapamọ gangan (ie ṣaaju ki hidden.bs.toast
iṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ ti o ba ṣe autohide
si false
.
toast.hide()
sọnù
hides ohun ano ká tositi. Tositi rẹ yoo wa lori DOM ṣugbọn kii yoo ṣafihan mọ.
toast.dispose()
gbaInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ scrollspy ti o ni nkan ṣe pẹlu nkan DOM kan
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
gbaOrCreateInstance
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ scrollspy ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti o ko ba ṣe ipilẹṣẹ
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Awọn iṣẹlẹ
Iru iṣẹlẹ | Apejuwe |
---|---|
show.bs.toast |
Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
shown.bs.toast |
Iṣẹlẹ yii jẹ ina nigbati tositi ti jẹ ki o han si olumulo. |
hide.bs.toast |
Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
hidden.bs.toast |
Iṣẹlẹ yii jẹ ina nigbati tositi ti pari ni pamọ lati ọdọ olumulo. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})