Source

Tostadas

Willakuykunata watukuqniykikunaman tanqay huk tostadas kaqwan, huk llamp'u chaymanta mana sasa ruwanapaq willay willakuywan.

Tostadas nisqaqa llamp'u willaykuna ruwasqa tanqay willakuykunata qatipanapaq mayqinkunachus kuyuchina chaymanta escritorio llamkanakuna sistemakuna riqsisqa kanku. Paykunaqa flexbox kaqwan ruwasqa kanku, chayrayku mana sasachu chiqanchay chaymanta churay.

Hatun qhawariy

Imakuna yachanapaq tostadas plugin kaqwan llamk'achkaspa:

  • Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .
  • Tostadas kanku opt-in ruwayrayku, chayrayku qam kikiyki qallarichinayki tiyan .
  • Ama hina kaspa, qanmi responsable kanki tostadas nisqakunata churanaykipaq.
  • Tostadas nisqakunaqa kikillanmantam pakakunqa mana niptikiqa autohide: false.

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ejemplos

Qallariq

Tostadas extensibles y predecibles nisqakunata kallpachanapaq, huk umalliqta, cuerpota ima yuyaychayku. Toast headers use display: flex, permitiendo fácil alineación de contenido gracias a nuestras utilidades de margen y flexbox.

Tostadas son tan flexibles como necesitas y tienen muy poco marcado requerido. Aswan pisi kaqpi, huk elementollata mañayku “tostado” contenidoykita hap’inanpaq chaymanta sinchita kallpachayku huk botón de desestimación kaqmanta.

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

Translúcido

Tostadas nisqapas pisilla translúcidos, chaymi ima hawapipas rikurinman chaypa hawanpi chaqrukunku. CSS kaqpa kaqninta yanapaq maskaqkunapaq, backdrop-filterhuk tostadas urapi elementokunata pantachiytapas kallpachakusaqku.

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

Apilamiento

Askha tostadasniyuq kachkaptiyki, ñawpaqmanta churasqayku verticalmente pilayku ñawirinapaq hina.

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

Colocación

Tostadas nisqakunata CSS ruwasqawan churay imaynachus necesitasqaykiman hina. Paña pata kaqpiqa sapa kuti willaykunapaq llamk'achisqa, pata chawpi kaqhina. Sichus hayk’aqllapas huk brindisllata huk kutipi rikuchiyta munanki chayqa, churay estilokuna churayta chiqan kaqpi .toast.

Correa de botas 11 mins ñawpaqta
Allin p'unchaw, pacha! Kayqa huk tostadas willakuymi. 
<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>

Aswan willakuykunata ruwaq sistemakunapaq, huk p'istu elemento llamk'achiyta qhaway chaymanta mana sasachu pilayta atinku.

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

Chantapas flexbox yanapakuykunawan sumaqllaña tariyta atinki tostadas horizontalmente chaymanta/utaq verticalmente alineanaykipaq.

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

Accesibilidad nisqa

Tostadas huk huch'uy interrupciones kanankupaq ruwasqa kanku watukuqniykikunaman utaq llamk'aqkunaman, chayrayku yanapanapaq pantalla ñawiriqkunayuq chaymanta rikch'aq yanapakuy tecnologiakunayuq kaqkunaman, brindisniyki huk aria-livesuyupi p'istuykunayki tiyan . Kawsaq suyukunaman tikraykuna (kayhina huk componente tostadas inyectar/actualización) pantalla ñawiriqkunawan kikinmanta willasqa kanku mana ruwaqpa enfoquenta kuyuchiyta utaq wakhina ruwaqta interrumpiyta necesitaspa. Chaymanta, yapay aria-atomic="true"llapa tostadas sapa kuti huk (atómica) unidad hina willasqa kananpaq, aswan ima tikrasqa kasqanmanta willakuymanta (kayqa sasachakuykunaman apayta atinman sichus huk parte tostadaspa contenidollanmanta musuqyachinki, utaq sichus kikin tostadas contenidota kaypi rikuchichkanki huk qhipaman pacha). Sichus willakuy necesitasqa ruwanapaq importante kan, p.h. huk pantasqakuna listapaq huk formulario kaqpi, chaymanta componente alerta kaqwan llamk'achiytostadaspa rantinpi.

Reparay kawsaq suyuqa marcapi kanan tiyan manaraq tostadas ruwasqa utaq musuqchasqa kachkaptin. Sichus iskayninta huk pachallapi dinamicamente ruwanki chaymanta p'anqaman inyectanki, generalmente mana yanapakuq tecnologiakuna kaqwan willasqachu kanqa.

También necesitas adaptar el roley aria-livenivel dependiendo del contenido. Pantasqa hina ancha chaniyuq willay kaptinqa, llamk'achiy role="alert" aria-live="assertive", mana hinaqa role="status" aria-live="polite"atributukunata llamk'achiy.

Imaynachus rikuchisqayki contenido tikrakun, ama hina kaspa delaypacha tukukuyta musuqyachiy runakuna suficiente tiempoyuq kasqankuta tostadas ñawirinankupaq.

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

, llamk'achkaspa autohide: false, huk wichq'ana ñit'inata yapanayki tiyan, llamk'aqkuna tostadata qarqunankupaq.

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

Uso

JavaScript nisqawan tostadas nisqakunata qallariy:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Suti Niraq Ñawpaqchasqa Willay
animación boolean nisqa chiqaq Huk CSS chinkachiy tikrayta tostadas kaqman churay
kikinmanta pakay boolean nisqa chiqaq Auto pakay chay tostadas
unayay yupay 500 Tostadas pakayta tardachiy (ms) .

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

$().toast(options)

Huk elemento huñusqaman huk tostadas hap'iqta k'askachin.

.toast('show')

Huk elementopa brindisnintam qawachin. Llamaqman kutimun manaraq tostadas chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.toastruway ruwakuchkaptin). Kay métodota makiwan waqyanayki tiyan, aswanpas brindisniyki mana rikuchinqachu.

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

.toast('hide')

Huk elementopa brindisninta pakaykun. Llamaqman kutimun manaraq tostadas chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.toastruway ruwakuchkaptin). Kay métodota makiwan waqyanayki tiyan sichus autohideruwarqanki false.

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

.toast('dispose')

Huk elementopa brindisninta pakaykun. Brindisniykiqa DOM nisqapi qhipakunqa ichaqa manañam rikuchinqachu.

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

Eventos nisqakuna

Tipo de Evento Willay
rikuchiy.bs.tostadas Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.tostadas Kay ruwayqa ruphaykun mayk’aqchus brindis ruwasqa kachkan chayta ruwaqpaq.
pakay.bs.tosta Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.tostadas Kay ruwayqa llamk'achisqa kanqa mayk'aq tostada llamk'aqmanta pakasqa kayta tukusqa. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})