Atlantica

Atlantica

  • Atlantica Design
  • API React Native
  • Help

›Componentes

Atlantica

  • Instalação
  • Como usar?
  • Estrutura Geral

Componentes

  • Índice Rápido
  • Moléculas

    • ATLActionListCard
    • ATLAvatarEditor
    • ATLAvatarEditorCondensed
    • ATLButton
    • ATLCheckbox
    • ATLComment
    • ATLCommentListPreview
    • ATLDateTimePicker
    • ATLDoubleButton
    • ATLDropdown
    • ATLEventCell
    • ATLEventTitle
    • ATLFloatingButton
    • ATLHorizontalUserList
    • ATLIconLabel
    • ATLImageLogo
    • ATLImagePicker
    • ATLLabelButton
    • ATLListDivider
    • ATLMenuItem
    • ATLNotification
    • ATLPost
    • ATLRadioGroup
    • ATLSearchBox
    • ATLSingleImage
    • ATLSpacing
    • ATLStatusListCard
    • ATLSurveyPost
    • ATLTextBody
    • ATLTextInput
    • ATLTitle
    • ATLUserInfo
    • ATLUserListCard

    Átomos

    • ATLAvatarBase
    • ATLButtonBase
    • ATLButtonToggleBase
    • ATLCarouselBase
    • ATLDateIndicatorBase
    • ATLDividerBase
    • ATLIconBase
    • ATLIconButtonBase
    • ATLImageBase
    • ATLLabelBase
    • ATLSwitchBase
    • ATLTextInputBase
    • ATLThreadBase

ATLComment

Base+Avatar

Essa molécula é utilizada para exibir comentários de usuários e suas respostas, bem como interagir com eles.

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

Exemplo de uso:

import { ATLComment } from '@appsimples/atlantica-react-native'
...
<ATLComment
    userAvatar={avatar}
    userNameText={'User Name'}
    timestampText={'Há 10 dias'}
    commentText={'Eu gostei muito desse vídeo!'}
    answerButtonText={'Responder'}
    likeButtonText={'Curtir'}
    likedByMe={liked}
    onPressAnswer={onPressAnswer}
    onPressLike={onPressLike}
    onPressOverflowButton={onPressOverflow}
/>

Props

  • answerButtonText
  • commentText
  • editedText
  • likeButtonText
  • placeholderImage
  • readMoreText
  • timestampText
  • userAvatar
  • userNameText
  • onPressAnswer
  • onPressLike
  • onPressOverflowButton
  • onPressUser
  • hasBeenEdited
  • isAnswer
  • isAvatarSquare
  • isOverflowIconVertical
  • likedByMe
  • horizontalMargin
  • horizontalPadding
  • horizontalPaddingAvatar
  • verticalBottomMargin
  • verticalUpperMargin
  • avatarBaseProps
  • commentLabelBaseProps
  • labelButtonBaseProps
  • likeButtonToggleBaseProps
  • overflowButtonBaseProps
  • threadBaseProps
  • timestampLabelBaseProps
  • userNameLabelBaseProps

answerButtonText

Texto que aparece no botão de responder o comentário.

TipoObrigatório
stringNão

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


commentText

Texto principal que exibe o comentário feito pelo usuário.

TipoObrigatório
stringNão

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


editedText

Caso o comentário tenha sido editado, aparece esse texto ao lado do timestamp.

TipoObrigatório
stringNão

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


likeButtonText

Texto que aparece no botão de curtir o comentário, à direita do ícone de coração.

TipoObrigatório
stringNão

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


placeholderImage

Imagem de placeholder do avatar do usuário.

TipoObrigatório
ImageSourcePropTypeNão

readMoreText

Texto que aparece quando a opção de ler mais é ativada.

TipoObrigatório
stringNão

A prop não é obrigatória mas para que haja a opção de ler mais na molécula, é necessário preenchê-la.


timestampText

Segunda linha de texto que corresponde ao timestamp da notificação.

TipoObrigatório
stringNão

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


userAvatar

Imagem do usuário que irá aparecer dentro do círculo à esquerda.

TipoObrigatório
ImageSourcePropTypeNão

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


userNameText

Texto em destaque correspondente ao nome do usuário.

TipoObrigatório
stringSim

onPressAnswer

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

TipoObrigatório
functionSim

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


onPressLike

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

TipoObrigatório
functionSim

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


onPressOverflowButton

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

TipoObrigatório
functionNão

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


onPressUser

Handler que será chamado quando for pressionado o avatar ou o nome do usuário.

TipoObrigatório
functionNão

hasBeenEdited

Campo boleano que indica se o comentário foi editado (true) ou não (false).

TipoObrigatório
booleanNão

isAnswer

Campo boleano que indica se o comentário é uma resposta (true) ou não (false). Caso seja, será renderizado deslocado para a direita e com o avatar reduzido.

TipoObrigatório
booleanNão

isAvatarSquare

Campo boleano que indica se o avatar irá utilizar tokens que o deixem arredondado ou quadrado.

TipoObrigatório
booleanNão

isOverflowIconVertical

Determina se a orientação do ícone de overflow é vertical ou horizontal.

TipoObrigatório
booleanNão

likedByMe

