Pular para o conteúdo principal

List

Import​

import { List } from '@resultadosdigitais/tangram-components'

Properties​

children 📍​

Concerns
📍 Required
Typeelement | array | node

Description​

Sets the children.

as​

Type
Enum of:
  • List.as.ol
  • List.as.ul
  • List.as.div
  • List.as.nav
DefaultList.as.ul

Description​

Set element type to be rendered for this component.

forwardedAs​

Typenode | string

Description​

Set element type to be rendered for this component.

listStyleType​

Typestring
Default'none'

Description​

Sets the marker of a list item.

size​

Type
Enum of:
  • List.sizes.sm
  • List.sizes.md
DefaultList.sizes.md

Description​

Sets the size.

alignment​

Type
Enum of:
  • List.alignments.top
  • List.alignments.center
DefaultList.alignments.center

Description​

Sets the alignment of each row.

bordered​

Typebool
Defaultfalse

Description​

Sets if the list will have border.

<ListDivider />​

Import​

import { ListDivider } from '@resultadosdigitais/tangram-components'

Properties​

as​

Typenode | string
Description​

Set element type to be rendered for this component. By default it will render a li element.

forwardedAs​

Typenode | string
Description​

Set element type with new style to be rendered for this component. By default it will render a li element.

<ListHeader />​

Import​

import { ListHeader } from '@resultadosdigitais/tangram-components'

Properties​

children 📍​

Concerns
📍 Required
Typestring
Description​

Sets the children.

as​

Typenode | string
Description​

Set element type to be rendered for this component. By default it will render a li element.

forwardedAs​

Typenode | string
Description​

Set element type with new style to be rendered for this component. By default it will render a li element.

<ListItem />​

Import​

import { ListItem } from '@resultadosdigitais/tangram-components'

Properties​

children 📍​

Concerns
📍 Required
Typeelement | string | array | node
Description​

Sets the children.

as​

Typenode | string
Description​

Set element type to be rendered for this component. By default it will render a li element.

active​

Typebool
Defaultfalse
Description​

Sets if is active.

clickable​

Typebool
Defaultfalse
Description​

Sets if is clickable

disabled​

Typebool
Defaultfalse
Description​

Sets if is disabled.

forwardedAs​

Typenode | string
Description​

Set element type with new style to be rendered for this component. By default it will render a li element.

onClick​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Description​

Callback fired when the ListItem is clicked.

role​

Typestring
Description​

Sets the list item's role.

<ListItemAction />​

Import​

import { ListItemAction } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Sets the children.

<ListItemContent />​

Import​

import { ListItemContent } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Sets the children.

mainText 🗑️​

Concerns
🗑️ Deprecated
Typestring
Description​

Sets the label.

secondaryText 🗑️​

Concerns
🗑️ Deprecated
Typestring
Default''
Description​

Sets the support text.

mainColor 🗑️​

Concerns
🗑️ Deprecated
Typestring
Default'--neutral-text-high-emphasis'
Description​

Sets the main text color.

secondaryColor 🗑️​

Concerns
🗑️ Deprecated
Typestring
Default'--neutral-text-low-emphasis'
Description​

Sets the support text color.

<ListItemExtra />​

Import​

import { ListItemExtra } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typeelement | string | array | node
Description​

Sets the children.

left​

Typebool
Defaultfalse
Description​

Sets if is left positioned.

right​

Typebool
Defaultfalse
Description​

Sets if is right positioned.

<ListItemImage />​

Import​

import { ListItemImage } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Sets the children.

<ListItemSelector />​

Import​

import { ListItemSelector } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Sets the children.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.