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.

Nesta páxina

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 dataos 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 marginnin translatenun .offcanvaselemento. En vez diso, use a clase como un elemento de envoltura independente.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta 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 .showde 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.

O contido para o offcanvas vai aquí. Podes colocar case calquera compoñente Bootstrap ou 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 directo

Use os botóns de abaixo para mostrar e ocultar un elemento fóra do lenzo mediante JavaScript que alterna a .showclase a un elemento coa .offcanvasclase.

.offcanvasoculta o contido (predeterminado)
.offcanvas.showmostra o contido

Podes usar unha ligazón co hrefatributo ou un botón co data-bs-targetatributo. En ambos os casos, data-bs-toggle="offcanvas"é necesario.

Enlace con href

Algún texto como marcador de posición. Na vida real podes ter os elementos que escolleches. Gústame, texto, imaxes, 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

Non hai unha colocación predeterminada para os compoñentes offcanvas, polo que debes engadir unha das clases modificadoras a continuación;

.offcanvas-startcoloca fóra do lenzo á esquerda da ventana gráfica (mostrada arriba)
.offcanvas-endcoloca fóra do lenzo á dereita da ventana gráfica
.offcanvas-topcoloca fóra do lenzo na parte superior da ventana gráfica
.offcanvas-bottomcoloca fóra do lenzo na parte inferior da ventana gráfica

Proba os exemplos superior, dereito e inferior que aparecen 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>

Panón de fondo

O desprazamento do <body>elemento está desactivado cando un fóra do lenzo e o seu fondo son visibles. Use o data-bs-scrollatributo para alternar o <body>desprazamento e data-bs-backdroppara cambiar o fondo.

Proba a desprazarte polo resto da páxina para ver esta opción en acción.

.....

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">Backdrop 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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Uso

O complemento offcanvas utiliza algunhas clases e atributos para xestionar o traballo pesado:

.offcanvasoculta o contido
.offcanvas.showmostra o contido
.offcanvas-startesconde o off lenzo da esquerda
.offcanvas-endesconde o off lenzo á dereita
.offcanvas-bottomoculta o off-canvas 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

Alterna

Engade data-bs-toggle="offcanvas"e a data-bs-targetou hrefao elemento para asignar automaticamente o control dun elemento fóra do lenzo. O data-bs-targetatributo acepta un selector CSS para aplicar o offcanvas. Asegúrate de engadir a clase offcanvasao elemento offcanvas. Se queres que se abra por defecto, engade a clase adicional show.

Descartar

A destitución pódese conseguir co dataatributo nun botón dentro do offcanvas como se demostra a continuación:

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

ou nun botón fóra do lenzo usando o data-bs-targetcomo se mostra a continuación:

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

Aínda que se admiten ambas as dúas formas de descartar un offcanvas, ten en conta que excluír un offcanvas desde fóra non coincide co patrón de deseño do diálogo modal WAI-ARIA . Fai isto baixo o teu propio risco.

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

Off lenzo

Cómo funciona

Exemplos

Compoñentes offcanvas

Off lenzo

Demo en directo

Off lenzo

Colocación

Top offcanvas

Off canvas dereita

Fondo fóra de lona

Panón de fondo

Coloreado con desprazamento

Off lenzo con fondo

Fondo con desprazamento

Accesibilidade

Sass

Variables

Uso

A través de atributos de datos

Alterna

Descartar

Vía JavaScript

Opcións

Métodos

Métodos asíncronos e transicións

Eventos