position

position

CSS position과 position에 연관된 프로퍼티(top, right, bottom, left)를 쉽게 선언할 수 있도록 하는 shorthand 유틸리티입니다.

type CSSPixelValue = string | number;

function position(
  position: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky',
  top: CSSPixelValue,
  right: CSSPixelValue,
  bottom: CSSPixelValue,
  left: CSSPixelValue
): SerializedStyles;

function position(
  top: CSSPixelValue,
  right: CSSPixelValue,
  bottom: CSSPixelValue,
  left: CSSPixelValue
): SerializedStyles;

Examples

import { position } from '@toss/emotion-utils';

const fullPageLayer = position('fixed', 0, 0, 0, 0);
// 위 코드는 아래 코드와 동치입니다.
const fullPageLayer = css`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;

// 첫번째 인자를 생략하고 `top` 부터 넘길 수 있습니다.
const allZero = position(0, 0, 0, 0);

// 다음처럼도 사용 가능합니다
position('absolute', {top: 0, left: 0});

// 다음처럼도 사용 가능합니다(absolute, fixed, sticky)
position.absolute(0, 0, 0, ,0);
position.absolute({top: 0, left: 0});