List

Apresentação

O componente List é responsável por exibir listas de itens de forma organizada e estilizada. Ele oferece diferentes variações de listas, incluindo listas com marcadores, listas com imagens, e suporte para seleção única ou múltipla.

Quando usar

• Para exibir listas de itens
• Para criar menus de navegação
• Para mostrar listas de seleção
• Para apresentar conteúdo em formato de lista
• Para criar listas com imagens
• Para implementar listas interativas

Forma básica de uso

import { List } from 'eitri-luminus';

// Lista básica
<List>
  <List.Item>Item 1</List.Item>
  <List.Item>Item 2</List.Item>
  <List.Item>Item 3</List.Item>
</List>

// Lista com cabeçalho
<List>
  <List.Header>Lista de Tarefas</List.Header>
  <List.Item>Tarefa 1</List.Item>
  <List.Item>Tarefa 2</List.Item>
</List>

// Lista com marcadores
<List bulleted>
  <List.Item>Item com marcador</List.Item>
  <List.Item>Outro item</List.Item>
</List>

// Lista com hover
<List hover>
  <List.Item>Item com efeito hover</List.Item>
  <List.Item>Outro item</List.Item>
</List>

// Lista com seleção única
<List singleSelectionList>
  <List.Item>Item selecionável</List.Item>
  <List.Item>Outro item</List.Item>
</List>

// Lista com imagens
<List imageList>
  <List.Item>
    <img src="/imagem1.jpg" alt="Imagem 1" />
    <span>Descrição da imagem 1</span>
  </List.Item>
  <List.Item>
    <img src="/imagem2.jpg" alt="Imagem 2" />
    <span>Descrição da imagem 2</span>
  </List.Item>
</List>

Propriedades

List

Propriedade	Tipo	Descrição
hover	boolean	Adiciona efeito hover nos itens da lista
multipleSelectionList	boolean	Permite seleção múltipla de itens
singleSelectionList	boolean	Permite seleção única de itens
bulleted	boolean	Adiciona marcadores aos itens da lista
imageList	boolean	Estiliza a lista para exibir imagens
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

List.Item

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o item
id	string	Identificador único do componente

List.Header

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o cabeçalho
id	string	Identificador único do componente

Heranças

O componente List e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a tag <ul> como base
• Suporta diferentes variações de estilo através de props
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML para listas
• Suporta aninhamento de componentes
• Ideal para organização de conteúdo em formato de lista
• Pode ser combinado com outros componentes para criar interfaces complexas