List

Lista estruturada para exibir coleções de itens com slots de leading, badge, actions e trailing. Tags `mk-list`, `mk-list-item`, `mk-list-item-text` e `mk-list-subheader`.

mk-list renderiza um <ul> semântico e cada mk-list-item renderiza um <li>. Use mk-list-item-text para o texto primário e secundário de cada item. Dividers são exibidos automaticamente entre os itens.

Padrão

Aninhe os itens dentro da lista. Cada item recebe mk-list-item-text no slot default.

import { MkList, MkListItem, MkListItemText } from '@db1/makuco-ui-react';

<MkList>
  <MkListItem>
    <MkListItemText primary="Primeiro item" secondary="Supporting text" />
  </MkListItem>
  <MkListItem>
    <MkListItemText primary="Segundo item" secondary="Supporting text" />
  </MkListItem>
</MkList>

<mk-list>
  <mk-list-item>
    <mk-list-item-text primary="Primeiro item" secondary="Supporting text"></mk-list-item-text>
  </mk-list-item>
  <mk-list-item>
    <mk-list-item-text primary="Segundo item" secondary="Supporting text"></mk-list-item-text>
  </mk-list-item>
</mk-list>

Cabeçalho de seção

A prop subheader em mk-list exibe um título de seção acima dos itens. Para casos compostos (ícone + texto), use mk-list-subheader diretamente como filho.

// prop simples
<MkList subheader="Seção">...</MkList>

// composto com mk-list-subheader
<MkList>
  <MkListSubheader label="Seção" />
  <MkListItem>...</MkListItem>
</MkList>

<!-- prop simples -->
<mk-list subheader="Seção">...</mk-list>

<!-- composto com mk-list-subheader -->
<mk-list>
  <mk-list-subheader label="Seção"></mk-list-subheader>
  <mk-list-item>...</mk-list-item>
</mk-list>

Leading

Use o slot leading para posicionar um avatar, ícone ou checkbox à esquerda do conteúdo principal.

<MkListItem>
  <MkIcon slot="leading" name="inbox" />
  <MkListItemText primary="Caixa de entrada" />
</MkListItem>

<mk-list-item>
  <mk-icon slot="leading" name="inbox"></mk-icon>
  <mk-list-item-text primary="Caixa de entrada"></mk-list-item-text>
</mk-list-item>

Badges

Use o slot badge para chips que categorizam ou rotulam o item.

<MkListItem>
  <MkListItemText primary="Documentos" secondary="Última atualização hoje" />
  <MkChip slot="badge" color="info" label="Novo"></MkChip>
</MkListItem>

<mk-list-item>
  <mk-list-item-text primary="Documentos" secondary="Última atualização hoje"></mk-list-item-text>
  <mk-chip slot="badge" color="info" label="Novo"></mk-chip>
</mk-list-item>

Ações

Use o slot actions para icon buttons de ação secundária (editar, excluir, etc.).

<MkListItem>
  <MkListItemText primary="Maria Silva" secondary="maria@email.com" />
  <MkIcon slot="actions" name="pencil" />
  <MkIcon slot="actions" name="trash-2" />
</MkListItem>

<mk-list-item>
  <mk-list-item-text primary="Maria Silva" secondary="maria@email.com"></mk-list-item-text>
  <mk-icon slot="actions" name="pencil"></mk-icon>
  <mk-icon slot="actions" name="trash-2"></mk-icon>
</mk-list-item>

Trailing

Use o slot trailing para um controle de estado à direita — switch, chevron ou radio.

<MkListItem>
  <MkListItemText primary="Notificações push" />
  <MkSwitch slot="trailing" checked />
</MkListItem>

<mk-list-item>
  <mk-list-item-text primary="Notificações push"></mk-list-item-text>
  <mk-switch slot="trailing" checked></mk-switch>
</mk-list-item>

Desabilitado

A prop disabled em mk-list-item desativa visualmente o item e suprime os estados hover e active. O texto herda automaticamente a cor desabilitada via CSS custom property.

<MkListItem disabled>
  <MkListItemText primary="Item desabilitado" secondary="Indisponível" />
</MkListItem>

<mk-list-item disabled>
  <mk-list-item-text primary="Item desabilitado" secondary="Indisponível"></mk-list-item-text>
</mk-list-item>

Props — mk-list

Prop	Tipo	Padrão	Descrição
`subheader`	`string`	—	Texto do cabeçalho de seção exibido no topo da lista. Para conteúdo composto, use `mk-list-subheader` diretamente como filho.

Props — mk-list-item

Prop	Tipo	Padrão	Descrição
`disabled`	`boolean`	`false`	Desativa visualmente o item. Suprime hover e active. O texto herda `--text-disabled` automaticamente.

Props — mk-list-item-text

Prop	Tipo	Padrão	Descrição
`primary`	`string`	—	Texto principal do item. Tipografia body-md, cor high-emphasis.
`secondary`	`string`	—	Texto de suporte abaixo do primary. Tipografia caption, cor low-emphasis. Omitido quando ausente.

Props — mk-list-subheader

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Texto do cabeçalho. O slot default tem prioridade quando preenchido.

Slots

Componente	Slot	Descrição
`mk-list`	(default)	Filhos da lista: `mk-list-item` e `mk-list-subheader`.
`mk-list-item`	`leading`	Conteúdo à esquerda: avatar, ícone, checkbox.
`mk-list-item`	(default)	Conteúdo principal. Use `mk-list-item-text` para texto estruturado.
`mk-list-item`	`badge`	Chips ou badges que categorizam o item.
`mk-list-item`	`actions`	Ações do item: icon buttons.
`mk-list-item`	`trailing`	Controle à direita: switch, chevron, radio.
`mk-list-subheader`	(default)	Conteúdo do cabeçalho. Tem prioridade sobre a prop `label`.

Acessibilidade

mk-list expõe role="list" no host; mk-list-item expõe role="listitem", preservando a semântica de lista através da fronteira do shadow DOM.
mk-list-item[disabled] suprime hover e active. Elementos focáveis dentro dos slots (switches, botões) devem ter seu próprio estado disabled definido individualmente.
O item em si não é focável — posicione elementos interativos nos slots para navegação por teclado.

List

On this page