SEED Design
DocsReactLynxAI IntegrationBreeze

Aspect Ratio

가로(width)가 정해지면 비율에 따라 세로(height)가 자동으로 결정되는 레이아웃 컨테이너입니다.

import { AspectRatio, Text, VStack } from "@seed-design/react";

export default function AspectRatioPreview() {
  return (
    <VStack gap="x4">
      <AspectRatio ratio={4 / 3} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">4 / 3</Text>
      </AspectRatio>
      <AspectRatio ratio={1} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">1:1</Text>
      </AspectRatio>
      <AspectRatio ratio={16 / 9} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">16 / 9</Text>
      </AspectRatio>
    </VStack>
  );
}

Usage

import { AspectRatio } from "@seed-design/react";
<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." />
</AspectRatio>

Props

Prop

Type

as?React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined
asChild?boolean | undefined
background?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined
backgroundGradient?"fadeLayerFloating" | "fadeLayerDefault" | "glowMagic" | "glowMagicPressed" | "highlightMagic" | "highlightMagicPressed" | "shimmerMagic" | "shimmerNeutral" | undefined
color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined
borderColor?(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined
borderWidth?0 | 1 | (string & {}) | undefined
borderTopWidth?0 | 1 | (string & {}) | undefined
borderRightWidth?0 | 1 | (string & {}) | undefined
borderBottomWidth?0 | 1 | (string & {}) | undefined
borderLeftWidth?0 | 1 | (string & {}) | undefined
borderRadius?0 | (string & {}) | "full" | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | undefined
borderTopLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderTopRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderBottomRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
borderBottomLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined
boxShadow?(string & {}) | "s1" | "s2" | "s3" | undefined
width?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
minWidth?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
maxWidth?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
height?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
minHeight?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
maxHeight?(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
top?0 | (string & {}) | undefined
left?0 | (string & {}) | undefined
right?0 | (string & {}) | undefined
bottom?0 | (string & {}) | undefined
padding?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
paddingX?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
paddingY?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
paddingTop?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined
paddingRight?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
paddingBottom?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined
paddingLeft?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
display?"none" | "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "inlineFlex" | "inlineBlock" | undefined
zIndex?number | (string & {}) | undefined
flexDirection?"row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse" | undefined
justifyContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | undefined
alignItems?"flex-start" | "flex-end" | "center" | "flexStart" | "flexEnd" | "stretch" | undefined
alignContent?"flex-start" | "flex-end" | "center" | "flexStart" | "flexEnd" | "stretch" | undefined
alignSelf?"flex-start" | "flex-end" | "center" | "flexStart" | "flexEnd" | "stretch" | undefined
gap?0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined
gridColumn?string | undefined
gridRow?string | undefined
unstable_transform?string | undefined
_active?{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined

Examples

Ratio

다양한 비율을 지정할 수 있습니다. 1은 정사각형, 4/3은 일반적인 사진 비율, 16/9는 와이드스크린 비율입니다.

import { AspectRatio, Box, HStack } from "@seed-design/react";

export default function AspectRatioRatio() {
  return (
    <HStack gap="x4">
      <Box width="150px">
        <AspectRatio ratio={1}>
          <img src="https://picsum.photos/seed/square/400/400" alt="1:1 Square" />
        </AspectRatio>
      </Box>
      <Box width="150px">
        <AspectRatio ratio={4 / 3}>
          <img src="https://picsum.photos/seed/4-3/400/300" alt="4:3" />
        </AspectRatio>
      </Box>
      <Box width="150px">
        <AspectRatio ratio={16 / 9}>
          <img src="https://picsum.photos/seed/16-9/400/225" alt="16:9" />
        </AspectRatio>
      </Box>
    </HStack>
  );
}

Last updated on

Article

Article은 일관된 selection 및 줄바꿈 정책을 사용할 수 있게 돕는 유틸리티 컴포넌트입니다.

Avatar

사용자의 프로필 이미지를 표시하는 컴포넌트입니다.

On this page

Usage
Props
Examples
Ratio