ټاسټونه
خپلو لیدونکو ته خبرتیاوې د ټوسټ ، لږ وزن لرونکي او په اسانۍ سره د تنظیم وړ خبرتیا پیغام سره فشار ورکړئ.
ټوسټونه لږ وزن لرونکي خبرتیاوې دي چې د پش خبرتیاو نقل کولو لپاره ډیزاین شوي چې د ګرځنده او ډیسټاپ عملیاتي سیسټمونو لخوا مشهور شوي. دوی د فلیکس بکس سره جوړ شوي، نو دوی د ترتیب او موقعیت لپاره اسانه دي.
کتنه
د ټوسټ پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:
- که تاسو زموږ جاوا سکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لري
util.js
. - ټاسټونه د فعالیت دلایلو لپاره غوره شوي ، نو تاسو باید دوی پخپله پیل کړئ .
- مهرباني وکړئ په یاد ولرئ چې تاسو د ټیسټونو موقعیت لپاره مسؤل یاست.
- ټاسټونه به په اوتومات ډول پټ شي که تاسو مشخص نه کړئ
autohide: false
.
د دې برخې د حرکت اغیز د prefers-reduced-motion
رسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .
مثالونه
بنسټیز
د تمدید وړ او وړاندوینې وړ ټیسټ هڅولو لپاره ، موږ سرلیک او بدن وړاندیز کوو. د ټوسټ سرلیکونه کاروي display: flex
، زموږ د حاشیې او فلیکس بکس اسانتیاو څخه مننه د مینځپانګې اسانه تنظیم کولو ته اجازه ورکوي.
ټوسټونه هغومره انعطاف منونکي دي څومره چې تاسو ورته اړتیا لرئ او خورا لږ اړین مارک اپ لري. لږترلږه، موږ یو واحد عنصر ته اړتیا لرو چې ستاسو "ټوسټ شوي" مینځپانګې ولري او په کلکه د ګوښه کولو تڼۍ وهڅوو.
شفاف
ټوسټونه هم یو څه شفاف دي، نو دوی په هر هغه څه سره مخلوط کوي چې ممکن یې ښکاره شي. د هغو براوزرونو لپاره چې د backdrop-filter
CSS ملکیت ملاتړ کوي، موږ به هڅه وکړو چې عناصر د ټوسټ لاندې روښانه کړو.
سټکینګ
کله چې تاسو ډیری ټاسټونه لرئ، موږ یې په عمودي ډول د لوستلو وړ اندازې ذخیره کولو لپاره ډیفالټ کوو.
ځای پرځای کول
ټاسټونه د دودیز CSS سره ځای په ځای کړئ لکه څنګه چې تاسو ورته اړتیا لرئ. پورتنۍ ښیې اکثرا د خبرتیاو لپاره کارول کیږي ، لکه څنګه چې پورتنۍ مینځنۍ برخه ده. که تاسو په یو وخت کې یوازې یو ټوسټ ښودلو ته ځئ ، د موقعیت سټایلونه په سم ځای کې واچوئ .toast
.
د هغه سیسټمونو لپاره چې ډیر خبرتیاوې رامینځته کوي ، د ریپینګ عنصر کارولو ته پام وکړئ نو دوی په اسانۍ سره سټیک کولی شي.
تاسو کولی شئ د فلیکس بکس اسانتیاو سره هم خوند واخلئ ترڅو ټیسټونه په افقی او / یا عمودی ډول تنظیم کړئ.
لاسرسی
ټاسټونه ستاسو د لیدونکو یا کاروونکو لپاره کوچني مداخلې لپاره دي ، نو د سکرین لوستونکو او ورته مرستندویه ټیکنالوژیو سره د مرستې لپاره ، تاسو باید خپل ټوسټونه په یوه aria-live
سیمه کې وپلټئ . په ژوندیو سیمو کې بدلونونه (لکه د ټوسټ برخې انجیک کول / تازه کول) د سکرین لوستونکو لخوا په اوتومات ډول اعلان کیږي پرته لدې چې د کارونکي تمرکز حرکت وکړي یا بل ډول د کارونکي مداخله وکړي. برسیره پردې، دا شامل aria-atomic="true"
کړئ چې ډاډ ترلاسه کړئ چې ټول ټوسټ تل د یو واحد (اټومي) واحد په توګه اعلان کیږي، د دې پر ځای چې څه بدل شوي اعلان کړي (کوم چې تاسو یوازې د ټوسټ مینځپانګې برخه تازه کړئ، یا که د ورته ټوسټ مینځپانګې ښودلو کې ستونزې رامینځته کولی شي. د وخت په تیریدو سره). که اړین معلومات د پروسې لپاره مهم وي، د بیلګې په توګه په فورمه کې د غلطیو لیست لپاره، نو بیا د خبرتیا برخې وکاروئد ټیسټ پرځای.
په یاد ولرئ چې ژوندۍ سیمه باید مخکې له دې چې ټوسټ تولید یا تازه شي په مارک اپ کې شتون ولري. که تاسو په متحرک ډول دواړه په ورته وخت کې تولید کړئ او پاڼې ته یې داخل کړئ، دوی به عموما د مرستندویه ټیکنالوژیو لخوا اعلان نشي.
تاسو اړتیا لرئ چې د مینځپانګې پراساس role
او کچه هم تنظیم کړئ. aria-live
که دا یو مهم پیغام وي لکه تېروتنه، استعمال کړئ role="alert" aria-live="assertive"
، که نه نو role="status" aria-live="polite"
ځانګړتیاوې وکاروئ.
لکه څنګه چې هغه مینځپانګه چې تاسو یې بدلونونه ښیې، ډاډ ترلاسه کړئ چې د delay
وخت پای تازه کړئ ترڅو ډاډ ترلاسه کړئ چې خلک د ټوسټ لوستلو لپاره کافي وخت لري.
کله چې کاروئ autohide: false
، تاسو باید د نږدې تڼۍ اضافه کړئ ترڅو کاروونکو ته اجازه ورکړي چې ټوسټ ګوښه کړي.
جاواسکریپټ چلند
کارول
د جاواسکریپټ له لارې ټیسټ پیل کړئ:
اختیارونه
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-animation=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
حرکت | بولین | ریښتیا | د ټوسټ لپاره د CSS فیډ لیږد تطبیق کړئ |
اتومات پټول | بولین | ریښتیا | په اتوماتيک ډول ټوسټ پټ کړئ |
ځنډ | شمیره | 500 |
د ټوسټ پټول ځنډول (ms) |
میتودونه
غیر متناسب میتودونه او لیږدونه
د API ټولې طریقې غیر متناسب دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته راستانه کیږي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .
$().toast(options)
د عنصر ټولګه کې د ټوسټ هینډلر ضمیمه کوي.
.toast('show')
د یو عنصر ټوسټ څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ټوسټ واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.toast
پیښه پیښ شي). تاسو باید په لاسي ډول دا طریقه زنګ ووهئ، پرځای یې ستاسو ټوسټ به ونه ښیې.
.toast('hide')
د عنصر ټیسټ پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ټوسټ واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.toast
پیښه پیښ شي). تاسو باید په لاسي ډول دا میتود ته زنګ ووهئ که تاسو یې کړی autohide
وي false
.
.toast('dispose')
د عنصر ټیسټ پټوي. ستاسو ټوسټ به په DOM کې پاتې شي مګر نور به ونه ښیې.
پیښې
د پیښې ډول | تفصیل |
---|---|
show.bs.toast | دا پیښه سمدلاسه اوریږي کله چې د show مثال میتود ویل کیږي. |
ښودل شوی.bs.toast | دا پیښه له مینځه وړل کیږي کله چې ټوسټ کارونکي ته ښکاره شي. |
hide.bs.toast | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.toast | دا پیښه له مینځه وړل کیږي کله چې ټوسټ د کارونکي څخه پټ شوی وي. |