스탯 행
라벨(왼쪽)과 값(오른쪽) 한 줄이에요. 값이 길면 줄 대신 말줄임으로 잘려요.
모바일PCPleos · 개발 중StatRow
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 라벨-값 한 줄, 또는 위아래로 쌓은 지표 칸.
인터페이스#
타입에서 자동으로 뽑은 표예요.
StatRow#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| label* | - | ReactNode | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| value* | - | ReactNode | 지금 값이에요. |
| hint | - | string | 값 아래 한 줄이에요. |
| chip | - | ReactNode | |
| color | - | string | |
| divider | true | boolean | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 라벨과 값이 한 줄 글자로 읽혀요. 잘린 값은 화면에서만 잘려요.
가이드라인#
쓰는 규칙#
이렇게 써요
- 라벨은 줄지 않고, 값은 넘치면 …로 잘려요(안 잘림 규약).
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |
| Pleos개발 중 | 차량 앱의 StatRow(공개 저장소)로 따로 구현했어요. 라벨 24dp · 값 30dp. 라벨은 줄지 않고 값이 줄임표로 잘리는 규칙이 웹과 같아요. 라벨 24dp · 값 30dp · 줄 높이 64dp 이상 |