KeyValueList
출처·받은 시각·읽은 시각 같은 상세 메타.
- 출시 화면에서 사용
개요
미리보기
- Source
- Gmail
- Received
- Scanned
- Source language
- Unknown
예시
상태
자동
- Source
- Gmail
- Received
- Scanned
- Source language
- Unknown
한 줄
- Source
- Gmail
- Received
- Scanned
- Source language
- Unknown
위아래(320)
- Source
- Gmail
- Received
- Scanned
- Source language
- Unknown
이렇게 · 이렇게 하지 않기
- 이렇게 사실 메타데이터만 쓴다.
- 이렇게 “받은 시각”과 “읽은 시각”을 구분하고 시스템 행위는 “읽음”으로만 쓴다.
- 이렇게 하지 않기 값이 없으면 빈칸이나 “—”로 두지 않는다. “알 수 없음”을 쓴다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
layout? | 'auto' | 'stacked' | 'inline' | auto | auto는 자리가 있으면 한 줄(키 | 값), 좁으면 위아래(컨테이너 쿼리). |
items | readonly { id, label, value?, datetime? }[] | — | 행 목록. value가 없으면 “알 수 없음”. datetime이 있으면 <time>으로 감싼다. 미리보기는 4행(하나는 값 없음). |
ref | — | — | ref는 <dl>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 dl 속성은 <dl>로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 초점을 받지 않는다(값 안의 링크만).
- <dl>/<dt>/<dd> 구조라 보조기기가 키와 값을 짝지어 읽는다. 날짜는 <time datetime>.
- 값 없음은 글자로 쓴다(색이나 빈칸만으로 표시하지 않음).