ListRow
기록·연결·설정 한 줄. 왼쪽 제목, 오른쪽 값.
- 출시 화면에서 사용
개요
예시
상태
링크 · 2줄
1줄 + 값
선택됨
새 기록
추정
검토 필요
원문 열 수 없음
직접 작성
설정(스위치)
정적
- 버전4.0
보조 행동
비활성
혼합 언어 원문
쓰임 예
연결 행
이렇게 · 이렇게 하지 않기
- 이렇게 행 하나는 링크 하나다(?item=).
- 이렇게 오른쪽 값에는 출처·날짜 같은 사실만 두고 예외 라벨은 제목 아래 줄에 둔다.
- 이렇게 하지 않기 원문 제목은 번역하지 않는다.
- 이렇게 하지 않기 링크 안에 버튼을 넣지 않는다. 보조 행동은 최대 1개이고 링크 밖 형제다.
- 이렇게 하지 않기 verified(원문 일치)에 라벨을 붙이지 않는다. 예외만 라벨로 보인다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
kind? | 'link' | 'button' | 'static' | 'control' | link | 주 대상의 요소. link = <a href>(이동), button = 이 화면의 행동, static = 텍스트, control = <label> + Switch/Checkbox. |
title | ReactNode | 3분기 로드맵 검토 회의 | 행 제목 = 접근 이름. 사용자 원문은 번역하지 않고 dir="auto". |
description? | ReactNode | Google Calendar · 10월 7일 | 둘째 줄(출처 · 날짜, 설정 설명). aria-describedby로 붙는다. 비우면 한 줄. |
value? | ReactNode | | 오른쪽 사실 값(출처, 날짜, 현재 설정값). |
icon? | ReactNode | none | 앞쪽 장식 아이콘. |
href? | string | ?item=42 | link일 때 목적지(?item=id). |
chevron? | boolean | true | link·button 행의 chevron. |
selected? | boolean | false | 상세가 열린 행. aria-current="true". |
unread? | boolean | false | 아직 열지 않음. 점 + 보조기기용 “새 기록”. 점만으로 표시하지 않는다. |
exception? | 'none' | 'inferred' | 'needs-review' | 'source-unavailable' | 'self-stated' | none | 제목 아래 예외 라벨(아이콘 + 글자). verified는 라벨 없이 SourceLine만. |
secondaryAction? | ReactNode | none | 보조 행동 하나(IconButton/Button). 링크 밖의 형제 요소다. 미리보기는 아이콘을 IconButton으로 감싼다. |
control? | ReactNode | — | kind="control"일 때 <label>이 감싸는 Switch/Checkbox. |
disabled? | boolean | false | button·control 행만. 이유를 목록 가까이에 적는다. |
onActivate?: () => void | — | — | 주 대상(링크·버튼)을 눌렀을 때 호출된다. |
<ul> | — | — | ListRow는 <li>다. <ul> 또는 GroupedList 안에 둔다. |
ref | — | — | ref는 <li>로 전달된다. |
| 그 밖의 속성 | — | — | id, data-*, aria-* 등 네이티브 li 속성은 <li>로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: Enter(주 대상) → Tab(보조 행동). 목록 화살표 이동은 없다.
- 행 링크에 초점이 가면 행 전체에 링을 그린다. 상세를 닫으면 이 행으로 초점이 돌아온다(SplitView).
- 링크 이름 = 제목. 출처·날짜·예외 라벨은 aria-describedby로 붙여 이름을 길게 만들지 않는다.
- forced-colors에서 선택 행은 Highlight 테두리로 보인다.