Source

Tostadas rehegua

Emoinge marandu nde visitante-kuérape peteĩ brindis reheve, peteĩ marandu alerta ligero ha ndahasýiva personalizable.

Umi brindis haꞌehína umi marandu ligero ojejapóva oimitá hag̃ua umi marandu push rehegua ojeguerohoryvaꞌekue sistema operativo móvil ha escritorio rupive. Oñemopu’ã hikuái flexbox reheve, upévare ndahasýi oñealinea ha oñeposiciona haĝua.

Tembiecharã

Mba’e ojekuaava’erã ojepuru jave toast plugin:

  • Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .
  • Umi brindis ha’e opt-in por razones de rendimiento, upévare nde voi remoñepyrũva’erã .
  • Por favor, eñatendéke nde reimeha responsable reposiciona haĝua umi brindis.
  • Umi brindis oñemokañýta ijeheguiete neremombe'úiramo autohide: false.

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Tembiecharã

Pererĩva

Omokyre'ÿ haguã brindis extensible ha predecible, romomarandu peteî cabezal ha cuerpo. Umi iñakãrapu’ãva tostadas oipuru display: flex, ohejáva alineación ndahasýiva contenido rehegua ore utilidad margen ha flexbox rupive.

Umi brindis ha’e flexible reikotevẽháicha ha sa’ieterei oreko marcado oñeikotevẽva. Mínimo, roikotevẽ peteĩ elemento añoite oguereko haĝua nde contenido “tostado” ha romokyre’ỹ mbarete peteĩ botón de despido.

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

Umi tostadas ha’e avei translúcido’imi, upévare oñembojehe’a oimeraẽ mba’e ikatúva ojehecha ári. Umi kundahára oipytyvõva backdrop-filterCSS mba’ekuaarãme g̃uarã, ñañeha’ãta avei ñamo’ã umi elemento peteĩ brindis guýpe.

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

Oguerekóramo heta brindis, roñemoĩ por defecto ro’apilávo verticalmente peteĩ manera ojeleekuaávape.

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

Oñemohenda haguã

Emoĩ tostadas CSS personalizado reheve reikotevẽháicha. Yvategua akatúape ojepuru jepi marandurã, haꞌeháicha yvategua mbytegua. Oiméramo araka’eve rehechaukáta peteĩ brindis a la vez añoite, emoĩ umi estilo de posicionamiento oike pe .toast.

Ñepyrũrã Ojapóma 11 mins
Maitei, mundo! Kóva ha'e peteî marandu brindisado. 
<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>

Umi sistema omoheñóiva hetave marandu, ehecha eipuru peteĩ elemento envoltura ikatu hag̃uáicha oñembojeheꞌa pyaꞌe.

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

Ikatu avei rehupyty fantástico umi utilidad flexbox reheve remohenda hag̃ua tostadas horizontalmente ha/térã verticalmente.

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

Umi brindis oñeha’ã ha’e interrupción michĩva ne visitante térã usuario-kuérape, upévare reipytyvõ hag̃ua umi orekóva lector de pantalla ha tecnología oipytyvõva ojoguáva, embojereva’erã nde brindis peteĩ aria-liveregión-pe . Umi ñemoambue región oikovévape (haꞌeháicha oñeinyecta/oñembopyahu hag̃ua peteĩ componente brindis rehegua) oñemoherakuã ijeheguiete umi pantalla moñeꞌerã rupive natekotevẽiramo oñemomýi puruhára enfoque térã ambue hendáicha oñeinterrumpi puruhárape. Avei, emoinge aria-atomic="true"easegura hag̃ua tostada tuichakue akóinte oñemoherakuã hag̃ua peteĩ unidad (atómica) ramo, reikuaauka rangue mbaꞌepa oñemoambue (ikatúva ogueru apañuãi rembopyahúramo peteĩ pehẽngue brindis contenido-gui añoite, térã rehechauka ramo peteĩchagua contenido brindis rehegua at peteĩ punto de tiempo riregua). Pe marandu oñeikotevẽva iñimportánteramo pe proceso-pe g̃uarã, techapyrãramo peteĩ lista de errores peteĩ formulario-pe g̃uarã, upéicharamo eipuru componente alerta reheguatostadas rangue.

Ñañamindu’u pe región en vivo oikotevẽha oĩ presente pe marcado - pe oñegenera térã oñembopyahu mboyve pe brindis. Emoheñóiramo dinámicamente mokõivéva peteĩ jave ha einyecta página-pe, generalmente noñemoherakuãmo’ãi umi tecnología oipytyvõva rupive.

Avei tekotevẽ readapta pe roleha aria-livenivel odependéva pe contenido rehe. Ha’éramo peteĩ marandu iñimportánteva peteĩ jejavyicha, eipuru role="alert" aria-live="assertive", ambue hendáicha eipuru umi role="status" aria-live="polite"atributo.

Pe contenido rehechaukava’ekue oñemoambuévo, katuete embopyahu pe tiempo de delayespera easegura haĝua tapichakuéra oguerekoha tiempo suficiente omoñe’ẽ haĝua pe brindis.

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

Eipuru jave autohide: false, emoĩva’erã peteĩ botón ñemboty rehegua ikatu hag̃uáicha umi puruhára omboyke pe brindis.

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

Jeporu rehegua

Emoñepyrũ tostadas JavaScript rupive:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Téra Hesegua Upevakuére Techaukaha
animación rehegua booleano rehegua teete Emoĩ peteĩ CSS descoloramiento transición pe brindis-pe
autooñomi haguã booleano rehegua teete Auto omokañy pe brindis
mbegue papapy 500 Retraso omokañy haguã brindis (ms) .

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiapokue haꞌehína asíncrono ha oñepyrũ peteĩ jehaipyre . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

$().toast(options)

Ombojoaju peteĩ tostadas manejador peteĩ elemento colección rehe.

.toast('show')

Oikuaauka peteî elemento brindis. Ojevy pe ohenóivape ojehechauka mboyve añetehápe pe brindis (heꞌiséva oiko mboyve pe shown.bs.toastmbaꞌe ojehúva). Tekotevẽ rehenói manualmente ko método-pe, upéva rangue nde brindis ndohechaukái.

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

.toast('hide')

Oñomi peteĩ elemento brindis. Ojevy pe ohenóivape oñeñomi mboyve añetehápe pe brindis (heꞌiséva oiko mboyve pe hidden.bs.toastmbaꞌe ojehúva). Tekotevẽ rehenói manualmente ko método rejapo autohideramo false.

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

.toast('dispose')

Oñomi peteĩ elemento brindis. Nde brindis opytáta DOM-pe ha katu ndohechaukamo’ãvéima.

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

Umi mba’e oikóva

Tipo de Evento rehegua Techaukaha
ohechauka.bs.tostadas Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.tostadas Ko evento oñembopu ojehecha rire pe brindis oiporúvape.
omokañy.bs.tostadas Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
kañymby.bs.tostadas Ko evento oñembopu pe brindis oñemokañypa rire pe oiporúvagui. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})