Source

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>

Translucent

Toasts jẹ translucent die-die, paapaa, nitorinaa wọn dapọ lori ohunkohun ti wọn le han. Fun awọn aṣawakiri ti o ṣe atilẹyin backdrop-filterohun-ini CSS, a yoo tun gbiyanju lati blur awọn eroja labẹ tositi kan.

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

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 jẹ ikede nigbagbogbo bi ẹyọkan (atomic) ẹyọkan, dipo ikede 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 aaye nigbamii ni akoko). 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 awọn ayipada, rii daju lati ṣe imudojuiwọn delayakoko ipari lati rii daju pe eniyan 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>

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