ImageThumbnail

<ImageThumbnail /> 는 Image 컴포넌트를 기반으로, 오버레이가 추가된 썸네일용 컴포넌트입니다.

<ImageThumbnail src="https://picsum.photos/100" aspectRatio={1} width="25%" />

<ImageThumbnail
  src="https://picsum.photos/100"
  aspectRatio={1}
  width="25%"
/>

Loading...

How to use

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

Properties

Prop	Type	Default	Description
width	number | string	"100%"	너비를 지정합니다.
rounded	none | sm | md | lg | xl | xxl	full	테두리 굴곡을 설정합니다.
borderRadiusLevel(deprecated)	0 | 1 | 2 | 3 | 4 | 5	0	테두리 굴곡을 설정합니다.
src(*)	string | -	-	이미지의 소스를 지정합니다.
loading	eager | lazy	lazy	이미지의 로딩 방식을 지정합니다.
dim(#오버레이)	boolean	true	이미지 위에 적용될 오버레이 색상의 유무를 지정합니다.
aspectRatio (*)	number	-	이미지의 비율을 설정합니다.
alt	string	-	이미지 대체 텍스트를 지정합니다.

Usage

오버레이

dim 속성에 boolean 값 입력을 통해, ImageThumbnail 이미지 위에 오버레이를 지정 여부를 설정할 수 있습니다.

<HStack spacing={10}> <ImageThumbnail src="https://picsum.photos/100" aspectRatio={1} width="25%" dim={true} /> <ImageThumbnail src="https://picsum.photos/100" aspectRatio={1} width="25%" dim={false} /> </HStack>

<HStack spacing={10}>
  <ImageThumbnail
    src="https://picsum.photos/100"
    aspectRatio={1}
    width="25%"
    dim={true}
  />

  <ImageThumbnail
    src="https://picsum.photos/100"
    aspectRatio={1}
    width="25%"
    dim={false}
  />
</HStack>

Loading...