styled system

spacings

Confira as propriedades de estilos destinadas aos espaçamentos dos componentes.

índice

como utilizar
utilização com typescript
utilizando todas as propriedades de uma só vez

como utilizar

Nós temos diversas propriedades disponíveis em relação aos espaçamentos:

import {
  margin,
  marginTop,
  marginRight,
  marginBottom,
  marginLeft,
  marginHorizontal,
  marginVertical,
  margins,
  padding,
  paddingTop,
  paddingRight,
  paddingBottom,
  paddingLeft,
  paddingHorizontal,
  paddingVertical,
  paddings,
  width,
  maxWidth,
  minWidth,
  widths,
  height,
  maxHeight,
  minHeight,
  heights,
} from '@olist/styled-system';

Você pode importar somente a desejada ou pode utilizar a função spacings que encapsula todas em uma só.

// isso é o equivalente que importar todas as funções acima
import { spacings } from '@olist/styled-system';

Para utilizar basta aplicar a função desejada em seu "styled-component":

import styled from 'styled-components';
import { paddingBottom } from '@olist/styled-system';

const MyComponent = styled.div`
  ${paddingBottom}
`;

// ...

<MyComponent paddingBottom="stack.small" />
<MyComponent pb="stack.small" />

Você também pode utilizar qualquer valor válido para as propriedades, não há restrição para utilizar somente os valores do tema:

import styled from 'styled-components';
import { paddingBottom } from '@olist/styled-system';

const MyComponent = styled.div`
  ${paddingBottom}
`;

// ...

<MyComponent paddingBottom="10px" />;
<MyComponent pb={10} />;

Essa lógica é aplicada para qualquer função exportada pelo @olist/styled-system.

utilização com typescript

Para utilizar as funções de spacings com typescript é necessário importar o tipo correspondente a função utilizada do pacote @olist/styled-system:

Supondo que você está utilizando a função paddingBottom você deve importar o tipo PaddingBottomProps:

import styled from 'styled-components';
import { paddingBottom, type PaddingBottomProps } from '@olist/styled-system';

const MyComponent = styled.div<PaddingBottomProps>`
  ${paddingBottom}
`;

// ...

<MyComponent paddingBottom="stack.small" />;

utilizando todas as propriedades de uma só vez

Você pode utilizar a função spacings para aplicar todas as propriedades de uma só vez, basta importar a função spacings e o seu tipo SpacingsProps:

import styled from 'styled-components';
import { spacings, type SpacingsProps } from '@olist/styled-system';

const MyComponent = styled.div<SpacingsProps>`
  ${spacings}
`;

// ...

<MyComponent
  margin="inset.small"
  paddingHorizontal="inline.small"
  height={48}
/>;

Você também pode utilizar as funções margins, paddings, widths e heights que são funções agregadoras que encapsulam algumas propriedades de espaçamento exemplificadas na tabela abaixo:

função	propriedades
margins	`margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical`
paddings	`padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical`
widths	`width`, `maxWidth`, `minWidth`
heights	`height`, `maxHeight`, `minHeight`

utilizando a função spacings você terá disponível as seguintes propriedades para utilizar em seu componente:

propriedade	aliases	type
`margin`	`m`	`MarginProps`
`marginTop`	`mt`	`MarginTopProps`
`marginRight`	`mr`	`MarginRightProps`
`marginBottom`	`mb`	`MarginBottomProps`
`marginLeft`	`ml`	`MarginLeftProps`
`marginHorizontal`	`mx`	`MarginHorizontalProps`
`marginVertical`	`my`	`MarginVerticalProps`
`margins`	-	`MarginsProps`
`padding`	`p`	`PaddingProps`
`paddingTop`	`pt`	`PaddingTopProps`
`paddingRight`	`pr`	`PaddingRightProps`
`paddingBottom`	`pb`	`PaddingBottomProps`
`paddingLeft`	`pl`	`PaddingLeftProps`
`paddingHorizontal`	`px`	`PaddingHorizontalProps`
`paddingVertical`	`py`	`PaddingVerticalProps`
`paddings`	-	`PaddingsProps`
`width`	`w`	`WidthProps`
`maxWidth`	`maxW`	`MaxWidthProps`
`minWidth`	`minW`	`MinWidthProps`
`widths`	-	`WidthsProps`
`height`	`h`	`HeightProps`
`maxHeight`	`maxH`	`MaxHeightProps`
`minHeight`	`minH`	`MinHeightProps`
`heights`	-	`HeightsProps`