Toostii

Beeksisa daawwattoota keessaniif toostii, ergaa akeekkachiisaa salphaa fi salphaatti dhuunfamuu danda'uun dhiibaa.

Toasts beeksisa salphaa ta'ee fi beeksisa dhiibaa sirna opereetiingii moobaayilaa fi deeskitooppiitiin beekamaa ta'e fakkeessuuf qophaa'edha. Isaanis flexbox waliin ijaaramaniiru, kanaaf walsimsiisuu fi bakka itti kaa'uun salphaadha.

Haala Waliigalaa

Wantoota yeroo toast plugin fayyadamtan beekuu qabdan:

• Yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .
• Toasts sababa raawwii hojiitiin opt-in waan ta'aniif ofii keetii jalqabuu qabda .
• Toasts yoo hin ifteessine ofumaan ni dhokatu autohide: false.

Fakkeenyaaf

Bu'uura

Toostii bal'ifamuu fi tilmaamamuu danda'u jajjabeessuuf, mataa fi qaama gorsina. Toast headers use display: flex, qabiyyee salphaatti qindeessuu kan hayyamu galata faayidaa margin fi flexbox keenyaa.

Toostiin hamma barbaaddetti kan jijjiiramu yoo ta'u, mallattoo barbaachisu baay'ee xiqqaa qaba. Yoo xiqqaate, qabiyyee “toasted” keessan qabachuuf elementii tokko barbaanna akkasumas button hojii irraa ari’uu cimsinee jajjabeessina.

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

Ifa ifa ta’e

Toasts xiqqoo translucent dha, akkasumas, isaan waan irra mul'achuu danda'an hunda irratti wal maka. Biraawzaroota qabeentaa CSS deeggaraniif backdrop-filter, akkasumas elementoota toostii jalatti jaamsuuf ni yaalla.

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

Tuulamaa

Yeroo toostii hedduu qabaattu, haala dubbifamuu danda'uun vertiaclly tuuluuf dursinee goona.

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

Ramaddii

Toasts akka barbaaddetti CSS amala ta'een kaa'i. Yeroo baayyee mirga gubbaa beeksisaaf kan oolu yoo ta'u, akkuma giddu galeessaa gubbaa. Yoo yeroo tokkotti toostii tokko qofa agarsiisuuf deemte, akkaataawwan iddoo itti kaa'an sirriitti .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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Sirnoota beeksisa baay'ee maddisiisaniif, akka isaan salphaatti tuuluuf elementii marmaartuu fayyadamuu yaadaa.

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

Akkasumas faayidaa flexbox waliin faashinii argachuu dandeessa toasts horizontally fi/ykn vertically qindeessuuf.

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

Dhaqqabummaa

Toostiin daawwattoota ykn fayyadamtoota keessaniif addaan ciccituu xixiqqoo ta’uuf yaadame, kanaaf warra dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan qaban gargaaruuf, toostii keessan aria-livenaannoo tokkotti marsuu qabdu . Jijjiiramni naannoowwan jiraataa (kan akka qaama toostii lilmoodhaan naqamuu/fooyyessuu) xiyyeeffannoo fayyadamaa sochoosuu ykn karaa biraatiin fayyadamaa addaan kutuu osoo hin barbaachisin dubbistoota iskiriiniitiin ofumaan labsamu. Dabalataanis, aria-atomic="true"waan jijjiirame beeksisuu irra, guutummaan toostii yeroo hunda akka yuunitii tokkootti (atomikii) akka beeksifamu mirkaneessuuf dabali (kun ammoo yoo qabiyyee toostii gartokkee qofa haaromsite, ykn yoo qabiyyee toostii walfakkaataa at agarsiifte rakkoo fiduu danda'a yeroo booda ta’e). Yoo odeeffannoon barbaachisu adeemsaaf barbaachisaa ta'e, fkn tarree dogoggora unkaa keessatti, sana booda qaama akeekkachiisaa fayyadamibakka toostii hin taane.

Hubadhaa naannoon kallattiin osoo toostiin hin uumamin ykn hin fooyya'iin dura mallattoo keessatti argamuu qaba. Yoo yeroo tokkotti lamaan isaanii daayinamikiidhaan maddisiistee fuula keessa galchite, akka waliigalaatti teknooloojiiwwan gargaarsaatiin hin beeksifaman.

Akkasumas qabiyyee irratti hundaa'uun sadarkaa rolefi madaqsuu qabda. aria-liveYoo ergaa barbaachisaa akka dogongoraa ta'e, fayyadami , yoo kana hin taane amaloota role="alert" aria-live="assertive"fayyadami .role="status" aria-live="polite"

Qabiyyeen ati agarsiiftu akkuma jijjiiramutti, namoonni yeroo gahaa toostii dubbisuuf akka qaban mirkaneessuuf delayyeroo xumuraa haaromsuu kee mirkaneessi.

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

Yeroo autohide: false, fayyadamtoonni toostii akka gadhiisan hayyamuuf qaree cufuu dabaluu qabda.

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

Amala JaavaScript

Fayyadama

Toostii karaa JavaScript jalqabi:

$('.toast').toast(option)

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Malawwan

$().toast(options)

Qabduu toostii walitti qabama elementii irratti maxxansi.

.toast('show')

Toostii elementii tokkoo mul'isa. Toostiin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.toasttaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Mala kana harkaan waamuu qabda, kanaa mannaa toostiin kee hin agarsiisu.

$('#element').toast('show')

.toast('hide')

Toostii elementii tokkoo dhoksa. Toostiin qabatamaan osoo hin dhokatin dura (jechuunis hidden.bs.toasttaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Yoo autohideakka false.

$('#element').toast('hide')

.toast('dispose')

Toostii elementii tokkoo dhoksa. Toostiin kee DOM irratti ni hafa garuu kana booda hin agarsiisu.

$('#element').toast('dispose')

Taateewwan

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})