항목

색조와 페인트

학습 안에서

레이아웃은 예제가 제공합니다. 여기서는 빗금 padding 상자와 세 항목 사이의 gap을 사용합니다.

사용 위치: 레이아웃 시스템 가이드.

사용법과 인터페이스

DemoItem은 최소 크기가 3rem이고 내용이 가운데 정렬된 떠 있는 타일 div.ui-item을 렌더링합니다. tone(neutral, blue, violet, amber, green, red)은 data-tone에, variant(soft, solid, outline, ghost)는 data-variant에 대응합니다. 항목에 지정한 유틸리티가 크기와 레이아웃을 정합니다.

<Demo>  <div className="flex gap-sm">    <DemoItem>Context</DemoItem>    <DemoItem tone="blue">Subject</DemoItem>  </div></Demo>

<div class="ui-item">Context</div><div class="ui-item" data-tone="blue">Subject</div><div class="ui-item" data-tone="violet" data-variant="outline">Compare</div>

맥락에는 neutral, 대상에는 blue, 비교 대상에는 violet을 사용하고 모든 색조에 범례나 레이블로 이름을 붙이세요. 항목은 상호작용이 없는 div입니다. 동작에는 네이티브 버튼이나 링크를 사용하세요.