ቶስት ዝበሃል ምግቢ

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

ኣብዚ ገጽ

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

ሓፈሻዊ ትሕዝቶ

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

ቶስት ብናይ ኣፈጻጽማ ምኽንያታት ምምራጽ ስለዝኾነ ባዕልኻ ክትጅምሮ ኣለካ .
እንተዘይገለጽካዮ ቶስት ብኣውቶማቲክ ክሕባእ ’ ዩ 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 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።

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

ፍርቂ ብርሃን ዝሓልፍ

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

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

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

ምድማር

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

ረአ? በቃ ከምዚ።

ርእስኻ ንላዕሊ፡ ቶስት ብኣውቶማቲክ ክድምር እዩ።

<div class="toast-container">
  <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 ብምጥቃም ነቲ ኣቀማምጣ ብምትዕርራይ ዝቐለለ ቶስት ፈጢርና ኣለና ።

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

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

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

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

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

ሕብራዊ ስርዓታት

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

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

<div class="toast align-items-center text-white 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.

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

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

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

ረአ? በቃ ከምዚ።

ርእስኻ ንላዕሊ፡ ቶስት ብኣውቶማቲክ ክድምር እዩ።

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

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

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

<!-- 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ከለኻ፡ ተጠቀምቲ ነቲ ቶስት ንኽስሕብዎ ዘኽእሎም ናይ ምዕጻው መጠወቒ ክትውስኽ ኣለካ።

ሰላም ዓለም! እዚ መልእኽቲ ቶስት እዩ።

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

ሳስ

ተለዋዋጢ ረቛሒታት

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

ኣጠቓቕማ

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-bs-፡ ከምቲ ኣብ data-bs-animation="".

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

ኣገባባት

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

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

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

አርኢ

ናይ ሓደ ባእታ ቶስት ይገልጽ። ቅድሚ እቲ ቶስት ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። ነዚ ሜላ ብኢድካ ክትጽውዖ ኣለካ፣ ኣብ ክንድኡ ቶስትካ ኣይርአን እዩ።

toast.show()

ተሓባእ

ናይ ሓደ ባእታ ቶስት ይሓብእ። እቲ ቶስት ብጭቡጥ ቅድሚ ምሕባኡ (ማለት ቅድሚ እቲ hidden.bs.toastፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። autohideናብ false. _

toast.hide()

ምጉሓፍ

ናይ ሓደ ባእታ ቶስት ይሓብእ። ቶስትካ ኣብ DOM ክጸንሕ እዩ ግን ድሕሪ ሕጂ ኣይክረአን እዩ።

toast.dispose()

getInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM element ዝተኣሳሰር scrollspy instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance ዝብል ጽሑፍ ኣሎ።

ምስ ሓደ DOM ባእታ ዝተኣሳሰር scrollspy instance ክትረክብ ዘኽእለካ ስታቲክ ሜላ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

ፍጻሜታት

ዓይነት ፍጻመ	መግለፂ
`show.bs.toast`	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
`shown.bs.toast`	እዚ ፍጻመ እዚ ዝትኮስ እቲ ቶስት ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ።
`hide.bs.toast`	እዚ ፍጻመ እዚ እቲ ናይ `hide`ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
`hidden.bs.toast`	እዚ ፍጻመ ዝትኮስ እቲ ቶስት ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ።

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})