Pular para o conteúdo

Programando Soluções

BootstrapVue Sidebar menu

  • por
sidebar

Introdução

O BootstrapVue implementou recentemente o componente de Sidebar, e com ele é possível criar menus laterais com diversas variações e certamente, pelo menis uma delas vai agregar no seu projeto.

Exemplo básico

Para configurar o sidebar, é necessário ter o BootstrapVue instalado no projeto, com isso é só utilizar o componente <b-sidebar> que ele já estará funcionando, um código de exemplo seria:

Neste exemplo, na linha 2 tem o botão que irá disparar o evento de clique para abrir o Sidebar. Na linha 3 tem o componente de Sidebar com um identificador, uma prop de Titulo e um shadow para aplicar um sombreamento.

<div>
    <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>

Estilizações

O Sidebar pode receber muitos estilos diferentes, o que abre um leque maior de opções que se pode configurar e ter resultados diferentes.

Título

Para configurar o título do Sidebar, é necessário passar uma prop para o componente, essa prop pode ser uma string com o titulo hardcode ou uma prop interpretada através do v-bind

Exemplo hardcode:

<b-sidebar id="sidebar-1" title="Sidebar">

Exemplo interpretado:

<b-sidebar id="sidebar-1" :title="title">

Placement

É possível personalizar o lado no qual o Sidebar deve aparecer, por padrão, ele sempre virá na esquerda, caso queira fazer ele aparecer na direita da tela utilize o right:

<b-sidebar id="sidebar-1" title="Meu Site" right>

Variant

Outra possibilidade, é trocar a cor de fundo e das fontes do menu, com isso você consegue personalizar de maneira a ficar com o padrão de cores do seu sistema. Exemplo para deixar o fundo preto com a fonte cor branca:

<b-sidebar title="Meu Site" bg-variant="dark" text-variant="light">

Backdrop

Um dos efeitos que eu mais gosto, é o backdrop, com ele é possível deixar o resto do sistema de cor diferente enquanto o menu está aberto, ele pode ser configurado com todas as cores do BootstrapVue, para configurar o backdrop com a cor preta:

<b-sidebar title="Meu Site" backdrop-variant="dark" backdrop>

Eventos

Além das variações, o Sidebar emite eventos que podem ser configurados.

shown: Evento emitido quando o menu é aberto.

hidden: Evento emitido quando o menu é fechado.

change: Evento emitido quando há alteração de estado do menu, ou seja, de aberto para fechado, ou fechado para aberto.

Os eventos podem ser utilizados por exemplo para melhorar a usabilidade do sistema, onde você pode forçar a abertura do menu dentro de uma função ou até mesmo criar a abertura e fechamento do menu por atalhos do teclado, facilitando assim a vida do seu usuário.

Acessibilidade

Por padrão, o Sidebar traz dois itens principais de acessibilidade no sistema.

O primeiro é, quando o menu é aberto, por padrão, o foco do componente passa a ser ele, e com isso o usuário passa a poder manipulá-lo utilizando somente o teclado.

O segundo item é que quando o menu está aberto, por padrão o usuário pode fechá-lo utilizando a tecla esc do teclado, facilitando também o uso.

Para saber mais

Eu gravei um vídeo sobre o bootstrap-vue sidebar, onde eu mostro algumas variações que ele tem e até um projeto Prático mostrando como configurar e estilizar, vale a pena dar uma olhada:

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Conclusão

Este componente é um dos que já tem no BootstrapVue, porém não tem no Bootstrap, e isso mostra a evolução do BootstrapVue, buscando sempre trazer componentes que são realmente bastante utilizados no dia-a-dia de maneira mais prática de ser configurado e utilizado.

Espero que tenham gostado, até o próximo post 🙂

Referências

https://bootstrap-vue.org/docs/components/table

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok