Gallery

Fretebras

Review - 04/11/22

Review - 06/12/2022

Passagem de Conhecimento

Suportes - Conta Core

Conta PF

Conta PJ

Experiencia Crédito PJ

Risco, crédito e cobrança PJ e PF

Rede Credênciada

Vizir Bank - Core

Curiosidades

Explore

Fuel Design

Item list

Este documento descreve o componente React ListItem.

Props

O componente ListItem aceita as seguintes props:

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.

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

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

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

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.