Тосты
Націскныя апавяшчэнні для вашых наведвальнікаў з тостам, лёгкім і лёгка наладжвальным папярэджаннем.
Тосты - гэта лёгкія апавяшчэнні, створаныя для імітацыі push-апавяшчэнняў, якія папулярызавалі мабільныя і настольныя аперацыйныя сістэмы. Яны створаны з дапамогай flexbox, таму іх лёгка выраўнаваць і размясціць.
Агляд
Што трэба ведаць пры выкарыстанні плагіна toast:
- Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуецца
util.js
. - Тосты падключаюцца з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
- Звярніце ўвагу, што вы адказваеце за размяшчэнне тостаў.
- Тосты будуць аўтаматычна схаваны, калі вы не ўкажаце
autohide: false
.
Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motion
медыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .
Прыклады
Базавы
Каб стымуляваць пашыраемыя і прадказальныя тосты, мы рэкамендуем загаловак і тэкст. У загалоўках Toast выкарыстоўваецца display: flex
, што дазваляе лёгка выраўноўваць кантэнт дзякуючы нашым утылітам margin і flexbox.
Тосты настолькі гнуткія, наколькі вам трэба, і маюць вельмі невялікую патрабаваную разметку. Як мінімум, мы патрабуем, каб ваш «падсмажаны» кантэнт утрымліваў як мінімум адзін элемент, і мы настойліва рэкамендуем кнопку закрыцця.
Напаўпразрысты
Тосты таксама злёгку празрыстыя, таму яны зліваюцца з усім, што яны могуць выглядаць. Для браўзераў, якія падтрымліваюць backdrop-filter
уласцівасць CSS, мы таксама паспрабуем размыць элементы пад тостам.
Укладванне
Калі ў вас ёсць некалькі тостаў, мы па змаўчанні размяшчаем іх вертыкальна ў зручным для чытання выглядзе.
Размяшчэнне
Размясціце тосты з карыстальніцкім CSS па меры неабходнасці. Верхні правы часта выкарыс��оўваецца для апавяшчэнняў, як і верхні сярэдні. Калі вы збіраецеся паказваць толькі адзін тост за раз, змясціце стылі пазіцыянавання прама на .toast
.
Для сістэм, якія ствараюць больш апавяшчэнняў, падумайце аб выкарыстанні элемента абгорткі, каб іх можна было лёгка складаць.
Вы таксама можаце пацешыць утыліты flexbox для выраўноўвання тостаў па гарызанталі і/або вертыкалі.
Даступнасць
Тосты прызначаны для таго, каб невялікае перапыненне вашых наведвальнікаў або карыстальнікаў, таму, каб дапамагчы тым, хто мае праграмы чытання з экрана і падобныя дапаможныя тэхналогіі, вы павінны абгарнуць свае тосты ў aria-live
рэгіён . Змены ў жывых рэгіёнах (напрыклад, увядзенне/абнаўленне кампанента тоста) аўтаматычна абвяшчаюцца праграмамі чытання з экрана без неабходнасці перамяшчаць фокус карыстальніка або іншым чынам перапыняць яго. Акрамя таго, уключыце, aria-atomic="true"
каб пераканацца, што ўвесь тост заўсёды абвяшчаецца як адзіная (атамарная) адзінка, а не абвяшчае тое, што было зменена (што можа прывесці да праблем, калі вы абнаўляеце толькі частку змесціва тоста або калі адно і тое ж змесціва тоста адлюстроўваецца на больш позні момант часу). Калі патрэбная інфармацыя важная для працэсу, напрыклад, для спісу памылак у форме, выкарыстоўвайце кампанент папярэджаннязамест тостаў.
Звярніце ўвагу, што жывы рэгіён павінен прысутнічаць у разметцы перад тым, як будзе створаны або абноўлены тост. Калі вы дынамічна ствараеце абодва адначасова і ўстаўляеце іх на старонку, яны звычайна не будуць аб'яўляцца дапаможнымі тэхналогіямі.
Вам таксама трэба адаптаваць role
і aria-live
ўзровень у залежнасці ад зместу. Калі гэта важнае паведамленне, напрыклад, памылка, выкарыстоўвайце role="alert" aria-live="assertive"
, у адваротным выпадку выкарыстоўвайце role="status" aria-live="polite"
атрыбуты.
Па меры змены змесціва, якое вы паказваеце, не забудзьцеся абнавіць час delay
чакання , каб у людзей было дастаткова часу, каб прачытаць тост.
Пры выкарыстанні autohide: false
вы павінны дадаць кнопку закрыцця, каб карыстальнікі маглі адхіляць тост.
Паводзіны JavaScript
Выкарыстанне
Ініцыялізаваць тосты праз JavaScript:
Параметры
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-
, як у data-animation=""
.
Імя | Тып | Па змаўчанні | Апісанне |
---|---|---|---|
анімацыя | лагічны | праўда | Прымяніце да тоста знікненне CSS |
аўтасхаваць | лагічны | праўда | Аўтаматычна схаваць тост |
затрымка | лік | 500 |
Затрымка хавання тоста (мс) |
Метады
Асінхронныя метады і пераходы
Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .
Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .
$().toast(options)
Далучае апрацоўшчык тостаў да калекцыі элементаў.
.toast('show')
Выяўляе тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна паказаны (г.зн. да таго , як shown.bs.toast
адбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, замест гэтага ваш тост не будзе адлюстроўвацца.
.toast('hide')
Хавае тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна схаваны (г.зн. да таго , як hidden.bs.toast
адбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, калі вы зрабілі autohide
гэта false
.
.toast('dispose')
Хавае тост элемента. Ваш тост застанецца ў DOM, але больш не будзе паказвацца.
Падзеі
Тып падзеі | Апісанне |
---|---|
show.bs.toast | Гэта падзея запускаецца неадкладна пры show выкліку метаду асобніка. |
паказаны.bs.тост | Гэта падзея запускаецца, калі тост становіцца бачным для карыстальніка. |
hide.bs.toast | Гэта падзея запускаецца адразу пасля hide выкліку метаду асобніка. |
hidden.bs.toast | Гэта падзея запускаецца, калі тост перастае быць схаваным ад карыстальніка. |