Campo boleano que indica se o comentário foi curtido pelo usuário (true) ou não (false).

TipoObrigatório
booleanNã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.

PropTokenDefault Value
horizontalMarginSpacingMarginal16

horizontalPadding

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento horizontal entre os elementos da molécula.

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

PropTokenDefault Value
horizontalPaddingSpacingMarginal16

horizontalPaddingAvatar

Essa propriedade deve ser modificada caso seja necessário alterar o espaçamento horizontal entre o avatar e os demais elementos da molécula.

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

PropTokenDefault Value
verticalPaddingSpacingBase8

verticalBottomMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical inferior 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.

PropTokenDefault Value
verticalMarginSpacingMarginal16

verticalUpperMargin

Essa propriedade deve ser modificada caso seja necessário alterar a margem vertical superior 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.

PropTokenDefault Value
verticalMarginSpacingBase8

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.

PropTokenDefault Value
avatarSizeSizeAvatarComment48
borderColorColorPrimary#A94CC9
borderRadiusBorderRadiusAvatarComment24
borderWidthBorderWidthAvatar0

Para mais informações, acesse ATLAvatarBase.


commentLabelBaseProps

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

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

PropsTokenDefault Value
fontFamilyFontFamilyBaseundefined
fontSizeFontSizeBody14
fontWeightFontWeightNormalRegular (400)
lineHeightLineHeightBase20
multilineLimitMultilineLimitBodyundefined
opacity(fixed)1
textAlignTextAlignmentBodyLeft
textCaseTextCaseBodyNone
textColorColorDarkNeutral#212121

Para mais informações, acesse ATLLabelBase.


labelButtonBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de label correspondente aos botões de Responder e Curtir, é possível através da modificação das labelButtonBaseProps.

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

PropsTokenDefault Value
fontFamilyFontFamilyBaseundefined
fontSizeFontSizeButton12
fontWeightFontWeightStrongBold (700)
lineHeightLineHeightBase20
multilineLimitMultilineLimitButton1
opacity(fixed)1
textAlignTextAlignmentButtonCenter
textCaseTextCaseButtonUppercase
textColorColorPrimary#A94CC9

Para mais informações, acesse ATLLabelBase.


likeButtonToggleBaseProps

Caso seja necessário mudar alguma propriedade base do átomo de toggle correspondente aos botão de curtir, é possível através da modificação das likeButtonToggleBaseProps.

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

PropsTokenDefault Value
sizeSizeIconAuxiliary16
tintColorColorPrimary#A94CC9

Para mais informações, acesse ATLButtonToggleBase.


overflowButtonBaseProps

aso seja necessário mudar alguma propriedade base do átomo de ícone correspondente ao overflow, é possível através da modificação das overflowIconButtonBaseProps.

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

PropsTokenDefault Value
buttonBorderColorColorNonetransparent
buttonBorderWidth(fixed)0
buttonColorColorNonetransparent
buttonSizeSizeIconBase24
iconColorColorDarkNeutral#212121
iconSizeSizeIconBase24

Para mais informações, acesse ATLIconButtonBase.


threadBaseProps

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

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

PropsTokenDefault Value
colorColorSurfaceLightNeutral#C4C4C4
widthWidthThreadRegular1

Para mais informações, acesse ATLThreadBase.


timestampLabelBaseProps

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

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

PropsTokenDefault Value
fontFamilyFontFamilyBaseundefined
fontSizeFontSizeTimestamp12
fontWeightFontWeightStrongStrong (600)
lineHeightLineHeightBase20
multilineLimitMultilineLimitTitle1
opacity(fixed)1
textAlignTextAlignmentBodyLeft
textCaseTextCaseBodyNone
textColorColorLightNeutral#9E9E9E

Para mais informações, acesse ATLLabelBase.


userNameLabelBaseProps

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

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

PropsTokenDefault Value
fontFamilyFontFamilyBrandundefined
fontSizeFontSizeHeading16
fontWeightFontWeightStrongBold (700)
lineHeightLineHeightTitle24
multilineLimitMultilineLimitTitle1
opacity(fixed)1
textAlignTextAlignmentHeadingLeft
textCaseTextCaseHighlightNone
textColorColorPrimary#A94CC9

Para mais informações, acesse ATLLabelBase.

← ATLCheckboxATLCommentListPreview →
  • Props
    • answerButtonText
    • commentText
    • editedText
    • likeButtonText
    • placeholderImage
    • readMoreText
    • timestampText
    • userAvatar
    • userNameText
    • onPressAnswer
    • onPressLike
    • onPressOverflowButton
    • onPressUser
    • hasBeenEdited
    • isAnswer
    • isAvatarSquare
    • isOverflowIconVertical
    • likedByMe
    • horizontalMargin
    • horizontalPadding
    • horizontalPaddingAvatar
    • verticalBottomMargin
    • verticalUpperMargin
    • avatarBaseProps
    • commentLabelBaseProps
    • labelButtonBaseProps
    • likeButtonToggleBaseProps
    • overflowButtonBaseProps
    • threadBaseProps
    • timestampLabelBaseProps
    • userNameLabelBaseProps
Atlantica
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2019 Your Name or Your Company Name