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

ATLDivider

Divider_Exempl

Função

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

Anatomia

Divider_Anat

Divider_Anat2

Specs

Divider_Spec

Divider_Spec2

Átomos

  • Atom Divider, como Divisor.

Tipos

Divider_Types

A molécula apresenta dois tipos:

Margin

Este Tipo foi desenhado para conter uma separação total entre o item anterior da stack e o seguinte, criando uma quebra de seção.

No Margin

Este Tipo foi desenhado para conter uma separação parcial entre elementos, criando uma lista única com itens separados.

Comportamento

Responsividade

Divider_Resp

Divider_Resp2

A largura da molécula diminui junto com a largura da tela, mantendo (no tipo Both Sides), as margens laterais. A altura se mantém fixa.

Variações

Divider_Varia

Ambos os tipos apresentam uma variação Complementary. Para produzi-la, é trocado o token ColorBackground pelo token ColorComplementary1.

Aplicação

Divider_applic

← ATLDialogDouble Button →
  • Função
  • Anatomia
  • Specs
    • Átomos
  • Tipos
    • Margin
    • No Margin
  • Comportamento
    • Responsividade
  • Variações
  • Aplicação
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