Skip to content
title: o título do item da lista.subTitle: o subtítulo do item da lista.icon: o nome do ícone a ser exibido no lado esquerdo do item da lista.style: estilo personalizado para aplicar ao item da lista.onPress: função a ser executada quando o item da lista for pressionado.tagType: o tipo de tag a ser exibido no lado direito do item da lista.tagMessage: a mensagem a ser exibida dentro da tag.children: conteúdo a ser exibido dentro da tag do item da lista.
Item list
Este documento descreve o componente React ListItem.
Props
O componente ListItem aceita as seguintes props:
Exemplo de uso
import React from 'react';
import {ListItem} from './ListItem';
const MyComponent = () => {
return (
<ListItem
title="Meu item da lista"
subTitle="Este é um subtítulo para o meu item da lista"
icon="info-circle"
onPress={() => console.log('Item da lista pressionado')}
tagType="warning"
tagMessage="Esta é uma mensagem de aviso"
style={{backgroundColor: 'white'}}
>
<CustomContent />
</ListItem>
);
};
Exemplo de uso 1
<ListItem
title="Meu item da lista"
/>
Este exemplo cria um ListItem com o título "Meu item da lista" e nenhuma outra prop definida.
Exemplo de uso 2
<ListItem
title="Item da lista com subtítulo"
subTitle="Este é um subtítulo para o meu item da lista"
/>
Este exemplo cria um ListItem com o título "Item da lista com subtítulo" e um subtítulo "Este é um subtítulo para o meu item da lista".
Exemplo de uso 3
<ListItem
title="Item da lista com ícone"
icon="info-circle"
/>
Este exemplo cria um ListItem com o título "Item da lista com ícone" e um ícone "info-circle" à esquerda.
Exemplo de uso 4
<ListItem
title="Item da lista com conteúdo personalizado"
>
<CustomContent />
</ListItem>
Este exemplo cria um ListItem com o título "Item da lista com conteúdo personalizado" e um conteúdo personalizado dentro da tag.
Exemplo de uso 5
<ListItem
title="Item da lista com tag"
tagType="warning"
tagMessage="Esta é uma mensagem de aviso"
/>
Este exemplo cria um ListItem com o título "Item da lista com tag" e uma tag de aviso com a mensagem "Esta é uma mensagem de aviso" à direita.
Exemplo de uso 6
<ListItem
title="Item da lista com onPress"
onPress={() => console.log('Item da lista pressionado')}
/>
Este exemplo cria um ListItem com o título "Item da lista com onPress" e uma função a ser executada quando o item da lista for pressionado.
Exemplo de uso 7
<ListItem
title="Item da lista com estilo"
style={{backgroundColor: 'white'}}
/>
Este exemplo cria um ListItem com o título "Item da lista com estilo" e uma cor de fundo branca personalizada.
Abaixo está um exemplo de utilização no app do Item-List
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.