ColorSwatch

ColorSwatch (색상 견본)

ColorSwatch 컴포넌트는 색상을 시각적으로 보여 주는 컴포넌트예요. 폴리모픽 컴포넌트라서 루트 요소를 바꿀 수 있어요.

출처: 문서

본문

ColorSwatch에는 color prop으로 색상을 전달해요. CSS 색상, rgba, Mantine 테마 색상 변수 등을 사용할 수 있어요.

import { ColorSwatch, Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <ColorSwatch color="#009790" />
      <ColorSwatch color="rgba(234, 22, 174, 0.5)" />
      <ColorSwatch color="var(--mantine-color-orange-5)" />
    </Group>
  );
}

withShadow

기본적으로 ColorSwatch는 밝은 배경에서 더 잘 보이도록 내부 box-shadow를 가져요. withShadow={false} prop으로 비활성화할 수 있어요.

import { ColorSwatch } from '@mantine/core';

function Demo() {
  return <ColorSwatch color="rgba(255, 255, 255, 0.7)" />;
}

폴리모픽 컴포넌트

ColorSwatch는 폴리모픽 컴포넌트예요. 기본 루트 요소는 div지만, component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

import { ColorSwatch } from '@mantine/core';

function Demo() {
  return <ColorSwatch component="button" />;
}

TypeScript와 함께 쓰는 폴리모픽 컴포넌트

폴리모픽 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 props를 확장하지 않아요. 예를 들어 ColorSwatchProps는 div가 기본 요소임에도 React.ComponentProps를 확장하지 않아요.

폴리모픽(또는 component prop을 지원하지 않는) 컴포넌트의 wrapper를 만들고 싶다면, 컴포넌트 props 인터페이스가 HTML 요소 props를 확장하도록 해야 해요.

import type { ColorSwatchProps, ElementProps } from '@mantine/core';

interface MyColorSwatchProps extends ColorSwatchProps,
  ElementProps<'button', keyof ColorSwatchProps> {}

래핑 후에도 컴포넌트가 폴리모픽으로 유지되길 원한다면, 가이드에서 설명하는 polymorphic 함수를 사용해요.

ColorSwatch를 버튼으로 사용하는 예시:

import { useState } from 'react';
import { ColorSwatch, CheckIcon } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(true);

  return (
    <ColorSwatch
      component="button"
      color="var(--mantine-color-grape-6)"
      onClick={() => setChecked((c) => !c)}
      style={{ color: '#fff', cursor: 'pointer' }}
    >
      {checked && <CheckIcon size={12} />}
    </ColorSwatch>
  );
}

더 알아보기 (Learn more)