Ratio

<Ratio />는 너비에 따라 특정 비율을 유지하는 컴포넌트입니다.

<Ratio ratio={1} width={200}> <Box width="100%" height="100%" backgroundColor="primary" /> </Ratio>

<Ratio ratio={1} width={200}>
  <Box
    width="100%"
    height="100%"
    backgroundColor="primary"
  />
</Ratio>

Loading...

How to use

import { Ratio } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
ratio	number		가로세로비를 지정합니다.
width	stretch | start	100%	너비를 지정합니다.
maxWidth	number | string		최대 너비를 지정합니다.
minWidth	number | string		최소 너비를 지정합니다.