Atlantica

Atlantica

  • Atlantica Design
  • API React Native
  • Help

›Componentes

Atlantica Design

  • Introdução
  • Princípios de Design
  • Glossário

Arquitetura

  • Molecules e Atoms
  • Tokens & Props
  • Nomeando Tokens

Componentes

    Atoms

    • Avatar Base
    • Button Toggle Base
    • Button Base
    • Divider Base
    • Icon Button Base
    • Icon Base
    • Image Base
    • Text Input Base
    • Label Base
    • Switch Base

    Molecules

    • ActionListCard
    • Avatar Editor
    • Button
    • ATLCardList
    • Checkbox
    • ATLChips
    • Comment List Preview
    • Comment
    • Cover
    • DateTimePicker
    • ATLDialog
    • ATLDivider
    • Double Button
    • Dropdown
    • Event Cell
    • Event Title
    • Floating Action Button (FAB)
    • Horizontal User List
    • Icon Label
    • ATLIconizedText
    • Image Logo
    • ImagePicker
    • Label Button
    • List Divider
    • ATLNavigationButton
    • Notification
    • Post
    • SearchBox
    • SettingsItem
    • Single Image
    • ATLSpacing
    • StatusListCard
    • ATLSummary
    • SurveyPost
    • ATLSwitchButton
    • ATLTextBody
    • ATLTextHead
    • TextInput
    • Title
    • UserInfo
    • UserListCard

List Divider

DividerOrig

Função

A molécula foi desenhada para ser um elemento separador em uma lista de elementos.

Estrutura básica

Divider

Espaçamentos

  1. LeftMargin, como Margem Lateral Esquerda
  2. RightMargin, como Margem Lateral Direita

Átomos

  1. Átomo Divider

Prop-Token Mapping

Props da Molécula

PropTokenDefault ValueUse
leftMarginSpacingMarginal161
rightMarginSpacingMarginal162
dividerBaseProps--3

DividerBaseProps

PropTokenDefault Value
heigntHeightDividerRegular1
colorColorSurfaceLightNeutral#9E9E9E

Conteúdo

A molécula não possui conteúdo populável.

Variação Complementary

DividerTipos2

Tem a mesma função da molécula original, mas aplicado numa tela com fundo ColorPrimary.

São feitas as seguintes alterações de Token nas DividerBaseProps:

PropTokenDefault Value
colorColorSurfaceLightNeutral ⇒ ColorComplementary#FFFFFF

Estados

Molécula não possui estados.

Tipos e Casos de Uso

DividerTipos

Existem três variações desta molécula: Regular, NoSpacing e LeftSpacing

1. Regular

É a molécula padrão já apresentada nos itens anteriores deste documento.

2. No Spacing

É o tipo ilustrado na linha 2. Apresenta a seguinte variação de tokens:

PropTokenDefault Value
leftMarginSpacingMarginal ⇒ 0-
rightMarginSpacingMarginal ⇒ 0-

3. Left Spacing

É o tipo ilustrado na linha 3. Apresenta a seguinte variação de tokens:

PropTokenDefault Value
leftMarginSpacingMarginal ⇒ SpacingWide64
rightMarginSpacingMarginal ⇒ 0-

Responsividade

Tamanho da Tela

DividerResp

Quando se reduz o tamanho da tela, o Átomo Divider diminui junto, mantendo-se fixos as Margens Laterias.

← Label ButtonATLNavigationButton →
  • Função
  • Estrutura básica
    • Espaçamentos
    • Átomos
    • Prop-Token Mapping
  • Conteúdo
  • Variação Complementary
  • Estados
  • Tipos e Casos de Uso
    • 1. Regular
    • 2. No Spacing
    • 3. Left Spacing
  • Responsividade
    • Tamanho da Tela
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