Introdução
O list-group é um componente flexível e que pode ser utilizado principalmente de duas formas, exibir conteúdos em série, uma lista mesmo, ou também para criar menus de navegação.
É um componente que da para ser utilizado de maneira simples, e também possui algumas personalizações para atender melhor ao que o sistema precisa, dependendo da ocasião.
Para todos os exemplos abaixo, será necessário ter uma instalação do BootstrapVue no projeto, caso queira ver como fazer, clique aqui.
Lista padrão
A lista padrão já tem o seu estilo próprio e é mais indicado para ser usado quando deseja exibir uma lista de itens na tela.
O componente consiste em criar um “grupo” e dentro dele colocar os “itens” da lista, dessa forma:
<b-list-group>
<b-list-group-item>Item 1</b-list-group-item>
<b-list-group-item>Item 2</b-list-group-item>
<b-list-group-item>Item 3</b-list-group-item>
</b-list-group>
Repare que todos os itens da lista ficam dentro de uma tag b-list-group, para que a lista seja formada corretamente, este é o resultado:
Item ativo
É possível adicionar uma prop para indicar que um item da lista está ativo, é normal utilizar esse recurso em menus para indicar a tela atual do usuário.
<b-list-group>
<b-list-group-item>Item 1</b-list-group-item>
<b-list-group-item active>Item 2</b-list-group-item>
<b-list-group-item>Item 3</b-list-group-item>
</b-list-group>
Item desabilitado
Esse recurso também é utilizado por prop, e ao colocá-lo o item fica com um estilo diferente, e caso esteja utilizando links (mais para frente nesse artigo), o usuário fica sem poder clicar sobre.
<b-list-group>
<b-list-group-item disabled>Item 1</b-list-group-item>
<b-list-group-item>Item 2</b-list-group-item>
<b-list-group-item>Item 3</b-list-group-item>
</b-list-group>
Links nos itens
Como uma das formas de utilizar o list-group é como menu de navegação, então é bem tranquilo para adicionar links para a navegação do usuário.
Os links podem ser um href comum, ou até mesmo uma rota que já está definida no vue-router.
<b-list-group>
<b-list-group-item href="#">Item 1</b-list-group-item>
<b-list-group-item to="#">Item 2</b-list-group-item>
<b-list-group-item>Item 3</b-list-group-item>
</b-list-group>
Estilo de botão
Os itens da lista ficam com um estilo padrão, ao passar o mouse nada acontece inicialmente, é uma lista comum. Porém é possível fazer com que os itens tenham o estilo de um botão, e isso pode ser bom porque o usuário ao passar o mouse por cima, os itens ficam com um efeito de hover e também podem ser clicáveis.
<b-list-group>
<b-list-group-item button>Item 1</b-list-group-item>
<b-list-group-item button>Item 2</b-list-group-item>
<b-list-group-item button>Item 3</b-list-group-item>
</b-list-group>
Lista com cores
É possível adicionar cores nos itens da lista, esse recurso pode ser utilizado para marcar e dar destaque em algum item, use com cuidado, se usar em excesso e destacar muitos itens da lista, o destaque acaba não saindo como deseja.
É possível adicionar todas as cores de variação do BootstrapVue, E para fazer essa configuração é a prop variant
<b-list-group>
<b-list-group-item variant="primary">Item 1</b-list-group-item>
<b-list-group-item variant="success">Item 2</b-list-group-item>
<b-list-group-item variant="danger">Item 3</b-list-group-item>
</b-list-group>
Por exemplo, na imagem acima, todos os itens estão com cor, repare que nenhum tem um destaque específico. Usar da maneira correta pode trazer uma usabilidade melhor para o seu usuário.
Lista com badge
Eu fiz outro post recentemente falando dos badges, veja aqui. Normalmente eles são utilizados para notificação, marcação de funcionalidade como novo, ou contagem de algo.
Na lista ele pode ser usado dessa forma e fica com um efeito bem legal.
<b-list-group>
<b-list-group-item
class="d-flex justify-content-between align-items-center"
>
Item 1
<b-badge variant="primary" pill>14</b-badge>
</b-list-group-item>
<b-list-group-item
class="d-flex justify-content-between align-items-center"
>
Item 2
<b-badge variant="primary" pill>2</b-badge>
</b-list-group-item>
<b-list-group-item
class="d-flex justify-content-between align-items-center"
>
Item 3
<b-badge variant="primary" pill>1</b-badge>
</b-list-group-item>
</b-list-group>
Lista horizontal
A lista também pode ser colocado na forma horizontal, dependendo do caso pode adaptar melhor ao seu layout, para declarar é preciso colocar a prop horizontal no b-list-group.
<b-list-group horizontal>
<b-list-group-item>Item 1</b-list-group-item>
<b-list-group-item>Item 2</b-list-group-item>
<b-list-group-item>Item 3</b-list-group-item>
</b-list-group>
Lista personalizada
Além da forma padrão, a lista pode receber mais personalizações, colocar mais linhas dentro de cada um, definir posições dentro de cada item e entre outros.
Todas as configurações podem ser feitas usando o flex-box, o que deixa mais fácil para configurar e posicionar os elementos.
O exemplo abaixo mostra uma lista mais personalizada, que da um leque maior de opções de uso para o list group, as vezes colocá-lo em algum histórico de alterações do sistema, logs, listas mais avançadas, colocar ícones em cada linha podem servir como personalizações adicionais.
<b-list-group>
<b-list-group-item href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</b-list-group-item>
</b-list-group>
Lista dinâmica
Todos os itens anteriores, os valores foram colocados individualmente e de maneira fixa, porém é importante saber que todas essas configurações também podem, ser colocadas em listas dinâmicas.
Na maioria das vezes as listagens do sistema vem de algum banco de dados, ou algo do tipo, então para exibir é necessário criar uma lista dinâmica.
Para fazer isso nesse componente, é necessário criar um v-for no b-list-group, e colocar o item que será repetido dentro do b-list-item, o valor que será iterado precisa estar no return do data, veja o código:
<!-- HTML -->
<b-list-group v-for="item in items_list" :key="item">
<b-list-group-item>{{item}}</b-list-group-item>
</b-list-group>
//Javascript
data() {
return {
items_list: ['item 1', 'item 2', 'item 3']
}
}
Repare que a lista foi exibida igual a primeira desse artigo, porém agora os itens foram colocados dinamicamente, e caso precise de mais itens, é possível colocar no array.
Este array pode vir do banco de dados, de algum método que retorna esse array, qualquer lugar do sistema.
Outro ponto é que esse array, pode ser um array de objetos, que ai pode ter qualquer tipo de dados, desde que seja um array, é possível passá-lo para o b-list group e exibir todos os items.
Código fonte
Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Vídeo sobre o assunto
Conclusão
O list-group é um ótimo componente presente no BootstrapVue, pode ser utilizado em diversas ocasiões e tem diversas configurações que se pode fazer, recomendo utilizar e testar para ver qual se adapta melhor ao seu sistema, até o próximo post 🙂
Referências
https://bootstrap-vue.org/docs/components/list-group