in English

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>

Ko

Emboguejy pe botón iguýpe ehechauka hag̃ua peteĩ brindis (oñemohenda ore utilidad-kuéra ndive esquina inferior derecha-pe) oñeñomiva’ekue por defecto ndive .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>

Translúcido rehegua

Umi tostadas ningo translúcido michĩmi oñembojeheʼa hag̃ua pe oĩva iguýpe ndive.

<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="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 oñemoherakuã meme hag̃ua peteĩ unidad (atómica) ramo, reikuaauka rangue mbaꞌe oñemoambuevaꞌekue añoite (ikatúva ogueru apañuãi rembopyahúramo peteĩ pehẽngue tostada contenido-gui añoite, térã rehechauka ramo peteĩchagua contenido brindis rehegua peteĩ tiémpo rire). 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 rehechaukáva oñemoambuévo, eñangareko embopyahu hag̃ua pe tiempo de delayespera ikatu hag̃uáicha umi puruhára oguereko tiempo omoñe’ẽ hag̃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>

Técnicamente ikatu ramo jepe emoĩ control enfocables/accionables (ha’eháicha botón térã enlace adicional) nde brindis-pe, ani rejapo kóva umi tostadas autoocultar-pe g̃uarã. Jepe reme’ẽramo pe brindis-pe peteĩ tiempo de delayespera puku , umi oiporúva teclado ha tecnología pytyvõrã ikatu hasy ohupyty hag̃ua pe brindis itiempoitépe ojapo hag̃ua peteĩ mba’e (umi brindis ndohupytýigui enfoque ojehechauka jave). Oiméramo absolutamente reguerekova’erã ambue control, romomarandu reipuru haĝua peteĩ brindis orekóva autohide: false.

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