in English

Offcanvas

Crie barras laterais ocultas em seu projeto para navegação, carrinhos de compras e muito mais com algumas classes e nosso plug-in JavaScript.

Nesta página

Como funciona

Offcanvas é um componente da barra lateral que pode ser alternado via JavaScript para aparecer na borda esquerda, direita ou inferior da janela de visualização. Botões ou âncoras são usados como gatilhos que são anexados a elementos específicos que você alterna, e dataatributos são usados para invocar nosso JavaScript.

Offcanvas compartilha alguns dos mesmos códigos JavaScript como modais. Conceitualmente, eles são bastante semelhantes, mas são plugins separados.
Da mesma forma, algumas variáveis Sass de origem para estilos e dimensões do offcanvas são herdadas das variáveis do modal.
Quando mostrado, o offcanvas inclui um pano de fundo padrão que pode ser clicado para ocultar o offcanvas.
Semelhante aos modais, apenas um offcanvas pode ser mostrado por vez.

Atenção! Dado como o CSS lida com animações, você não pode usar marginou translateem um .offcanvaselemento. Em vez disso, use a classe como um elemento de encapsulamento independente.

O efeito de animação deste componente depende da prefers-reduced-motionconsulta de mídia. Consulte a seção de movimento reduzido de nossa documentação de acessibilidade .

Exemplos

Componentes fora da tela

Abaixo está um exemplo offcanvas que é mostrado por padrão (via .showon .offcanvas). Offcanvas inclui suporte para um cabeçalho com um botão de fechar e uma classe de corpo opcional para alguns arquivos padding. Sugerimos que você inclua cabeçalhos offcanvas com ações de dispensa sempre que possível ou forneça uma ação de dispensa explícita.

O conteúdo para o offcanvas vai aqui. Você pode colocar praticamente qualquer componente Bootstrap ou elementos personalizados aqui.

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

Demonstração ao vivo

Use os botões abaixo para mostrar e ocultar um elemento offcanvas via JavaScript que alterna a .showclasse em um elemento com a .offcanvasclasse.

.offcanvasoculta o conteúdo (padrão)
.offcanvas.showmostra o conteúdo

Você pode usar um link com o hrefatributo ou um botão com o data-bs-targetatributo. Em ambos os casos, o data-bs-toggle="offcanvas"é necessário.

Link com href

Algum texto como espaço reservado. Na vida real você pode ter os elementos que escolheu. Como, texto, imagens, 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>

Canal

Não há posicionamento padrão para componentes offcanvas, então você deve adicionar uma das classes modificadoras abaixo;

.offcanvas-startcoloca offcanvas à esquerda da janela de visualização (mostrado acima)
.offcanvas-endcoloca offcanvas à direita da janela de visualização
.offcanvas-topcoloca offcanvas no topo da janela de visualização
.offcanvas-bottomcoloca offcanvas na parte inferior da viewport

Experimente os exemplos superior, direito e inferior abaixo.

...

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

Pano de fundo

A rolagem do <body>elemento é desabilitada quando um offcanvas e seu pano de fundo estão visíveis. Use o data-bs-scrollatributo para alternar a <body>rolagem e data-bs-backdropalternar o pano de fundo.

Tente rolar o resto da página para ver essa opção em ação.

.....

Tente rolar o resto da página para ver essa opção em ação.

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

Acessibilidade

Como o painel offcanvas é conceitualmente uma caixa de diálogo modal, certifique-se de adicionar aria-labelledby="..."—referenciando o título offcanvas—ao arquivo .offcanvas. Observe que você não precisa adicionar role="dialog", pois já o adicionamos via JavaScript.

Sass

Variáveis

$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 plugin offcanvas utiliza algumas classes e atributos para lidar com o trabalho pesado:

.offcanvasesconde o conteúdo
.offcanvas.showmostra o conteúdo
.offcanvas-startesconde o offcanvas à esquerda
.offcanvas-endesconde o offcanvas à direita
.offcanvas-bottomesconde o offcanvas na parte inferior

