ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ቶስት ዝበሃል ምግቢ

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

ኣብዚ ገጽ

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

ሓፈሻዊ ትሕዝቶ

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

  • ቶስት ብናይ ኣፈጻጽማ ምኽንያታት ምርጫ ስለዝኾነ ባዕልኻ ክትጅምሮ ኣለካ .
  • እንተዘይገለጽካዮ ቶስት ብኣውቶማቲክ ክሕባእ ’ ዩ autohide: false።
ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ኣብነታት

መሰረታዊ

ዝዝርጋሕን ክትግምቶ ዝከኣልን ቶስት ንምትብባዕ፡ ርእስን ኣካልን ንመክር። Toast headers use display: flex, ሳላ ማርጅንን flexboxን ዩቲሊቲታትና ቀሊል ኣሰላልፋ ትሕዝቶ የፍቅድ።

ቶስት ከም ዘድልየካ ተዓጻጻፊ ኮይኑ ኣዝዩ ውሑድ ዝድለ ምልክት ኣለዎ። እንተወሓደ፡ “ዝተጠበሰ” ትሕዝቶኻ ዝሕዝ ሓደ ባእታ ንጠልብን ናይ ምብራር መጠወቒ ኣትሪርና ነተባብዕን።

html ዝብል ጽሑፍ ኣሎ። 
<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ንሓደ ቶስት ምሉእ ብምሉእ ንምሕባእ (ምስ display:none, ኣብ ክንዲ ምስ ጥራይ opacity:0) ክላስ ይውስኽዎ ነይሮም። እዚ ሕጂ ድሕሪ ሕጂ ኣድላዪ ኣይኮነን። ይኹን እምበር፡ ንድሕሪት ዝምለስ ምትእስሳር፡ ስክሪፕትና ነቲ ክፍሊ ምቕያር (ዋላ’ኳ ግብራዊ ኣድላይነት እንተዘይሃለወ) ክሳብ ዝቕጽል ዓቢ ስሪት ክቕጽል እዩ።

ቀጥታዊ ኣብነት

ኣብ ታሕቲ ዘሎ ቁልፊ ብምጥዋቕ ብነባሪ ተሓቢኡ ዝነበረ ቶስት (ኣብ ታሕተዋይ የማናይ ኩርናዕ ምስ ዩቲሊቲታትና ዝተቐመጠ) ንምርኣይ።

<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>

ንቐጥታዊ ቶስት ዲሞና ንምጅማር ነዚ ዝስዕብ ጃቫስክሪፕት ንጥቀም፤

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ፍርቂ ብርሃን ዝሓልፍ

ቶስት ምስቲ ኣብ ትሕቲኡ ዘሎ ንኽሕወስ ቁሩብ ፍርቂ ብርሃን ዝህብ እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ምድማር

ቶስት ኣብ ቶስት መትሓዚ ብምጥቕላል ክትድምር ትኽእል ኢኻ፣ እዚ ድማ ብቐጥታ ገለ ርሕቀት ክውስኽ እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ብሕታዊ ትሕዝቶ

ንኡሳን ኣካላት ብምእላይ፣ ብዩቲሊቲታት ብምትዕርራይ ፣ ወይ ናይ ገዛእ ርእስኻ ምልክት ብምውሳኽ ቶስትኻ ብዝጥዕመካ ኣመዓራርዮ ። ኣብዚ ነቲ ነባሪ ብምእላይ ፣ ካብ Bootstrap Icons.toast-header ብሕታዊ ሕባእ ምልክት ብምውሳኽ ፣ ከምኡውን ገለ flexbox utilities ብምጥቃም ነቲ ኣቀማምጣ ብምትዕርራይ ዝቐለለ ቶስት ፈጢርና ኣለና ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ከም ኣማራጺ፡ ኣብ ቶስት ተወሳኺ ቁጽጽርን ኣካላትን ክትውስኽ እውን ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ሕብራዊ ስርዓታት

ኣብዚ ኣብ ላዕሊ ዝተጠቕሰ ኣብነት ብምህናጽ፡ ብናይ ሕብርን ድሕረ ባይታን ዩቲሊቲታትና ዝተፈላለዩ ናይ ቶስት ሕብራዊ ስኬማት ክትፈጥሩ ትኽእሉ ኢኹም ። ኣብዚ .text-bg-primaryኣብቲ .toast፣ ድሕሪኡ ድማ .btn-close-whiteኣብቲ ናይ ምዕጻው መጠወቒና ወሲኽናዮ ኣለና። ንሓደ ንጹር ጫፍ፡ ነቲ ነባሪ ዶብ ብ .border-0.

html ዝብል ጽሑፍ ኣሎ። 
<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>

ምምዳብ

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

ቡትስትራፕ ቅድሚ 11 ደቒቕ
ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።
html ዝብል ጽሑፍ ኣሎ። 
<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>

ንዝያዳ መፍለጢታት ዘመንጩ ስርዓታት፡ ብቐሊሉ ክድምር ምእንቲ፡ መጠቕለሊ ባእታ ምጥቃም ኣብ ግምት ኣእቱ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ብተወሳኺ ንቶስት ብኣግማድን/ወይ ብቐጥታን ንምስላፍ ብፍሌክስቦክስ ዩቲሊቲስ ፋንሲ ክትረክብ ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ። 
<!-- 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>

ተበጻሕነት

ቶስት ንበጻሕትኻ ወይ ተጠቀምትኻ ንኣሽቱ ምቁራጻት ክኸውን ስለዝተሓሰበ፡ ነቶም ስክሪን ሪደርን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን ዘለዎም ንምሕጋዝ፡ ቶስትካ ኣብ ሓደ 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-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

