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.
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 data
los 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 margin
o translate
en un .offcanvas
elemento. En su lugar, utilice la clase como un elemento envolvente independiente.
prefers-reduced-motion
consulta 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 .show
de .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.
Offcanvas
<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 .show
clase en un elemento con la .offcanvas
clase.
.offcanvas
oculta el contenido (predeterminado).offcanvas.show
muestra contenido
Puede usar un enlace con el href
atributo o un botón con el data-bs-target
atributo. En ambos casos, data-bs-toggle="offcanvas"
se requiere el.
Offcanvas
<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-start
coloca offcanvas a la izquierda de la ventana gráfica (que se muestra arriba).offcanvas-end
coloca offcanvas a la derecha de la ventana gráfica.offcanvas-top
coloca offcanvas en la parte superior de la ventana gráfica.offcanvas-bottom
coloca offcanvas en la parte inferior de la ventana gráfica
Pruebe los ejemplos superior, derecho e inferior a continuación.
Top de lona
<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>
Offcanvas a la derecha
<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>
Parte inferior de lona
<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-scroll
atributo para alternar el <body>
desplazamiento y data-bs-backdrop
para alternar el fondo.
Coloreado con desplazamiento
Intente desplazarse por el resto de la página para ver esta opción en acción.
Offcanvas con fondo
.....
Telón de fondo con desplazamiento
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:
.offcanvas
oculta el contenido.offcanvas.show
muestra el contenido.offcanvas-start
oculta el lienzo a la izquierda.offcanvas-end
oculta el lienzo a la derecha.offcanvas-bottom
oculta 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-target
o href
al elemento para asignar automáticamente el control de un elemento fuera del lienzo. El data-bs-target
atributo acepta un selector de CSS para aplicar el offcanvas. Asegúrese de agregar la clase offcanvas
al 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...
})