List

Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor exemplificação de um determinado assunto.

O componente List expõe uma API para criar três tipos de listas: ordenadas, não ordenadas e de definição e o componente ListItem renderiza cada um dos elementos dessa lista.

Playground

Propriedades do List

Nome (* = obrigatório)

Tipo

Valores

Descrição

as

ListHTMLTag

  • ul (default)

  • ol

  • dl

Tags HTML Semânticas

children

ReactNode

  • —

Conteúdo interno.

textual

boolean

  • false (default)

  • true

Se true a lista será renderizada com marcações (bullets ou numbers) e padding

variant

TypographyVariant

  • primary (default)

  • secondary

  • inherit

Cores padrão de texto

modifier

ListModifier

  • highlight

  • inherit

  • inverted

  • none (default)

Cor do texto para contextos específicos

Proriedades do ListItem

Nome (* = obrigatório)

Tipo

Valores

Descrição

as

ListItemHTMLTags

  • li (default)

  • dd

  • dt

Tags HTML Semânticas

variant

TypographyVariant

  • primary

  • secondary

  • inherit (default)

Cores padrão de texto

modifier

TypographyModifier

  • highlight

  • placeholder

  • inherit (default)

  • inverted

  • premium

  • none

Cor do texto para contextos específicos

O componente aceita os atributos padrões dos elementos de lista HTML.

Confira os links do MDN: