Toasts
Push kabar menyang pengunjung kanthi roti panggang, pesen tandha sing entheng lan gampang disesuaikan.
Toasts minangka kabar entheng sing dirancang kanggo niru kabar push sing wis dipopulerkan dening sistem operasi seluler lan desktop. Lagi dibangun karo flexbox, supaya padha gampang kanggo kempal lan posisi.
Ringkesan
Sing kudu dingerteni nalika nggunakake plugin roti panggang:
- Toasts dipilih amarga alasan kinerja, mula sampeyan kudu miwiti dhewe .
- Toasts bakal kanthi otomatis ndhelikake yen sampeyan ora nemtokake
autohide: false
.
prefers-reduced-motion
pitakon media. Deleng
bagean gerakan suda saka dokumentasi aksesibilitas kita .
Tuladha
dhasar
Kanggo kasurung roti panggang extensible lan katebak, disaranake header lan awak. Header roti panggang digunakake display: flex
, ngidini gampang nyelarasake isi amarga utilitas margin lan flexbox.
Toasts minangka fleksibel sing dibutuhake lan duwe markup sing dibutuhake. Paling ora, kita mbutuhake unsur siji kanggo ngemot isi "panggang" lan banget nyengkuyung tombol ngilangi.
<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>
.hide
kelas kanthi dinamis kanggo ndhelikake roti panggang (karo
display:none
, tinimbang mung karo
opacity:0
). Iki saiki ora perlu maneh. Nanging, kanggo kompatibilitas mundur, skrip kita bakal terus ngalih kelas kasebut (sanajan ora ana kabutuhan praktis) nganti versi utama sabanjure.
Tuladha urip
Klik tombol ing ngisor iki kanggo nuduhake roti panggang (dipanggonke karo keperluan kita ing pojok tengen ngisor) sing wis didhelikake minangka standar.
<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>
Kita nggunakake JavaScript ing ngisor iki kanggo micu demo roti panggang langsung:
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Tembus
Roti panggang rada tembus kanggo nyampur karo apa sing ana ing ngisor iki.
<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>
Numpuk
Sampeyan bisa numpuk roti panggang kanthi mbungkus ing wadhah roti panggang, sing bakal nambah spasi kanthi vertikal.
<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>
Konten khusus
Kustomisasi roti panggang kanthi mbusak subkomponen, ngapiki nganggo utilitas , utawa nambah markup sampeyan dhewe. Ing kene kita wis nggawe roti panggang sing luwih gampang kanthi mbusak standar .toast-header
, nambah lambang ndhelik khusus saka Ikon Bootstrap , lan nggunakake sawetara utilitas flexbox kanggo nyetel tata letak.
<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>
Utawa, sampeyan uga bisa nambah kontrol lan komponen tambahan kanggo roti panggang.
<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>
Skema warna
Mbangun conto ing ndhuwur, sampeyan bisa nggawe skema warna roti panggang sing beda karo utilitas warna lan latar mburi. Ing kene kita wis ditambahake .text-bg-primary
menyang .toast
, banjur ditambahake .btn-close-white
menyang tombol cedhak. Kanggo pinggiran asri, kita mbusak wates gawan karo .border-0
.
<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>
Panggonan
Selehake roti panggang nganggo CSS khusus sing dibutuhake. Ing sisih tengen ndhuwur asring digunakake kanggo kabar, kaya ing tengah ndhuwur. Yen sampeyan mung arep nuduhake roti panggang siji-sijine, pasang gaya posisi ing sisih tengen .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 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>
Kanggo sistem sing ngasilake luwih akeh kabar, coba gunakake unsur bungkus supaya bisa tumpukan kanthi gampang.
<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>
Sampeyan uga bisa seneng karo keperluan flexbox kanggo nyelarasake roti panggang kanthi horisontal lan / utawa vertikal.
<!-- 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>
Aksesibilitas
Toasts dimaksudake minangka gangguan cilik kanggo pengunjung utawa pangguna, mula kanggo mbantu wong sing maca layar lan teknologi bantuan sing padha, sampeyan kudu mbungkus roti panggang ing aria-live
wilayah . Owah-owahan ing wilayah urip (kayata nyuntikake/nganyarake komponen roti panggang) diumumake kanthi otomatis dening pembaca layar tanpa perlu mindhah fokus pangguna utawa ngganggu pangguna. Kajaba iku, kalebu aria-atomic="true"
kanggo mesthekake yen kabeh roti panggang tansah diumumake minangka unit tunggal (atom), tinimbang mung ngumumake apa sing diganti (sing bisa nyebabake masalah yen sampeyan mung nganyari bagean saka isi roti panggang, utawa yen nampilake isi roti panggang sing padha. ing wektu mengko). Yen informasi sing dibutuhake penting kanggo proses kasebut, contone kanggo dhaptar kesalahan ing wangun, banjur gunakake komponen tandhatinimbang roti panggang.
Elinga yen wilayah urip kudu ana ing markup sadurunge roti panggang digawe utawa dianyari. Yen sampeyan ngasilake kanthi dinamis ing wektu sing padha lan nyuntikake menyang kaca, umume ora bakal diumumake dening teknologi bantu.
Sampeyan uga kudu ngganti role
lan aria-live
tingkat gumantung isi. Yen pesen penting kaya kesalahan, gunakake role="alert" aria-live="assertive"
, utawa gunakake role="status" aria-live="polite"
atribut.
Nalika konten sing sampeyan tampilake owah-owahan, priksa manawa sampeyan nganyari delay
wektu entek supaya pangguna duwe wektu sing cukup kanggo maca roti panggang.
<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>
Nalika nggunakake autohide: false
, sampeyan kudu nambah tombol cedhak kanggo ngidini pangguna ngilangi roti panggang.
<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>
Nalika sacara teknis bisa nambah kontrol sing bisa fokus/bisa ditindakake (kayata tombol utawa tautan tambahan) ing roti panggang, sampeyan kudu ngindhari iki kanggo ndhelikake roti panggang otomatis. Malah yen sampeyan menehi roti panggang delay
wektu entek dawa , keyboard lan teknologi assistive pangguna bisa nemokake angel kanggo nggayuh roti panggang ing wektu kanggo njupuk tindakan (amarga roti panggang ora nampa fokus nalika ditampilake). Yen sampeyan pancen kudu duwe kontrol luwih, disaranake nggunakake roti panggang karo autohide: false
.
CSS
Variabel
Ditambahake ing v5.2.0Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, roti panggang saiki nggunakake variabel CSS lokal .toast
kanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.
--#{$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};
Variabel 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);
Panggunaan
Miwiti roti panggang liwat JavaScript:
const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
Pemicu
Pembubaran bisa digayuh kanthi data
atribut ing tombol ing roti panggang kaya sing dituduhake ing ngisor iki:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
utawa ing tombol ing njaba roti panggang nggunakake data-bs-target
kaya sing dituduhake ing ngisor iki:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Pilihan
Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-
, kaya ing data-bs-animation="{value}"
. Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"
tinimbang data-bs-customClass="beautifier"
.
Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config
sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'
lan data-bs-title="456"
atribut, title
nilai pungkasan bakal 456
lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config
. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'
.
jeneng | Jinis | Default | Katrangan |
---|---|---|---|
animation |
boolean | true |
Gunakake transisi fade CSS menyang roti panggang. |
autohide |
boolean | true |
Kanthi otomatis ndhelikake roti panggang sawise wektu tundha. |
delay |
nomer | 5000 |
Tundha ing milliseconds sadurunge ndhelikake roti panggang. |
Metode
Cara lan transisi asinkron
Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .
Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .
Metode | Katrangan |
---|---|
dispose |
Ndhelikake roti panggang unsur. Roti panggang sampeyan bakal tetep ana ing DOM nanging ora bakal ditampilake maneh. |
getInstance |
Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM. Contone: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Ngasilake conto roti panggang Bootstrap. |
getOrCreateInstance |
Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar, yen ora diwiwiti. const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Ngasilake conto roti panggang Bootstrap. |
hide |
Ndhelikake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang bener-bener didhelikake (yaiku sadurunge hidden.bs.toast acara kasebut kedadeyan). Sampeyan kudu nelpon cara iki kanthi manual yen sampeyan nggawe autohide .false |
isShown |
Ngasilake boolean miturut status visibilitas roti panggang. |
show |
Nuduhake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang wis bener ditampilake (yaiku sadurunge shown.bs.toast acara dumadi). Sampeyan kudu nelpon cara iki kanthi manual, tinimbang roti panggang sampeyan ora bakal ditampilake. |
Acara
Acara | Katrangan |
---|---|
hide.bs.toast |
Acara iki langsung dipecat nalika hide metode conto wis diarani. |
hidden.bs.toast |
Acara iki dipecat nalika roti panggang wis rampung didhelikake saka pangguna. |
show.bs.toast |
Acara iki langsung murub nalika show metode conto diarani. |
shown.bs.toast |
Acara iki dipecat nalika roti panggang wis katon kanggo pangguna. |
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
// do something...
})