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:

Subheader

Item 1

Item 2

<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>

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.

Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline
    <span slot="description">Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text</span>
  </mdui-list-item>
</mdui-list>

Forrás

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.

Headline

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Headline</mdui-list-item>
</mdui-list>

Forrás

Você também pode adicionar elementos à esquerda e à direita pelos slots icon e end-icon.

Headline

<mdui-list>
  <mdui-list-item>
    Headline
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

Forrás

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.

Headline

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Headline</mdui-list-item>
</mdui-list>

Forrás

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.

Headline

<mdui-list>
  <mdui-list-item disabled>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

Forrás

Estado ativo

Use o atributo active no componente <mdui-list-item> para ativar o item da lista.

Headline

<mdui-list>
  <mdui-list-item active>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

Forrás

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.

Headline

<mdui-list>
  <mdui-list-item nonclickable>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

Forrás

Forma arredondada

Use o atributo rounded no componente <mdui-list-item> para dar uma forma arredondada ao item da lista.

Headline

<mdui-list>
  <mdui-list-item rounded>Headline</mdui-list-item>
  <mdui-list-item rounded>Headline</mdui-list-item>
</mdui-list>

Forrás

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 topo
center: alinhado ao centro
end: alinhado à base

Headline

<mdui-list>
  <mdui-list-item alignment="start" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Forrás

Conteúdo personalizado

Use o slot custom no componente <mdui-list-item> para personalizar completamente o conteúdo do item da lista.

test

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>test</div>
    </div>
  </mdui-list-item>
</mdui-list>

Forrás

`mdui-list-item` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`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: `1`: Exibe uma linha; trunca se exceder. `2`: Exibe duas linhas; trunca se exceder. `3`: Exibe três linhas; trunca se exceder.
`description`	`description`	`string`	-
Texto secundário. Também pode ser definido via `slot="description"`.
`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: `1`: Exibe uma linha; trunca se exceder. `2`: Exibe duas linhas; trunca se exceder. `3`: Exibe três linhas; trunca se exceder.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons à esquerda. Também pode ser definido via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons à direita. Também pode ser definido via `slot="end-icon"`.
`disabled`	`disabled`	`boolean`	`false`
Define se este item da lista está desabilitado. Quando desabilitado, o item da lista fica cinza, e elementos como `<mdui-checkbox>`, `<mdui-radio>` e `<mdui-switch>` dentro dele também são desabilitados.
`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 `<mdui-checkbox>`, `<mdui-radio>` e `<mdui-switch>` dentro dele.
`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: `start`: Alinhado ao topo. `center`: Alinhado ao centro. `end`: Alinhado à base.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`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: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`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.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.

Események

Név
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.

Slots

Név
(alapértelmezett)
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.

CSS Parts

Név
`container`
Contêiner do item da lista.
`icon`
Ícone à esquerda.
`end-icon`
Ícone à direita.
`body`
Parte do meio.
`headline`
Título principal.
`description`
Subtítulo.

CSS egyéni tulajdonságok

Név
`--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 `rounded` é especificado. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

`mdui-list-subheader` API

Slots

Név
(alapértelmezett)
Texto do cabeçalho da lista.

`mdui-list` API

Slots

Név
(alapértelmezett)
Elementos `<mdui-list-item>`.

Előző fejezet

LinearProgress Lineáris folyamatjelző

Következő fejezet

Menu Menü

ListLista

Como usar

Exemplos

Conteúdo de texto

Conteúdo nas laterais

Link

Estado desabilitado

Estado ativo

Estado não clicável

Forma arredondada

Alinhamento vertical

Conteúdo personalizado

`mdui-list-item` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts

CSS egyéni tulajdonságok

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots