Off lenzo
Crea barras laterais ocultas no teu proxecto para navegar, carros da compra e moito máis con algunhas clases e o noso complemento de JavaScript.
Cómo funciona
Offcanvas é un compoñente da barra lateral que se pode alternar mediante JavaScript para que apareza dende o bordo esquerdo, dereito ou inferior da ventana gráfica. Os botóns ou áncoras utilízanse como disparadores que se anexan a elementos específicos que alternas, e data
os atributos úsanse para invocar o noso JavaScript.
- Offcanvas comparte parte do mesmo código JavaScript que os modais. Conceptualmente, son bastante similares, pero son complementos separados.
- Do mesmo xeito, algunhas variables de orixe Sass para os estilos e dimensións de offcanvas herdanse das variables do modal.
- Cando se mostra, offcanvas inclúe un fondo predeterminado no que se pode facer clic para ocultar o offcanvas.
- Do mesmo xeito que os modais, só se pode mostrar un offcanvas á vez.
Aviso! Dado como CSS manexa as animacións, non pode usar margin
nin translate
nun .offcanvas
elemento. En vez diso, use a clase como un elemento de envoltura independente.
prefers-reduced-motion
consulta multimedia. Consulta a
sección de movemento reducido da nosa documentación de accesibilidade .
Exemplos
Compoñentes offcanvas
A continuación móstrase un exemplo fóra do lenzo que se mostra por defecto (a través .show
de on .offcanvas
). Offcanvas inclúe soporte para un encabezado cun botón de peche e unha clase de corpo opcional para algúns padding
. Suxerímoslle que inclúas cabeceiras fóra do lenzo con accións de exclusión sempre que sexa posible ou proporciones unha acción de exclusión explícita.
Off lenzo
<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 directo
Use os botóns de abaixo para mostrar e ocultar un elemento fóra do lenzo mediante JavaScript que alterna a .show
clase a un elemento coa .offcanvas
clase.
.offcanvas
oculta o contido (predeterminado).offcanvas.show
mostra o contido
Podes usar unha ligazón co href
atributo ou un botón co data-bs-target
atributo. En ambos os casos, data-bs-toggle="offcanvas"
é necesario.
Off lenzo
<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
Non hai unha colocación predeterminada para os compoñentes offcanvas, polo que debes engadir unha das clases modificadoras a continuación;
.offcanvas-start
coloca fóra do lenzo á esquerda da ventana gráfica (mostrada arriba).offcanvas-end
coloca fóra do lenzo á dereita da ventana gráfica.offcanvas-top
coloca fóra do lenzo na parte superior da ventana gráfica.offcanvas-bottom
coloca fóra do lenzo na parte inferior da ventana gráfica
Proba os exemplos superior, dereito e inferior que aparecen a continuación.
Parte superior 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>
Off canvas dereita
<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>
Fondo fóra 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
O desprazamento do <body>
elemento está desactivado cando un fóra do lenzo e o seu fondo son visibles. Use o data-bs-scroll
atributo para alternar o <body>
desprazamento e data-bs-backdrop
para cambiar o fondo.
Coloreado con desprazamento
Proba a desprazarte polo resto da páxina para ver esta opción en acción.
Off lenzo con fondo
.....
Fondo con desprazamento
Proba a desprazarte polo resto da páxina 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>
Accesibilidade
Dado que o panel offcanvas é conceptualmente un diálogo modal, asegúrate de engadir aria-labelledby="..."
, facendo referencia ao título offcanvas, a .offcanvas
. Teña en conta que non precisa engadir role="dialog"
xa que xa o engadimos mediante JavaScript.
Sass
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
O complemento offcanvas utiliza algunhas clases e atributos para xestionar o traballo pesado:
.offcanvas
oculta o contido.offcanvas.show
mostra o contido.offcanvas-start
esconde o off lenzo da esquerda.offcanvas-end
esconde o off lenzo á dereita.offcanvas-bottom
esconde o off lenzo na parte inferior
Engade un botón de exclusión co data-bs-dismiss="offcanvas"
atributo, que activa a funcionalidade de JavaScript. Asegúrate de usar o <button>
elemento con el para un comportamento correcto en todos os dispositivos.
A través de atributos de datos
Engade data-bs-toggle="offcanvas"
e a data-bs-target
ou href
ao elemento para asignar automaticamente o control dun elemento fóra do lenzo. O data-bs-target
atributo acepta un selector CSS para aplicar o offcanvas. Asegúrate de engadir a clase offcanvas
ao elemento offcanvas. Se queres que se abra por defecto, engade a clase adicional show
.
Vía JavaScript
Habilitar manualmente con:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opcións
As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-bs-
, como en data-bs-backdrop=""
.
Nome | Tipo | Por defecto | Descrición |
---|---|---|---|
backdrop |
booleano | true |
Aplique un fondo ao corpo mentres está aberto o offcanvas |
keyboard |
booleano | true |
Pecha o offcanvas cando se preme a tecla Esc |
scroll |
booleano | false |
Permitir o desprazamento do corpo mentres está aberto fóra do lenzo |
Métodos
Métodos asíncronos e transicións
Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .
Consulte a nosa documentación de JavaScript para obter máis información .
Activa o teu contido como elemento fóra do lenzo. Acepta opcións opcionais object
.
Podes crear unha instancia offcanvas co construtor, por exemplo:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Método | Descrición |
---|---|
toggle |
Alterna un elemento fóra do lenzo para mostrar ou ocultar. Volve ao interlocutor antes de que o elemento offcanvas fose realmente mostrado ou escondido (é dicir, antes de que se produza o evento shown.bs.offcanvas ou ).hidden.bs.offcanvas |
show |
Mostra un elemento fóra do lenzo. Volve ao interlocutor antes de que se amosara o elemento offcanvas (é dicir, antes de shown.bs.offcanvas que se produza o evento). |
hide |
Oculta un elemento fóra do lenzo. Volve ao interlocutor antes de que o elemento offcanvas fose realmente oculto (é dicir, antes de hidden.bs.offcanvas que ocorra o evento). |
getInstance |
Método estático que che permite obter a instancia offcanvas asociada a un elemento DOM |
getOrCreateInstance |
Método estático que che permite asociar a instancia offcanvas cun elemento DOM ou crear un novo no caso de que non se inicializou |
Eventos
A clase offcanvas de Bootstrap expón algúns eventos para conectarse á funcionalidade offcanvas.
Tipo de evento | Descrición |
---|---|
show.bs.offcanvas |
Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. |
shown.bs.offcanvas |
Este evento desenvólvese cando un elemento fóra do lenzo se fixo visible para o usuario (esperará a que se completen as transicións CSS). |
hide.bs.offcanvas |
Este evento desenvólvese inmediatamente cando hide se chamou ao método. |
hidden.bs.offcanvas |
Este evento desenvólvese cando se ocultou ao usuario un elemento offcanvas (esperará a que se completen as transicións CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})