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