Source

ቶስት ዝበሃል ምግቢ

ንመፍለጢታት ናብ በጻሕትኻ ብቶስት ደፍእ፣ ቀሊልን ብቐሊሉ ዝመዓራረን ናይ መጠንቀቕታ መልእኽቲ።

ቶስትስ ነቲ ብሞባይልን ዴስክቶፕን ስርዓተ ምምሕዳር ተፈታዊ ዝኾነ ናይ ምድፋእ መተሓሳሰቢ ንምምሳል ዝተዳለወ ቀለልቲ መተሓሳሰቢታት እዮም። ብፍሌክስቦክስ ዝተሃንጹ ስለዝኾኑ፡ ንምስላፍን ንምቕማጥን ቀለልቲ እዮም።

ሓፈሻዊ ትሕዝቶ

ቶስት ፕላግ-ኢን ክትጥቀም ከለኻ ክትፈልጦም ዘለካ ነገራት፤

  • ጃቫስክሪፕትና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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ፍርቂ ብርሃን ዝሓልፍ

ቶስት እውን ቁሩብ ፍርቂ ብርሃን ዝሓልፍ ስለዝኾነ ኣብ ልዕሊ ዝኾነ ክረአ ዝኽእል ይወሃሃድ። ንባህሪ CSS ዝድግፉ ዳህሰስቲ backdrop-filter፡ ነቶም ባእታታት ኣብ ትሕቲ ቶስት ክንደብዝዞም እውን ክንፍትን ኢና።

<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">&times;</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">&times;</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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

ምምዳብ

ቶስት ከም ዘድልየካ ብሕታዊ CSS ኣቐምጦም። መብዛሕትኡ ግዜ እቲ ላዕለዋይ የማናይ ሸነኽ ንመፍለጢታት ይጥቀመሉ፣ ከምኡ’ውን እቲ ላዕለዋይ ማእከላይ። ኣብ ሓደ እዋን ሓደ ቶስት ጥራይ ከተርኢ እንተኾይንካ፡ ቅዲታት ኣቀማምጣ ልክዕ ��ብቲ .toast.

ቡትስትራፕ ቅድሚ 11 ደቒቕ
ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ። 
<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">&times;</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">&times;</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">&times;</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="min-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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ተበጻሕነት

ቶስት ንበጻሕትኻ ወይ ተጠቀምትኻ ንኣሽቱ ምቁራጻት ክኸውን ስለዝተሓሰበ፡ ነቶም ስክሪን ሪደርን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን ዘለዎም ንምሕጋዝ፡ ቶስትካ ኣብ ሓደ aria-liveዞባ ክትጠቕልሎ ኣለካ . ኣብ ቀጥታዊ ዞባታት ዝግበር ለውጢ (ከም መርፍእ/ምዕራፍ ናይ ቶስት ክፍሊ) ትኹረት ተጠቃሚ ምንቅስቓስ ወይ ብኻልእ መንገዲ ንተጠቃሚ ምቁራጽ ከየድለየ ብኣውቶማቲክ ብኣንበብቲ ስክሪን ይእወጅ። ብተወሳኺ aria-atomic="true"፡ ምሉእ ቶስት ኩሉ ግዜ ከም ሓደ (ኣቶሚክ) ኣሃዱ ከም ዝእወጅ ንምርግጋጽ ኣካትት፣ ኣብ ክንዲ እንታይ ከም ዝተቐየረ ምእዋጅ (እዚ ድማ ንገለ ክፋል ትሕዝቶ ናይቲ ቶስት ጥራይ እንተዘመሓይሽካዮ ጸገም ከስዕብ ይኽእል እዩ፣ ወይ ድማ ተመሳሳሊ ትሕዝቶ ቶስት ኣብ ዘርኢ እንተኾይኑ ድሒሩ ዝመጽእ ነጥቢ ናይ ግዜ)። እቲ ዘድሊ ሓበሬታ ንመስርሕ ኣገዳሲ እንተኾይኑ፡ ንኣብነት ንዝርዝር ጌጋታት ኣብ ሓደ ቅጥዒ፡ ሽዑ ነቲ ናይ መጠንቀቕታ ክፍሊ ተጠቐምኣብ ክንዲ ቶስት።

ቅድሚ እቲ ቶስት ምፍጣሩ ወይ ምዕዳሙ እቲ ቀጥታዊ ዞባ ኣብቲ ምልክት ክህሉ ከምዘለዎ ኣስተውዕል ። ንኽልቲኦም ኣብ ሓደ እዋን ብዳይናሚክ መንገዲ እንተፈጢርካዮምን ኣብቲ ገጽ እንተወጊእካዮምን፡ ብሓፈሻ ብሓገዝቲ ቴክኖሎጂታት ኣይክእወጁን እዮም።

ከምኡ ውን ከከም ትሕዝቶኡ ነቲ roleand 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ባህሪ ጃቫስክሪፕት።

ኣጠቓቕማ

ቶስት ብመንገዲ ጃቫስክሪፕት ምጅማር፤

$('.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...
})