ቶስት ዝበሃል ምግቢ
ንመፍለጢታት ናብ በጻሕትኻ ብቶስት ደፍእ፣ ቀሊልን ብቐሊሉ ዝመዓራረን ናይ መጠንቀቕታ መልእኽቲ።
ቶስትስ ነቲ ብሞባይልን ዴስክቶፕን ስርዓተ ምምሕዳር ተፈታዊ ዝኾነ ናይ ምድፋእ መተሓሳሰቢ ንምምሳል ዝተዳለወ ቀለልቲ መተሓሳሰቢታት እዮም። ብፍሌክስቦክስ ዝተሃንጹ ስለዝኾኑ፡ ንምስላፍን ንምቕማጥን ቀለልቲ እዮም።
ሓፈሻዊ ትሕዝቶ
ቶስት ፕላግ-ኢን ክትጥቀም ከለኻ ክትፈልጦም ዘለካ ነገራት፤
- ጃቫስክሪፕትና
util.js
ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ . - ቶስት ብናይ ኣፈጻጽማ ምኽንያታት ምርጫ ስለዝኾነ ባዕልኻ ክትጅምሮ ኣለካ .
- ቶስት ናይ ምቕማጥ ሓላፍነት ከም ዘለኩም ኣስተውዕሉ።
- እንተዘይገለጽካዮ ቶስት ብኣውቶማቲክ ክሕባእ ’ ዩ
autohide: false
።
prefers-reduced-motion
ሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ
።
ኣብነታት
መሰረታዊ
ዝዝርጋሕን ክትግምቶ ዝከኣልን ቶስት ንምትብባዕ፡ ርእስን ኣካልን ንመክር። Toast headers use display: flex
, ሳላ ማርጅንን flexboxን ዩቲሊቲታትና ቀሊል ኣሰላልፋ ትሕዝቶ የፍቅድ።
ቶስት ከም ዘድልየካ ተዓጻጻፊ ኮይኑ ኣዝዩ ውሑድ ዝድለ ምልክት ኣለዎ። እንተወሓደ፡ “ዝተጠበሰ” ትሕዝቶኻ ዝሕዝ ሓደ ባእታ ንጠልብን ናይ ምብራር መጠወቒ ኣትሪርና ነተባብዕን።
<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>
ንበር
ኣብ ታሕቲ ዘሎ ቁልፊ ጠውቕ እሞ ብነባሪ ብ ተሓቢኡ ዝነበረ ቶስት (ኣብ ታሕተዋይ የማናይ ኩርናዕ ምስ ዩቲሊቲታትና ተቐሚጡ ኣሎ) ንምርኣይ .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>
ፍርቂ ብርሃን ዝሓልፍ
ቶስት ምስቲ ኣብ ትሕቲኡ ዘሎ ንኽሕወስ ቁሩብ ፍርቂ ብርሃን ዝህብ እዩ።
<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>
ምድማር
ብዙሓት ቶስት ምስ ዝህልወካ፡ ብነባሪ ንነባቢ መንገዲ ብቐጥታ ክንድምር ኢና።
<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>
ምምዳብ
ቶስት ከም ዘድልየካ ብሕታዊ CSS ኣቐምጦም። መብዛሕትኡ ግዜ እቲ ላዕለዋይ የማናይ ሸነኽ ንመፍለጢታት ይጥቀመሉ፣ ከምኡ’ውን እቲ ላዕለዋይ ማእከላይ። ኣብ ሓደ እዋን ሓደ ቶስት ጥራይ ከተርኢ እንተኾይንካ፡ ቅዲታት ኣቀማምጣ ልክዕ ኣብቲ .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>
ንዝያዳ መፍለጢታት ዘመንጩ ስርዓታት፡ ብቐሊሉ ክድምር ምእንቲ፡ መጠቕለሊ ባእታ ምጥቃም ኣብ ግምት ኣእቱ።
<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>
ብተወሳኺ ንቶስት ብኣግማድን/ወይ ብቐጥታን ንምስላፍ ብፍሌክስቦክስ ዩቲሊቲስ ፋንሲ ክትረክብ ትኽእል ኢኻ።
<!-- 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>
ተበጻሕነት
ቶስት ንበጻሕትኻ ወይ ተጠቀምትኻ ንኣሽቱ ምቁራጻት ክኸውን ስለዝተሓሰበ፡ ነቶም ስክሪን ሪደርን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን ዘለዎም ንምሕጋዝ፡ ቶስትካ ኣብ ሓደ aria-live
ዞባ ክትጠቕልሎ ኣለካ . ኣብ ቀጥታዊ ዞባታት ዝግበር ለውጢ (ከም መርፍእ/ምዕራፍ ናይ ቶስት ክፍሊ) ትኹረት ተጠቃሚ ምንቅስቓስ ወይ ብኻልእ መንገዲ ንተጠቃሚ ምቁራጽ ከየድለየ ብኣውቶማቲክ ብኣንበብቲ ስክሪን ይእወጅ። ብተወሳኺ aria-atomic="true"
፡ ምሉእ ቶስት ኩሉ ግዜ ከም ሓደ (ኣቶሚካዊ) ኣሃዱ ከም ዝእወጅ ንምርግጋጽ ኣካትት፣ ኣብ ክንዲ እንታይ ከም ዝተቐየረ ጥራይ ምእዋጅ (እዚ ድማ ንገለ ክፋል ትሕዝቶ ናይቲ ቶስት ጥራይ እንተዘመሓይሽካዮ፣ ወይ ተመሳሳሊ ትሕዝቶ ቶስት እንተርኢኻ ጸገም ከስዕብ ይኽእል እዩ። ኣብ ድሒሩ ዝመጽእ እዋን)። እቲ ዘድሊ ሓበሬታ ንመስርሕ ኣገዳሲ እንተኾይኑ፡ ንኣብነት ንዝርዝር ጌጋታት ኣብ ሓደ ቅጥዒ፡ ሽዑ ነቲ ናይ መጠንቀቕታ ክፍሊ ተጠቐምኣብ ክንዲ ቶስት።
ቅድሚ እቲ ቶስት ምፍጣሩ ወይ ምዕዳሙ እቲ ቀጥታዊ ዞባ ኣብቲ ምልክት ክህሉ ከምዘለዎ ኣስተውዕል ። ንኽልቲኦም ኣብ ሓደ እዋን ብዳይናሚክ መንገዲ እንተፈጢርካዮምን ኣብቲ ገጽ እንተወጊእካዮምን፡ ብሓፈሻ ብሓገዝቲ ቴክኖሎጂታት ኣይክእወጁን እዮም።
ከምኡ ውን ከከም ትሕዝቶኡ ነቲ role
and level ከተመዓራርዮ ኣለካ ። aria-live
ከም ጌጋ ዝኣመሰለ ኣገዳሲ መልእኽቲ እንተኾይኑ፡ ተጠቐም role="alert" aria-live="assertive"
፡ እንተዘይኮይኑ role="status" aria-live="polite"
ባህርያት ተጠቐም።
እቲ እተርእዮ ዘለኻ ትሕዝቶ እናተቐየረ ምስ ከደ ፡ ተጠቀምቲ ነቲ ቶስት ንኸንብቡ እኹል ግዜ ንኽህልዎም ፡ ነቲ ናይ delay
ግዜ ምውዳእ ምዕራፍ ምግባርካ ኣረጋግጽ።
<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>
፡ ክትጥቀም autohide: false
ከለኻ፡ ተጠቀምቲ ነቲ ቶስት ንኽስሕብዎ ዘኽእሎም ናይ ምዕጻው መጠወቒ ክትውስኽ ኣለካ።
<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>
ብቴክኒካዊ መዳይ ኣብ ቶስትካ ትኹረት ዝግበረሎም/ተግባራዊ ዝኾኑ ቁጽጽር (ከም ተወሳኺ መጠወቒታት ወይ መላግቦታት) ምውሳኽ ዝከኣል እኳ እንተኾነ፡ ንኣውቶሃይድ ቶስት ግን ነዚ ካብ ምግባር ክትቁጠብ ይግባእ። Even if you give the toast a long delay
timeout , ተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን ስጉምቲ ንምውሳድ ኣብ ግዚኡ ናብቲ ቶስት ንምብጻሕ ከጸግሞም ይኽእል እዩ (ቶስትታት ክረኣዩ ከለዉ ትኹረት ስለዘይረኽቡ)። ፍጹም ተወሳኺ ቁጽጽር ክህልወካ ኣለዎ እንተኾይኑ፡ ቶስት ምስ autohide: false
.
ባህሪ ጃቫስክሪፕት።
ኣጠቓቕማ
ቶስት ብመንገዲ ጃቫስክሪፕት ምጅማር፤
$('.toast').toast(option)
ኣማራጺታት
ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-
፡ ከምቲ ኣብ data-animation=""
.
ሽም | ዓይነት | ትሑዝ | መግለፂ |
---|---|---|---|
ኣኒሜሽን ምግባር | ቡልያን ዝብል እዩ። | ሓቂ | ኣብቲ ቶስት ናይ CSS ምድምሳስ ምስግጋር ተግባራዊ ግበር |
autohide ዝብል ቃል ንረክብ | ቡልያን ዝብል እዩ። | ሓቂ | ኣውቶማቲክ ነቲ ቶስት ሕባእዎ። |
ምዝንጋዕ | ቑጽሪ | 500 |
ምድንጓይ ምሕባእ ቶስት (ms) |
ኣገባባት
ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።
ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .
$().toast(options)
ንሓደ ናይ ቶስት መትሓዚ ምስ ሓደ ናይ ባእታ ምትእኽኻብ የተሓሕዞ።
.toast('show')
ናይ ሓደ ባእታ ቶስት ይገልጽ። ቅድሚ እቲ ቶስት ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.toast
ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ፣ ኣብ ክንድኡ ቶስትካ ኣይርአን እዩ።
$('#element').toast('show')
.toast('hide')
ናይ ሓደ ባእታ ቶስት ይሓብእ። እቲ ቶስት ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.toast
ፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። autohide
ናብ false
. _
$('#element').toast('hide')
.toast('dispose')
ናይ ሓደ ባእታ ቶስት ይሓብእ። ቶስትካ ኣብ DOM ክጸንሕ እዩ ግን ድሕሪ ሕጂ ኣይክረአን እዩ።
$('#element').toast('dispose')
ፍጻሜታት
ዓይነት ፍጻመ | መግለፂ |
---|---|
show.bs.toast ዝብል ጽሑፍ ኣሎ። | show እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ። |
ተራእዩ.bs.toast | እዚ ፍጻመ እዚ ዝትኮስ እቲ ቶስት ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ። |
ሕባእ.ብስ.ቶስት | እዚ ፍጻመ እዚ እቲ ናይ hide ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ። |
ሕቡእ.ብስ.ቶስት | እዚ ፍጻመ ዝትኮስ እቲ ቶስት ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ። |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})