in English

Toasts

Titari awọn iwifunni si awọn alejo rẹ pẹlu tositi kan, iwuwo fẹẹrẹ ati ifiranṣẹ itaniji asefara ni irọrun.

Toasts jẹ awọn iwifunni iwuwo fẹẹrẹ ti a ṣe apẹrẹ lati ṣe afiwe awọn iwifunni titari ti o jẹ olokiki nipasẹ alagbeka ati awọn ọna ṣiṣe tabili tabili. Wọn ṣe pẹlu flexbox, nitorinaa wọn rọrun lati ṣe deede ati ipo.

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna tositi:

  • Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .
  • Toasts ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
  • Jọwọ ṣe akiyesi pe o ni iduro fun ipo awọn tositi.
  • Toasts yoo tọju laifọwọyi ti o ko ba ṣe pato autohide: false.
Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Awọn apẹẹrẹ

Ipilẹṣẹ

Lati ṣe iwuri fun awọn tositi ti o ṣee ṣe ati asọtẹlẹ, a ṣeduro akọsori ati ara. Awọn akọsori tositi lo display: flex, gbigba titete akoonu irọrun o ṣeun si ala wa ati awọn ohun elo flexbox.

Toasts jẹ irọrun bi o ṣe nilo ati pe wọn ni isamisi ti o nilo pupọ. Ni o kere ju, a nilo ipin kan lati ni akoonu “toasted” rẹ ninu ati ṣe iwuri fun bọtini ikọsilẹ.

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

Gbe

Tẹ bọtini ti o wa ni isalẹ lati ṣafihan tositi kan (ti o wa pẹlu awọn ohun elo wa ni igun apa ọtun isalẹ) ti o ti farapamọ nipasẹ aiyipada pẹlu .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Translucent

Toasts jẹ translucent die-die lati dapọ mọ ohun ti o wa ni isalẹ wọn.

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

Iṣakojọpọ

Nigba ti o ba ni ọpọ tositi, a aiyipada si inaro stalling wọn ni a kika ona.

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

Ipo

Gbe tositi pẹlu aṣa CSS bi o ṣe nilo wọn. Oke apa ọtun ni igbagbogbo lo fun awọn iwifunni, bii aarin oke. Ti o ba n lọ lati ṣafihan tositi kan ni akoko kan, fi awọn ara ipo si ọtun lori faili .toast.

Bootstrap 11 iṣẹju ago
Mo ki O Ile Aiye! Eyi jẹ ifiranṣẹ tositi kan. 
<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>

Fun awọn ọna ṣiṣe ti o ṣe agbejade awọn iwifunni diẹ sii, ronu nipa lilo ohun mimu ki wọn le ni irọrun akopọ.

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

O tun le ni igbadun pẹlu awọn ohun elo flexbox lati ṣe deede awọn tositi ni ita ati/tabi ni inaro.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

Wiwọle

Toasts jẹ ipinnu lati jẹ awọn idilọwọ kekere si awọn alejo tabi awọn olumulo rẹ, nitorinaa lati ṣe iranlọwọ fun awọn ti o ni awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra, o yẹ ki o fi ipari si awọn tositi rẹ ni aria-liveagbegbe kan . Awọn iyipada si awọn agbegbe laaye (gẹgẹbi abẹrẹ/imudojuiwọn paati tositi) jẹ ikede laifọwọyi nipasẹ awọn oluka iboju laisi nilo lati gbe idojukọ olumulo tabi bibẹẹkọ da olumulo duro. Ni afikun, pẹlu aria-atomic="true"lati rii daju pe gbogbo tositi nigbagbogbo ni a kede bi ẹyọkan (atomu) ẹyọkan, kuku ki o kan kede ohun ti o yipada (eyiti o le ja si awọn iṣoro ti o ba ṣe imudojuiwọn apakan ti akoonu tositi nikan, tabi ti o ba ṣafihan akoonu tositi kanna. ni akoko kan nigbamii). Ti alaye ti o nilo ba ṣe pataki fun ilana naa, fun apẹẹrẹ fun atokọ awọn aṣiṣe ni fọọmu kan, lẹhinna lo paati gbigbọndipo tositi.

Ṣe akiyesi pe agbegbe laaye nilo lati wa ni isamisi ṣaaju ki tositi ti ipilẹṣẹ tabi imudojuiwọn. Ti o ba ṣe ipilẹṣẹ awọn mejeeji ni akoko kanna ti o fi wọn si oju-iwe naa, wọn kii yoo kede ni gbogbogbo nipasẹ awọn imọ-ẹrọ iranlọwọ.

O tun nilo lati ṣatunṣe roleati aria-liveipele ti o da lori akoonu naa. Ti o ba jẹ ifiranṣẹ pataki bi aṣiṣe, lo role="alert" aria-live="assertive", bibẹẹkọ lo role="status" aria-live="polite"awọn abuda.

Bi akoonu ti o n ṣafihan ṣe yipada, rii daju lati ṣe imudojuiwọn delayakoko ipari ki awọn olumulo ni akoko ti o to lati ka tositi naa.

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

Nigbati o ba nlo autohide: false, o gbọdọ ṣafikun bọtini isunmọ lati gba awọn olumulo laaye lati yọ tositi naa kuro.

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

Lakoko ti imọ-ẹrọ o ṣee ṣe lati ṣafikun awọn iṣakoso idojukọ / iṣẹ ṣiṣe (gẹgẹbi awọn bọtini afikun tabi awọn ọna asopọ) ninu tositi rẹ, o yẹ ki o yago fun ṣiṣe eyi fun awọn tositi adaṣe adaṣe. Paapaa ti o ba fun tositi naa ni igba pipẹ delay, keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ le rii i nira lati de tositi ni akoko lati ṣe iṣe (niwọn bi awọn tositi ko gba idojukọ nigbati wọn ba han). Ti o ba Egba gbọdọ ni awọn idari siwaju, a ṣeduro lilo tositi pẹlu autohide: false.

JavaScript ihuwasi

Lilo

Bẹrẹ awọn toasts nipasẹ JavaScript:

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-animation="".

Oruko Iru Aiyipada Apejuwe
iwara boolian ooto Waye iyipada CSS ipare si tositi
autohide boolian ooto Laifọwọyi tọju tositi naa
idaduro nọmba 500 Idaduro fifipamọ tositi (ms)

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

$().toast(options)

So olutọju tositi kan si gbigba eroja kan.

.toast('show')

Fi han ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti han gangan (ie ṣaaju ki shown.bs.toastiṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ, dipo tositi rẹ kii yoo han.

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

.toast('hide')

hides ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti farapamọ gangan (ie ṣaaju ki hidden.bs.toastiṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ ti o ba ṣe autohidesi false.

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

.toast('dispose')

hides ohun ano ká tositi. Tositi rẹ yoo wa lori DOM ṣugbọn kii yoo ṣafihan mọ.

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

Awọn iṣẹlẹ

Iṣẹlẹ Iru Apejuwe
fihan.bs.tositi Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
han.bs.tositi Iṣẹlẹ yii jẹ ina nigbati tositi ti jẹ ki o han si olumulo.
tọju.bs.tositi Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.tositi Iṣẹlẹ yii jẹ ina nigbati tositi ti pari ni pamọ lati ọdọ olumulo. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})