Base List
Componente utilizado para exibir uma coleção de itens organizados em sequência, com suporte a interações e estados do sistema.
Uso
O Base List deve ser usado para apresentar conteúdos agrupados de forma sequencial, quando há necessidade de permitir interações como clique, hover ou estados visuais (disabled, pressed). É ideal para contextos em que cada item da lista representa um ponto de navegação ou ação, como listas de músicas, artigos, notícias ou elementos com comportamento dinâmico. Diferencia-se de listas puramente estáticas por permitir que o usuário interaja com os itens individualmente.
Anatomia
1. Slots (Opcional)
Recebe: componentes auxiliares que complementam o item da lista, como botões, tags, thumbnails, ícones etc.
Obrigatório: não.
Comportamento: adaptável ao conteúdo inserido. Os slots devem manter alinhamento visual e respeitar os limites de espaçamento definidos.
2. Index (Opcional)
Recebe: número de ordem, usado para identificação sequencial (ex: posição de música ou ranking).
Obrigatório: não.
Comportamento: deve aparecer antes do conteúdo textual principal, quando usado.
3. Text Style
Recebe: o conteúdo textual principal do item (nome do conteúdo, título da música, etc.).
Obrigatório: sim.
Comportamento: deve seguir os estilos tipográficos definidos para o componente, adaptando-se entre mobile e desktop conforme o guideline de tipografia.
4. Divider (Opcional)
Recebe: nenhum conteúdo direto.
Obrigatório: não.
Comportamento: usado para reforçar a separação visual entre os itens da lista. Pode ser ocultado no último item ou conforme contexto visual.
Variantes
Padding On
Variante com espaçamento interno mais amplo, ideal para interfaces desktop ou contextos com maior densidade de informação visual. Promove melhor legibilidade e organização em telas maiores.
Padding Off
Variante com espaçamento interno reduzido, otimizada para uso em dispositivos móveis ou dentro de componentes compactos como cards e modais. Ajuda a economizar espaço mantendo clareza visual.
Ao aplicar a variante Padding Off dentro de cards, é importante se atentar aos espaçamentos internos do card em relação a lista. Apesar de o frame conter apenas as informações da lista, os estados "Hovered" e "Pressed" possui um BG que se estende 12px além do frame de cada lado. Logo, é importante que os espaçamentos internos dos cards, sejam iguais ou maiores a 12px, para que o hover não ultrapasse os limites do card.
Use cases
User Top Songs
Referências
Histórico de Atualizações
Atualizado