፡ ክትጥቀም autohide: falseከለኻ፡ ተጠቀምቲ ነቲ ቶስት ንኽስሕብዎ ዘኽእሎም ናይ ምዕጻው መጠወቒ ክትውስኽ ኣለካ።

html ዝብል ጽሑፍ ኣሎ። 
<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>

ብቴክኒካዊ መዳይ ኣብ ቶስትካ ትኹረት ዝግበረሎም/ተግባራዊ ዝኾኑ ቁጽጽር (ከም ተወሳኺ መጠወቒታት ወይ መላግቦታት) ምውሳኽ ዝከኣል እኳ እንተኾነ፡ ንኣውቶሃይድ ቶስት ግን ነዚ ካብ ምግባር ክትቁጠብ ይግባእ። Even if you give the toast a long delaytimeout , ተጠቀምቲ ቁልፊ ሰሌዳን ሓጋዚ ቴክኖሎጅን ስጉምቲ ንምውሳድ ኣብ ግዚኡ ናብቲ ቶስት ንምብጻሕ ከጸግሞም ይኽእል እዩ (ቶስትታት ክረኣዩ ከለዉ ትኹረት ስለዘይረኽቡ)። ፍጹም ተወሳኺ ቁጽጽር ክህልወካ ኣለዎ እንተኾይኑ፡ ቶስት ምስ autohide: false.

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ ቶስትስ ሕጂ ንዝተማዕበለ .toastናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$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};

ሳስ ተለዋዋጢ ረቛሒታት

$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);

ኣጠቓቕማ

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

መበገሲታት

ምብራር ከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ ኣብ ውሽጢ ቶስትdata ኣብ ዝርከብ መጠወቒ ዘሎ ባህሪ ክረጋገጽ ይከኣል ፤

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ወይ ድማ ካብቲ ቶስት ወጻኢ ኣብ ዝርከብ መጠወቒ data-bs-targetከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ ብምጥቃም ፤

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

ኣማራጺታት

ኣማራጺታት ብባህርያት ዳታ ወይ ጃቫስክሪፕት ክሓልፉ ስለ ዝኽእሉ data-bs-፡ ከምቲ ኣብ data-bs-animation="{value}". ነቶም ኣማራጺታት ብመንገዲ ባህርያት ዳታ ክትሓልፍ ከለኻ ፡ ዓይነት ኬዝ ናይቲ ስም ኣማራጺ ካብ “ camelCase ” ናብ “ kebab -case ” ምቕያርካ ኣረጋግጽ። ንኣብነት data-bs-custom-class="beautifier"ኣብ ክንዲ data-bs-customClass="beautifier".

ካብ Bootstrap 5.2.0 ጀሚሩ ኩሎም ኣካላት ንሓደ ፈተነ ዝተሓዝአ ዳታ ባህሪ ይድግፉ እዚ data-bs-configድማ ቀሊል ውቅር ኣካላት ከም JSON ሕብረ ቃላት ከዕቁብ ይኽእል። ሓደ ባእታ data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

ሽም ዓይነት ትሑዝ መግለፂ
animation ቡልያን ዝብል እዩ። true ኣብቲ ቶስት ናይ CSS ምድምሳስ ምስግጋር ተግባራዊ ግበር።
autohide ቡልያን ዝብል እዩ። true ድሕሪ ምድንጓይ ነቲ ቶስት ብኣውቶማቲክ ምሕባእ ።
delay ቑጽሪ 5000 ቅድሚ ነቲ ቶስት ምሕባእካ ብሚሊሰከንድ ምድንጓይ።

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ ።

ሜላ መግለፂ
dispose ናይ ሓደ ባእታ ቶስት ይሓብእ። ቶስትካ ኣብ DOM ክጸንሕ እዩ ግን ድሕሪ ሕጂ ኣይክረአን እዩ።
getInstance ምስ ሓደ DOM element ዝተኣሳሰር ናይ ቶስት ምሳሌ ክትረክብ ዘኽእለካ ስታቲክ ሜላ።
ንኣብነት፦ const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)ናይ Bootstrap toast instance ይመልስ።
getOrCreateInstance ስታትቲክ ሜላ እዚ ድማ ነቲ ናይ ቶስት ምሳሌ ምስ ሓደ DOM ባእታ ዝተኣሳሰር ክትረኽቦ ዘኽእለካ፣ ወይ ሓድሽ ክትፈጥር ዘኽእለካ፣ ንኸይተጀመረ።
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)ናይ Bootstrap toast instance ይመልስ።
hide ናይ ሓደ ባእታ ቶስት ይሓብእ። እቲ ቶስት ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ እንተ autohideጌርካ false.
isShown ብመሰረት ናይ ቶስት ርኡይነት ኩነታት ቡልያን ይመልስ።
show ናይ ሓደ ባእታ ቶስት ይገልጽ። ቅድሚ እቲ ቶስት ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ፣ ኣብ ክንድኡ ቶስትካ ኣይርአን እዩ።

ፍጻሜታት

ዝግጅት መግለፂ
hide.bs.toast እዚ ፍጻመ እዚ እቲ ናይ hideምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
hidden.bs.toast እዚ ፍጻመ ዝትኮስ እቲ ቶስት ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ።
show.bs.toast showእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
shown.bs.toast እዚ ፍጻመ እዚ ዝትኮስ እቲ ቶስት ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ። 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})