layout

Confira as propriedades de estilos destinadas ao layout dos componentes.

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 componente:

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

const MyComponent = (props) => <div style={styleProps(props)} />;

// ...

<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 {
  styleProps,
  type PositionProps,
} from '@olist/styled-system';

const MyComponent = (props: PositionProps) => <div style={styleProps(props)} />;

// ...

<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 {
  styleProps,
  type DisplayProps,
  type PositionsProps,
} from '@olist/styled-system';

const MyComponent = (props: DisplayProps & PositionsProps) => <div style={styleProps(props)} />;

// ...

<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: