ATLHorizontalUserList

HorizontalUserList

Esta molécula é utilizada para listar uma quantidade moderada de usuários. Mostra uma foto e um username.

Para visitar a documentação de design desta molécula, clique aqui.

Exemplo de Uso:

import { ATLHorizontalUserList } from '@appsimples/atlantica-react-native'
...
const userList = [
  { id: 1, text: 'username', avatar: image, hasIcon: true },
  { id: 2, text: 'username', avatar: image },
  { id: 3, text: 'username', avatar: image },
  { id: 4, text: 'username', avatar: image },
  { id: 5, text: 'username', avatar: image },
  { id: 6, text: 'username', avatar: image }
]
...
<ATLHorizontalUserList
    usersList={userList}
    icon={icon}
    title={'Lista de usuários'}
    counterText={userList.length.toString()}
    seeMoreItemText={'Ver mais'}
    onPressItem={onPressItem}
    onPressSeeMore={onPressSeeMore}
/>

Props

counterText
icon
placeholderImage
seeMoreItemText
title
userList
onPressItem
onPressSeeMore
isAvatarSquare
horizontalMargin
verticalMargin
avatarBaseProps
titleLabelBaseProps
usernameLabelBaseProps

`counterText`

Valor do contador localizado à direita do título.

Tipo	Obrigatório
string	Não

A prop não é obrigatória mas para renderizar o texto é necessário preenchê-la.

`icon`

Os avatares podem ter um ícone caso o parâmetro hasIcon do UserListItem seja true.

Tipo	Obrigatório
image	Não

A prop não é obrigatória, mas para renderizar o ícone nos itens, é necessário preenchê-la.

`placeholderImage`

Imagem de placeholder do avatar do usuário.

Tipo	Obrigatório
ImageSourcePropType	Não

`seeMoreItemText`

Texto que aparece no lugar do username no botão de ver mais.

Tipo	Obrigatório
string	Não

A prop não é obrigatória, mas para renderizar o item, é necessário preenchê-la juntamente com onPressSeeMore.

`title`

Título da seção que aparece acima da lista.

Tipo	Obrigatório
string	Não

A prop não é obrigatória mas para renderizar o texto é necessário preenchê-la.

`userList`

Itens a serem renderizados na lista de usuários.

Tipo	Obrigatório
UserListItem[]	Sim

O tipo UserListItem é apresentado abaixo:

{
     id: any
     avatar: ImageSourcePropType
     hasIcon?: boolean
     text: string
}

`onPressItem`

Handler que será chamado quando o usuário apertar um dos itens da lista.

Tipo	Obrigatório
function	Sim

`onPressSeeMore`

Handler que será chamado quando o usuário apertar o botão de ver mais.

Tipo	Obrigatório
function	Não

A prop não é obrigatória, mas para renderizar o botão, é necessário preenchê-la juntamente com seeMoreItemText.

`isAvatarSquare`

Campo boleano que indica se os avatares irão utilizar tokens que o deixem arredondado ou quadrado.

Tipo	Obrigatório
boolean	Não

`horizontalMargin`

Essa propriedade deve ser modificada caso seja necessário alterar a margem horizontal externa aos elementos da molécula.

Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.

Prop	Token	Default Value
horizontalMargin	SpacingMarginal	16

`verticalMargin`

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical externa aos elementos da molécula.

Abaixo temos uma tabela indicando o token ao qual a prop está relacionada e o seu valor padrão.

Prop	Token	Default Value
verticalMargin	SpacingBase	8

`avatarBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de avatar, é possível através da modificação das avatarBaseProps.

Abaixo temos uma tabela com todas as props do avatar, os tokens aos quais estão relacionadas e o seu valor padrão.

Prop	Token	Default Value
avatarSize	SizeAvatarHorizontalUserList	48
borderColor	ColorPrimary	#A94CC9
borderRadius	BorderRadiusAvatarHorizontalUserList	24
borderWidth	BorderWidthAvatar	0
iconColor	ColorPrimary	#A94CC9
iconSize	SizeIconBase	24

Para mais informações, acesse ATLAvatarBase.

`titleLabelBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de label relativo ao nome do usuário, é possível através da modificação das titleLabelBaseProps.

Abaixo temos uma tabela com todas as props da label, os tokens aos quais estão relacionadas e o seu valor padrão.

Props	Token	Default Value
fontFamily	FontFamilyBase	undefined
fontSize	FontSizeHeading	14
fontWeight	FontWeightStrong	Bold (700)
lineHeight	LineHeightTitle	24
multilineLimit	(fixed)	1
opacity	(fixed)	1
textAlign	TextAlignmentButton	Center
textCase	TextCaseHighlight	None
textColor	ColorPrimary	#A94CC9

Para mais informações, acesse ATLLabelBase.

`usernameLabelBaseProps`

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente ao nome do usuário, é possível através da modificação das usernameLabelBaseProps.