Diverging bar

미리보기

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

사용법

시장 대비 섹터 수익률이나 목표 대비 비중 차이처럼 부호 있는 값을 가운데 선에서 그리세요. 오르면 줄의 끝 쪽으로, 내리면 시작 쪽으로 자랍니다. 나란히 놓인 막대에는 같은 max를 주어 척도를 맞추세요. 오름과 내림은 Stat, Sparkline처럼 추세 색을 받고, 좋고 나쁨이 없는 차이에는 trend='neutral'로 둘 다 브랜드 표식으로 그립니다. 부호 있는 값 여러 개의 순위에는 BarList의 diverging을 쓰세요.

• 0 아래로 내려갈 수 없는 값에는 DivergingBar를 쓰지 마세요. Meter나 BarList를 쓰세요.
• 값을 막대에만 두지 마세요. +4.2%p처럼 부호를 붙여 막대 옆에도 쓰세요.

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

구성

span(role=img, aria-label) → center line + fill toward the inline end (rise) or start (fall)

키보드와 접근성

DivergingBar는 이름 붙은 이미지이며 Tab 순서에 없습니다. label은 "반도체, 시장 대비 +4.2%p"처럼 값과 비교 기준을 말합니다. 오른쪽에서 왼쪽으로 쓸 때는 오름이 왼쪽으로 자랍니다.

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

예시 코드

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

import { DivergingBar } from '@surflane/ui'

<DivergingBar
  value={-2.8}
  max={4.2}
  label='Chemicals, -2.8%p against the market'
/>

주요 API

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

관련 토큰