Offcanvas

Cree barras laterales ocultas en su proyecto para navegación, carritos de compras y más con algunas clases y nuestro complemento de JavaScript.

En esta página

Cómo funciona

Offcanvas es un componente de la barra lateral que se puede alternar a través de JavaScript para que aparezca desde el borde izquierdo, derecho o inferior de la ventana gráfica. Los botones o anclas se usan como activadores que se adjuntan a elementos específicos que alterna, y datalos atributos se usan para invocar nuestro JavaScript.

Offcanvas comparte parte del mismo código JavaScript que los modales. Conceptualmente, son bastante similares, pero son complementos separados.
Del mismo modo, algunas variables Sass de origen para los estilos y dimensiones de offcanvas se heredan de las variables del modal.
Cuando se muestra, offcanvas incluye un fondo predeterminado en el que se puede hacer clic para ocultar el offcanvas.
De manera similar a los modales, solo se puede mostrar un lienzo a la vez.

¡Aviso! Dada la forma en que CSS maneja las animaciones, no puede usar margino translateen un .offcanvaselemento. En su lugar, utilice la clase como un elemento envolvente independiente.

El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Ejemplos

Componentes fuera del lienzo

A continuación se muestra un ejemplo fuera del lienzo que se muestra de forma predeterminada (a través .showde .offcanvas). Offcanvas incluye compatibilidad con un encabezado con un botón de cierre y una clase de cuerpo opcional para algunos archivos padding. Le sugerimos que incluya encabezados fuera del lienzo con acciones de descarte siempre que sea posible, o proporcione una acción de descarte explícita.

El contenido del offcanvas va aquí. Puede colocar casi cualquier componente de Bootstrap o elementos personalizados aquí.

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Demo en vivo

Use los botones a continuación para mostrar y ocultar un elemento fuera del lienzo a través de JavaScript que alterna la .showclase en un elemento con la .offcanvasclase.

.offcanvasoculta el contenido (predeterminado)
.offcanvas.showmuestra contenido

Puede usar un enlace con el hrefatributo o un botón con el data-bs-targetatributo. En ambos casos, data-bs-toggle="offcanvas"se requiere el.

Enlace con href

Algún texto como marcador de posición. En la vida real puedes tener los elementos que hayas elegido. Me gusta, texto, imágenes, listas, etc.

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Colocación

No hay una ubicación predeterminada para los componentes fuera del lienzo, por lo que debe agregar una de las clases de modificadores a continuación;

.offcanvas-startcoloca offcanvas a la izquierda de la ventana gráfica (que se muestra arriba)
.offcanvas-endcoloca offcanvas a la derecha de la ventana gráfica
.offcanvas-topcoloca offcanvas en la parte superior de la ventana gráfica
.offcanvas-bottomcoloca offcanvas en la parte inferior de la ventana gráfica

Pruebe los ejemplos superior, derecho e inferior a continuación.

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Fondo

El desplazamiento del <body>elemento está deshabilitado cuando se ven un lienzo fuera del lienzo y su fondo. Use el data-bs-scrollatributo para alternar el <body>desplazamiento y data-bs-backdroppara alternar el fondo.

Intente desplazarse por el resto de la página para ver esta opción en acción.

.....

Intente desplazarse por el resto de la página para ver esta opción en acción.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Accesibilidad

Dado que el panel fuera del lienzo es conceptualmente un cuadro de diálogo modal, asegúrese de agregar aria-labelledby="..."—haciendo referencia al título fuera del lienzo— a .offcanvas. Tenga en cuenta que no necesita agregar role="dialog", ya que ya lo agregamos a través de JavaScript.

Hablar con descaro a

Variables

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

Uso

El complemento offcanvas utiliza algunas clases y atributos para manejar el trabajo pesado:

.offcanvasoculta el contenido
.offcanvas.showmuestra el contenido
.offcanvas-startoculta el lienzo a la izquierda
.offcanvas-endoculta el lienzo a la derecha
.offcanvas-bottomoculta el lienzo en la parte inferior

Agregue un botón de descartar con el data-bs-dismiss="offcanvas"atributo, que activa la funcionalidad de JavaScript. Asegúrese de usar el <button>elemento con él para un comportamiento adecuado en todos los dispositivos.

A través de atributos de datos

Agregue data-bs-toggle="offcanvas"y a data-bs-targeto hrefal elemento para asignar automáticamente el control de un elemento fuera del lienzo. El data-bs-targetatributo acepta un selector de CSS para aplicar el offcanvas. Asegúrese de agregar la clase offcanvasal elemento offcanvas. Si desea que se abra de forma predeterminada, agregue la clase adicional show.

A través de JavaScript

Habilitar manualmente con:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-bs-, como en data-bs-backdrop="".

Nombre	Escribe	Defecto	Descripción
`backdrop`	booleano	`true`	Aplique un fondo en el cuerpo mientras el lienzo está abierto
`keyboard`	booleano	`true`	Cierra el lienzo cuando se presiona la tecla Escape.
`scroll`	booleano	`false`	Permitir el desplazamiento del cuerpo mientras offcanvas está abierto

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información .

Activa su contenido como un elemento fuera del lienzo. Acepta opciones opcionales object.

Puede crear una instancia fuera del lienzo con el constructor, por ejemplo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Método	Descripción
`toggle`	Alterna un elemento fuera del lienzo para que se muestre u oculte. Vuelve a la persona que llama antes de que el elemento offcanvas se haya mostrado u ocultado (es decir, antes de que ocurra el evento `shown.bs.offcanvas`o ).`hidden.bs.offcanvas`
`show`	Muestra un elemento fuera del lienzo. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento offcanvas (es decir, antes de `shown.bs.offcanvas`que ocurra el evento).
`hide`	Oculta un elemento fuera del lienzo. Vuelve a la persona que llama antes de que el elemento offcanvas se haya ocultado (es decir, antes de `hidden.bs.offcanvas`que ocurra el evento).
`getInstance`	Método estático que le permite obtener la instancia fuera del lienzo asociada con un elemento DOM
`getOrCreateInstance`	Método estático que le permite obtener la instancia fuera del lienzo asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

Eventos

La clase offcanvas de Bootstrap expone algunos eventos para conectarse a la funcionalidad offcanvas.

Tipo de evento	Descripción
`show.bs.offcanvas`	Este evento se activa inmediatamente cuando `show`se llama al método de instancia.
`shown.bs.offcanvas`	Este evento se activa cuando un elemento fuera del lienzo se hace visible para el usuario (esperará a que se completen las transiciones de CSS).
`hide.bs.offcanvas`	Este evento se activa inmediatamente cuando `hide`se llama al método.
`hidden.bs.offcanvas`	Este evento se activa cuando un elemento fuera del lienzo se ha ocultado al usuario (esperará a que se completen las transiciones de CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Cómo funciona

Ejemplos

Componentes fuera del lienzo

Offcanvas

Demo en vivo

Offcanvas

Colocación

Top de lona

Offcanvas a la derecha

Parte inferior de lona

Fondo

Coloreado con desplazamiento

Offcanvas con fondo

Telón de fondo con desplazamiento

Accesibilidad

Hablar con descaro a

Variables

Uso

A través de atributos de datos

A través de JavaScript

Opciones

Métodos

Transiciones y métodos asíncronos

Eventos