styled system

layout

Confira as propriedades de estilos destinadas ao layout dos componentes.

índice

como utilizar

Nós temos diversas propriedades disponíveis em relação ao "layout":

import {
  display,
  position,
  top,
  right,
  bottom,
  left,
  zIndex,
} from '@olist/styled-system';

Você pode importar somente a desejada ou pode utilizar a função positions que encapsula todas as funções de posicionamento (position, top, right, bottom, left e zIndex) em uma só.

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

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

import styled from 'styled-components';
import { display, positions } from '@olist/styled-system';

const MyComponent = styled.div`
  ${display}
  ${positions}
`;

// ...

<MyComponent display="flex" position="relative" top="10px" zIndex={1} />;

// todos os displays existentes no CSS podem ser aplicados na prop `display`

utilização com typescript

Para utilizar as funções de layout 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 position você deve importar o tipo PositionProps:

import styled from 'styled-components';
import { position, type PositionProps } from '@olist/styled-system';

const MyComponent = styled.div<PositionProps>`
  ${position}
`;

// ...

<MyComponent position="relative" />;

utilizando todas as propriedades de posicionamento uma só vez

Você pode utilizar a função positions para aplicar todas as propriedades de posicionamento uma só vez, basta importar a função positions e o seu tipo PositionsProps, e para completar o uso de todas as funções da categoria "layout" basta aplicar também a função display:

import styled from 'styled-components';
import {
  display,
  positions,
  type DisplayProps,
  type PositionsProps,
} from '@olist/styled-system';

const MyComponent = styled.div<DisplayProps & PositionsProps>`
  ${display}
  ${positions}
`;

// ...

<MyComponent
  display="flex"
  position="relative"
  top="10px"
  left="10px"
  right="0"
  bottom="5px"
  zIndex={1}
/>;

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

propriedadealiasestype
position-PositionProps
positions-PositionsProps
top-TopProps
right-RightProps
bottom-BottomProps
left-LeftProps
zIndex-ZIndexProps