Adicione um botão de dispensa com o data-bs-dismiss="offcanvas"atributo, que aciona a funcionalidade JavaScript. Certifique-se de usar o <button>elemento com ele para um comportamento adequado em todos os dispositivos.

Por atributos de dados

Alternar

Adicione data-bs-toggle="offcanvas"e um data-bs-targetou hrefao elemento para atribuir automaticamente o controle de um elemento offcanvas. O data-bs-targetatributo aceita um seletor CSS ao qual aplicar o offcanvas. Certifique-se de adicionar a classe offcanvasao elemento offcanvas. Se você quiser que ele seja aberto por padrão, adicione a classe adicional show.

Dispensar

A demissão pode ser obtida com o dataatributo em um botão dentro do offcanvas , conforme demonstrado abaixo:

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

ou em um botão fora do offcanvas usando o data-bs-targetconforme demonstrado abaixo:

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

Embora ambas as maneiras de dispensar um offcanvas sejam suportadas, lembre-se de que dispensar de fora um offcanvas não corresponde ao padrão de design de diálogo modal WAI-ARIA . Faça isso por sua conta e risco.

Por JavaScript

Ative manualmente com:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-bs-, como em data-bs-backdrop="".

Nome	Modelo	Predefinição	Descrição
`backdrop`	boleano	`true`	Aplique um pano de fundo no corpo enquanto o offcanvas estiver aberto
`keyboard`	boleano	`true`	Fecha o offcanvas quando a tecla Escape é pressionada
`scroll`	boleano	`false`	Permitir a rolagem do corpo enquanto o offcanvas estiver aberto

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações .

Ativa seu conteúdo como um elemento offcanvas. Aceita opções opcionais object.

Você pode criar uma instância offcanvas com o construtor, por exemplo:

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

Método	Descrição
`toggle`	Alterna um elemento offcanvas para mostrado ou oculto. Retorna ao chamador antes que o elemento offcanvas tenha realmente sido mostrado ou ocultado (ou seja, antes que o evento `shown.bs.offcanvas`ou `hidden.bs.offcanvas`ocorra).
`show`	Mostra um elemento offcanvas. Retorna ao chamador antes que o elemento offcanvas tenha sido realmente mostrado (ou seja, antes que o `shown.bs.offcanvas`evento ocorra).
`hide`	Oculta um elemento offcanvas. Retorna ao chamador antes que o elemento offcanvas tenha sido ocultado (ou seja, antes que o `hidden.bs.offcanvas`evento ocorra).
`getInstance`	Método estático que permite obter a instância offcanvas associada a um elemento DOM
`getOrCreateInstance`	Método estático que permite obter a instância offcanvas associada a um elemento DOM ou criar uma nova caso não tenha sido inicializada

Eventos

A classe offcanvas do Bootstrap expõe alguns eventos para conexão com a funcionalidade offcanvas.

Tipo de evento	Descrição
`show.bs.offcanvas`	Este evento é acionado imediatamente quando o `show`método de instância é chamado.
`shown.bs.offcanvas`	Este evento é acionado quando um elemento offcanvas se torna visível para o usuário (aguardará a conclusão das transições CSS).
`hide.bs.offcanvas`	Este evento é disparado imediatamente quando o `hide`método é chamado.
`hidden.bs.offcanvas`	Este evento é acionado quando um elemento offcanvas foi ocultado do usuário (aguardará a conclusão das transições CSS).

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

Offcanvas

Como funciona

Exemplos

Componentes fora da tela

Offcanvas

Demonstração ao vivo

Offcanvas

Canal

Parte superior off-canvas

Fora da tela à direita

Parte inferior da tela

Pano de fundo

Colorido com rolagem

Offcanvas com pano de fundo

Pano de fundo com rolagem

Acessibilidade

Sass

Variáveis

Uso

Por atributos de dados

Alternar

Dispensar

Por JavaScript

Opções

Métodos

Métodos e transições assíncronas

Eventos