컴포넌트

색상 견본

이름이 있는 역할과 실제 색상 면입니다.

역할과 단계

Canvasbg-surface-canvas

Raisedbg-surface-raised

Insetbg-surface-inset

Blue 60bg-blue-60

사용 위치: 디자인 시스템 개요.

사용법과 인터페이스

DemoSwatch는 class와 style을 받는 ui-swatch-paint 면과 label 및 선택적 value가 있는 캡션으로 이루어진 figure.ui-swatch를 렌더링합니다.

<DemoSwatch label="Raised" value="bg-surface-raised" className="bg-surface-raised" />

<figure class="ui-swatch">  <div class="ui-swatch-paint bg-surface-raised" aria-hidden="true"></div>  <figcaption><b>Raised</b><code>bg-surface-raised</code></figcaption></figure>

설명하는 프리셋 유틸리티로 면을 칠해 이름과 실제 색이 같은 소스에서 나오도록 하세요.