Proportion bar

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

긍정·부정·중립 뉴스, 시장별 포트폴리오, 팀별 GPU 시간처럼 전체 하나를 부분으로 나누세요. 부분은 차트의 범주 색을 순서대로 받습니다. 방향으로 읽히는 부분에는 tone을 주세요. up과 down은 추세 색을, flat은 조용한 중립 표식을 씁니다. 범례는 각 부분의 이름과 함께 비율, 값 또는 둘 다를 씁니다.

• 합쳐서 전체가 되지 않는 값에는 ProportionBar를 쓰지 마세요. BarList로 순위를 보여 주세요.
• 읽는 사람이 구별할 수 있는 수, 여섯 개 남짓보다 많이 나누지 마세요. 작은 부분은 기타처럼 하나로 묶으세요.
• 한도에 대한 값 하나에는 ProportionBar를 쓰지 마세요. Meter를 쓰세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

div(role=group, aria-label) → bar (aria-hidden): segment per part above zero; ul legend → li: swatch (aria-hidden) + name + value

키보드와 접근성

ProportionBar는 글 목록을 담은 이름 붙은 그룹입니다. 항목마다 부분의 이름과 값을 읽습니다. 막대는 장식이므로 부분을 색만으로 구별하게 하지 않습니다. legendHidden이어도 범례는 보조 기술에 남습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { ProportionBar } from '@surflane/ui'

<ProportionBar
  label='News sentiment, 25 articles'
  show='both'
  segments={[
    { id: 'positive', label: 'Positive', value: 12, tone: 'up' },
    { id: 'negative', label: 'Negative', value: 5, tone: 'down' },
    { id: 'neutral', label: 'Neutral', value: 8, tone: 'flat' },
  ]}
/>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