Introdução
O BootstrapVue implementou recentemente o componente de Sidebar. 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:
<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>
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.
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
- 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. Isso possibilita você 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. Com eles você pode personalizar a abertura e fechamento do menu. Algumas opções são colocar a abertura e fechamento por uma função ou por atalhos de teclado. Essa funcionalidade pode facilitar a vida e melhorar a experiência 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:
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 🙂
