Toost

Shyira amatangazo kubashyitsi bawe hamwe na toast, umutwaro woroshye kandi byoroshye guhinduranya ubutumwa.

Toast ni amatangazo yoroheje yagenewe kwigana amatangazo yo gusunika yakunzwe na sisitemu y'imikorere ya mobile na desktop. Zubatswe na flexbox, biroroshye rero guhuza no guhagarara.

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya toast:

• Niba wubaka JavaScript yacu kuva isoko, birasabautil.js .
• Toast irahitamo kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
• Toast izahita ihisha niba udasobanuye autohide: false.

Ingero

Shingiro

Kugirango dushishikarize toast yagutse kandi iteganijwe, turasaba umutwe numubiri. Imitwe ya toast ikoresha display: flex, yemerera guhuza byoroshye ibikubiyemo dukesha margin na flexbox yingirakamaro.

Toast iroroshye guhinduka nkuko ubikeneye kandi ifite ibimenyetso bike bisabwa. Nibura, dukeneye ikintu kimwe kugirango gikubiyemo ibintu "byuzuye" kandi dushishikarize cyane buto yo kwirukana.

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

Birasobanutse

Toost irasobanutse gato, nayo, kuburyo ihuza ibyo aribyo byose bigaragara hejuru. Kuri mushakisha ishyigikira backdrop-filterumutungo wa CSS, tuzagerageza kandi guhuza ibintu munsi ya toast.

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

Gushyira hamwe

Mugihe ufite toast nyinshi, dusanzwe muburyo bwo kubitondekanya muburyo busomeka.

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

Gushyira

Shira toast hamwe na CSS yihariye nkuko ubikeneye. Hejuru iburyo bukoreshwa kenshi kubimenyeshwa, nkuko biri hejuru. Niba ugiye gusa kwerekana toast imwe icyarimwe, shyira uburyo bwo guhagarara neza kuri .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>

Kuri sisitemu zitanga ibisobanuro byinshi, tekereza gukoresha ikintu cyo gupfunyika kugirango zishobore gutondeka byoroshye.

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

Urashobora kandi kubona ibintu byiza hamwe na flexbox yingirakamaro kugirango uhuze toast itambitse kandi / cyangwa uhagaritse.

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

Kuboneka

Toast igenewe kuba intambamyi ntoya kubasuye cyangwa abakoresha, kugirango rero ufashe abafite abasomyi ba ecran hamwe nikoranabuhanga risa naryo rifasha, ugomba kuzinga toast yawe aria-livemukarere . Impinduka mukarere gatuye (nko gutera inshinge / kuvugurura ibice bya toast) birahita bitangazwa nabasomyi ba ecran bitabaye ngombwa ko wimura icyerekezo cyumukoresha cyangwa ubundi guhagarika umukoresha. Byongeye kandi, shyiramo aho kugirango toast.aria-atomic="true" kwemeza ko toast yose ihora itangazwa nkigice kimwe (atome), aho gutangaza icyahinduwe (gishobora kugutera ibibazo uramutse uvuguruye gusa igice cyibigize toast, cyangwa niba ugaragaza ibintu bimwe bya toast kuri ingingo ya nyuma mugihe). Niba amakuru akenewe ari ingenzi kubikorwa, urugero kurutonde rwamakosa muburyo, hanyuma ukoreshe ibice byo kumenyesha

Menya ko akarere kazima gakeneye kuba mubimenyetso mbere yuko toast ikorwa cyangwa ivugururwa. Niba ubyara umusaruro byombi icyarimwe hanyuma ukabitera kurupapuro, mubisanzwe ntabwo bizatangazwa nikoranabuhanga rifasha.

Ugomba kandi guhuza roleurwego aria-livenurwego ukurikije ibirimo. Niba ari ubutumwa bwingenzi nkikosa, koresha role="alert" aria-live="assertive", ubundi ukoreshe role="status" aria-live="polite"ibiranga.

Nkibirimo werekana impinduka, menya kuvugurura delayigihe cyateganijwe kugirango abantu babone umwanya uhagije wo gusoma toast.

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

Mugihe ukoresha autohide: false, ugomba kongeramo buto yegeranye kugirango wemerere abakoresha kwirukana toast.

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

Imyitwarire ya JavaScript

Ikoreshwa

Gutangiza toast ukoresheje JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-animation="".

Uburyo

$().toast(options)

Ongeraho umukoresha wa toast kubintu byegeranijwe.

.toast('show')

Kugaragaza toast yikintu. Garuka kumuhamagaye mbere yuko toast yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.toastibyabaye biba). Ugomba guhamagara intoki ubu buryo, ahubgo toast yawe ntizerekana.

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

.toast('hide')

Hisha toast yikintu. Garuka kumuhamagaye mbere yuko toast ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.toastibyabaye biba). Ugomba guhamagara intoki ubu buryo niba autohidewabikoze false.

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

.toast('dispose')

Hisha toast yikintu. Toast yawe izaguma kuri DOM ariko ntizongera kwerekana.

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

Ibyabaye

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