탐색
컴포넌트

범례

학습용 색상마다 보이는 이름을 붙입니다.

맥락, 대상, 비교 대상

01
02
03
  • Context
  • Subject
  • Comparison

결과

  • Measured
  • Passes
  • Fails

사용 위치: Axes.

사용법과 인터페이스

DemoLegend는 items로 ul.ui-legend를 렌더링합니다. 각 { label, tone }은 색상 칩과 이름이 있는 목록 항목이 됩니다. 트레이 캡션이나 스테이지 옆에 배치하세요.

<Demo caption={<DemoLegend items={[{ label: 'Subject', tone: 'blue' }, { label: 'Comparison', tone: 'violet' }]} />}>  …</Demo>
<ul class="ui-legend" aria-label="Legend">  <li><i data-tone="blue" aria-hidden="true"></i>Subject</li>  <li><i data-tone="violet" aria-hidden="true"></i>Comparison</li></ul>