스파크라인
행·카드 안의 작은 추세선이에요. 끝점이 맥동해 지금 값을 가리켜요.
모바일PCSparkSvg · Sparkline
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 숫자 옆 한 줄 추세.
인터페이스#
타입에서 자동으로 뽑은 표예요.
SparkSvg#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| w* | - | number | 창의 폭(px)이에요. |
| h* | - | number | |
| pts* | - | string | |
| color* | - | string | |
| tip | - | { x: number; y: number; } | |
| tipMax | SPARK_TIP_R | number | |
| dotR | 2.2 | number | |
| area | - | boolean | |
| baselineY | - | number | |
| draw | - | boolean | |
| strokeWidth | STROKE.spark | number | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
Sparkline#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| data | - | number[] | |
| w | 84 | number | 창의 폭(px)이에요. |
| h | 28 | number | |
| strokeWidth | STROKE.spark | number | |
| glow | true | boolean | |
| up | - | boolean | |
| pending | - | boolean |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 그림은 읽지 않아요(aria-hidden). 값은 옆 글자로 알려요.
가이드라인#
쓰는 규칙#
이렇게 써요
- 오른쪽 끝을 원 반지름만큼 비워 둬요 - 잘리지 않게 그림이 안으로 들어와 있어요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |