ListLista
Lista é um índice vertical usado para exibir texto ou imagens, facilitando a navegação rápida e o acesso a informações relacionadas.
Como usar
Importe os componentes conforme necessário:
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
Importe os tipos TypeScript dos componentes conforme necessário:
import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';
Exemplo de uso:
<mdui-list>
<mdui-list-subheader>Subheader</mdui-list-subheader>
<mdui-list-item>Item 1</mdui-list-item>
<mdui-list-item>Item 2</mdui-list-item>
</mdui-list>Exemplos
Conteúdo de texto
Defina o atributo headline no componente <mdui-list-item> para definir o texto principal do item da lista, e o atributo description para definir o texto secundário.
Você também pode definir o texto principal pelo slot padrão e o texto secundário pelo slot description.
Por padrão, o texto principal e o secundário são exibidos integralmente, independentemente do comprimento. Você pode definir os atributos headline-line e description-line para limitar o número de linhas do texto principal e secundário, no máximo 3 linhas.
Conteúdo nas laterais
Defina os atributos icon e end-icon no componente <mdui-list-item> para adicionar ícones do Material Icons à esquerda e à direita do item da lista.
Você também pode adicionar elementos à esquerda e à direita pelos slots icon e end-icon.
Link
Defina o atributo href para transformar o item da lista em um link. Assim, você também pode usar os atributos relacionados a links: download, target e rel.
Estado desabilitado
Use o atributo disabled no componente <mdui-list-item> para desabilitar o item da lista. Assim, componentes como checkbox, radio, switch dentro do item da lista também serão desabilitados.
Estado ativo
Use o atributo active no componente <mdui-list-item> para ativar o item da lista.
Estado não clicável
Use o atributo nonclickable no componente <mdui-list-item> para remover o efeito de hover e ondulação do item da lista.
Forma arredondada
Use o atributo rounded no componente <mdui-list-item> para dar uma forma arredondada ao item da lista.
Alinhamento vertical
Defina o atributo alignment no componente <mdui-list-item> para ajustar o alinhamento dos elementos laterais em relação ao item da lista. Os valores possíveis são:
start: alinhado ao topocenter: alinhado ao centroend: alinhado à base
Conteúdo personalizado
Use o slot custom no componente <mdui-list-item> para personalizar completamente o conteúdo do item da lista.
mdui-list-item API
Propriedades
| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|---|---|---|---|
headline | headline | string | - | |
Texto principal. Também pode ser definido via slot padrão. | ||||
headline-line | headlineLine | 1 | 2 | 3 | - | |
Número de linhas do texto principal. Será truncado se exceder o limite. O padrão é sem limite de linhas. Os valores possíveis são:
| ||||
description | description | string | - | |
Texto secundário. Também pode ser definido via | ||||
description-line | descriptionLine | 1 | 2 | 3 | - | |
Número de linhas do texto secundário. Será truncado se exceder o limite. O padrão é sem limite de linhas. Os valores possíveis são:
| ||||
icon | icon | string | - | |
Nome do ícone Material Icons à esquerda. Também pode ser definido via | ||||
end-icon | endIcon | string | - | |
Nome do ícone Material Icons à direita. Também pode ser definido via | ||||
disabled | disabled | boolean | false | |
Define se este item da lista está desabilitado. Quando desabilitado, o item da lista fica cinza, e elementos como | ||||
active | active | boolean | false | |
Define se este item da lista está ativo. | ||||
nonclickable | nonclickable | boolean | false | |
Torna o item da lista não clicável. Quando definido, ainda é possível interagir com elementos como | ||||
rounded | rounded | boolean | false | |
Define se deve ser usado um item da lista com formato arredondado. | ||||
alignment | alignment | 'start' | 'center' | 'end' | 'center' | |
Alinhamento vertical do item da lista. Os valores possíveis são:
| ||||
href | href | string | - | |
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento | ||||
download | download | string | - | |
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo | ||||
target | target | '_blank' | '_parent' | '_self' | '_top' | - | |
Define como o link será aberto. Os valores possíveis são:
Nota: Esta propriedade só é válida quando o atributo | ||||
rel | rel | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - | |
A relação entre o documento atual e o documento vinculado. Os valores possíveis são:
Nota: Disponível apenas quando o atributo | ||||
autofocus | autofocus | boolean | false | |
Define se o elemento deve receber foco automaticamente após o carregamento da página. | ||||
tabindex | tabIndex | number | - | |
A ordem do elemento ao navegar com a tecla Tab. | ||||
Métodos
| Nome | Parâmetros | Retorno |
|---|---|---|
click | void | |
Simula um clique do mouse no elemento. | ||
focus |
| void |
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades:
| ||
blur | void | |
Remove o foco do elemento atual. | ||
Slots
| Nome |
|---|
| (padrão) |
Texto principal. |
description |
Texto secundário. |
icon |
Elemento à esquerda do item da lista. |
end-icon |
Elemento à direita do item da lista. |
custom |
Qualquer conteúdo personalizado. |
Propriedades CSS personalizadas
| Nome |
|---|
--shape-corner |
Tamanho da borda arredondada do item da lista. Pode ser um valor em pixels, mas é recomendado usar os design tokens. |
--shape-corner-rounded |
Tamanho da borda arredondada do item da lista quando o atributo |