Color Swatch
Color Swatch
색상을 미리 볼 때 사용하는 컴포넌트예요. 팔레트나 스와치 미리보기를 만들 때 유용해요.
출처: 문서
본문
사용법 (Usage)
import { ColorSwatch } from "@chakra-ui/react"
<ColorSwatch />
예시 (Examples)
크기 (Sizes)
size prop을 사용하면 컬러 스와치의 크기를 바꿀 수 있어요.
Alpha (알파)
알파 채널이 있는 컬러 스와치를 만드는 예시예요.
배지와 함께 (With Badge)
ColorSwatch를 Badge와 구성하는 예시예요.
혼합 색상 (Mixed Colors)
ColorSwatchMix를 사용하면 여러 색상을 포함하지만 단일 컬러 스와치의 크기를 유지하는 스와치를 만들 수 있어요.
팔레트 (Palette)
여러 스와치를 구성해 팔레트를 만드는 예시예요.
더 알아보기 (Learn more)
Chakra UI의 Color Swatch 컴포넌트에 대해 더 자세히 알아보려면 공식 문서를 확인해 보세요.