UISpacer

O espaçamento é uma parte importante do design visual e sua padronização é crucial para a consistência. Os componentes UISpacer ajudam o desenvolvedor a obter consistência com as especificações de design e velocidade de entrega. Basicamente não precisamos setar paddings/margins entre componentes.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

direction

string

  • horizontal

  • vertical (default)

A direção na qual o espaçamento deve ser aplicado entre dois elementos do layout.

xs

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 0px.

sm

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 576px.

md

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 768px.

lg

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 960px.

xl

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 1200px.

xxl

string

  • base

  • base02

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

O token de espaçamento da escala de layout a ser aplicado no breakpoint; ou `none` para ocultar o espaçador no breakpoint. O breakpoint é aplicado em 1440px.