Tostadas rehegua

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

Ko páhinape

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:

Umi brindis ha’e opt-in por razones de rendimiento, upévare nde voi remoñepyrũva’erã .
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.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Ymave, ore guión-kuéra omoĩ dinámicamente pe .hideclase omokañymbaite hag̃ua peteĩ brindis (con display:none, rangue con añónte opacity:0). Péva ko'ágã natekotevêvéima. Ha katu, compatibilidad tapykue gotyo g̃uarã, ñande script osegíta ombojere mbo’esyry (jepémo natekotevẽi práctico hese) ambue versión tuichavéva peve.

Tembiecharã oikovéva

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

Hello, world! This is a toast message.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Roipuru ko’ã JavaScript romoñepyrũ hag̃ua ore demostración tostadas en vivo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translúcido rehegua

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

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilamiento rehegua

Ikatu remoĩ apila umi tostadas rembojere rupi peteĩ mba’yru tostadas-pe, upéva omoĩta verticalmente michĩmi espaciado.

Hecha? Péicha avei.

Akã yvate, umi brindis oñeapiláta automáticamente

html rehegua

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenido personalizado rehegua

Emohenda nde tostadas eipe’ávo umi subcomponente, emohenda porãvo umi utilidad reheve , térã emoĩvo nde marcado tee. Ko’ápe rojapo peteĩ tostadas isensíllova roipe’ávo pe por defecto .toast-header, romoĩ peteĩ icono kañyrã jeporupyre Bootstrap Icons -gui , ha roipuru peteĩva flexbox purupyrã romohenda hag̃ua ñemohenda.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Ikatu avei remoĩ umi control ha componente adicional umi brindis-pe.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Umi esquema de colores rehegua

Oñemopu’ãvo techapyrã yvateguáre, ikatu ejapo opaichagua esquema de colores tostadas ore utilidad color ha fondo rehegua rupive. Ko’ápe romoĩkuri .text-bg-primarype .toast, ha upéi romoĩve .btn-close-whiteore botón ñembotyhápe. Peteĩ borde crisp-pe g̃uarã, jaipe’a pe borde por defecto .border-0.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Oñemohenda haguã

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

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

Hecha? Péicha avei.

Akã yvate, umi brindis oñeapiláta automáticamente

html rehegua

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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ĩ pe marca - pe ojejapo térã oñembopyahu mboyve pe brindis. Egenera ramo 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évo 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-bs-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.

Maitei, mundo! Kóva ha'e peteî marandu brindisado.

html rehegua

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Oikeháicha Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi tostadas koꞌág̃a oipuru umi mbaꞌekuaarã CSS local on .toast-pe oñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass mba’ekuaarã

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Jeporu rehegua

Emoñepyrũ umi brindis JavaScript rupive:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Umi mba’e omoñepyrũva

Despido ikatu ojehupyty dataatributo reheve peteĩ botón brindis ryepýpe ojehechaukaháicha ko’ápe:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

térã peteĩ botón oĩva pe brindis okaháre reiporúvo pe data-bs-targetojehechaukaháicha koʼápe:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra	Hesegua	Upevakuére	Techaukaha
`animation`	booleano rehegua	`true`	Emoĩ peteĩ CSS descoloramiento transición pe brindis-pe.
`autohide`	booleano rehegua	`true`	Oñomi automáticamente pe brindis pe retraso rire.
`delay`	papapy	`5000`	Oñembotapykue milisegundos-pe oñeñomi mboyve pe brindis.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . 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 .

Tapereko	Techaukaha
`dispose`	Oñomi peteĩ elemento brindis. Nde brindis opytáta DOM-pe ha katu ndohechaukamo’ãvéima.
`getInstance`	Método estático ohejáva ndéve rehupyty pe instancia tostadas ojoajúva peteĩ elemento DOM rehe. Techapyrã: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Ombojevy peteĩ instancia tostadas Bootstrap rehegua.
`getOrCreateInstance`	Método estático ohejáva ndéve rehupyty instancia tostadas ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu, en caso noñemboguatáiramo. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Ombojevy peteĩ instancia tostadas Bootstrap rehegua.
`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.toast`mbaꞌe ojehúva). Tekotevẽ rehenói manualmente ko método rejapo `autohide`ramo `false`.
`isShown`	Ombojevy peteĩ booleano heꞌiháicha tostadas visibilidad estado.
`show`	Oikuaauka peteî elemento brindis. Ojevy pe ohenóivape ojehechauka mboyve añetehápe pe brindis (heꞌiséva oiko mboyve pe `shown.bs.toast`mbaꞌe ojehúva). Tekotevẽ rehenói manualmente ko método-pe, upéva rangue nde brindis ndohechaukái.

Umi mba’e oikóva

Jeguerohyha	Techaukaha
`hide.bs.toast`	Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe `hide`método instancia rehegua.
`hidden.bs.toast`	Ko evento oñembopu pe brindis oñemokañypa rire pe oiporúvagui.
`show.bs.toast`	Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave `show`método instancia rehegua.
`shown.bs.toast`	Ko evento oñembopu ojehecha rire pe brindis oiporúvape.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})