Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Tostadas rehegua

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

Ko páhinape

Umi tostadas 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.

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

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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

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

<div class="toast-container">
  <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.

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

<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ĩ .bg-primaryha .text-whitepe .toast, ha upéi romoĩ .btn-close-whiteore botón ñembotyhápe. Peteĩ borde crisp-pe g̃uarã, jaipe’a pe borde por defecto .border-0.

<div class="toast align-items-center text-white 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.

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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.

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

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

Sass rehegua

Variables rehegua

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Jeporu rehegua

Emoñepyrũ umi brindis JavaScript rupive:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, 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-bs-, -peguáicha data-bs-animation="".

Téra Hesegua Upevakuére Techaukaha
animation booleano rehegua true Emoĩ peteĩ CSS descoloramiento transición pe brindis-pe
autohide booleano rehegua true Auto omokañy pe brindis
delay papapy 5000 Retraso omokañy haguã brindis (ms) .

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 .

hechauka

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.

toast.show()

mongañy

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.

toast.hide()

omboyke haguã

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

toast.dispose()

ohupytyInstancia

Método estático ohejáva ndéve rehupyty hag̃ua instancia scrollspy ojoajúva peteĩ elemento DOM rehe

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

ohupytyTérãEjapoInstancia

Método estático ohejáva ndéve rehupyty instancia scrollspy ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Umi mba’e oikóva

Tipo de evento rehegua Techaukaha
show.bs.toast Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
shown.bs.toast Ko evento oñembopu ojehecha rire pe brindis oiporúvape.
hide.bs.toast Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
hidden.bs.toast Ko evento oñembopu pe brindis oñemokañypa rire pe oiporúvagui. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})