WidgetGallery
위젯을 추가하고 크기를 고르는 시트.
- 라이브러리 전용
개요
미리보기
예시
상태
닫힘 (트리거)
목록 · 추가됨 포함
일정과 준비 묶음
XL 선택(1024 미만이면 불가)
이렇게 · 이렇게 하지 않기
- 이렇게 하지 않기 출시 후 단계의 기능이며 출시 화면에는 쓰지 않는다.
- 이렇게 위젯마다 무엇을 보여주는지 한 줄로 쓰고, 크기별 미리보기는 같은 사실을 보여준다.
- 이렇게 하지 않기 추천 순위나 “인기” 표시는 하지 않는다. 사용량 순으로 정렬하지 않는다.
- 이렇게 21st 참고: Draggable Grid Dashboard(uilayout default-swapy), Draggable Widget Grid(carolinaraulino), Card Tabs(uiable), Weather tile grid(vijayksingh). 위젯 고르기 시트에 맞는 결과가 없어 iOS 위젯 갤러리(이름 · 한 줄 설명 · 크기 미리보기 · 추가)를 기준으로 삼았다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
open? | boolean | false | 바뀌면 시트를 열고 닫는다(showModal). 카탈로그는 비모달로 그린다. |
group? | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | A | 처음 보여 줄 묶음 탭(widgets.md §7의 A–H). |
size? | 's' | 'm' | 'l' | 'xl' | m | 위젯마다 처음 고른 크기. 그 크기가 없으면 가장 작은 크기. XL은 1024px 미만에서 고를 수 없다. |
added? | readonly string[] | — | 이미 오늘 탭에 있는 위젯 id. “추가됨”(aria-disabled + 글자). 미리보기는 A1 잊고 있던 기록. |
onAdd?: (id, size) => void | — | — | 추가하면 시트가 닫힌다. 부르는 쪽은 새 위젯의 제목 링크로 초점을 옮긴다. |
onOpenChange · announce() | — | — | 열림 변화, LiveAnnouncer polite “잊고 있던 기록 위젯을 추가했어요”. |
widget-catalog.ts | — | — | 48종 이름·목적·크기는 카피 덱 §6과 계약 표에서 만든 데이터 파일이다. 문서가 원천이다. |
| 그 밖의 속성 | — | — | id, data-* 등 네이티브 div 속성은 바깥 래퍼로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: Sheet: Esc 닫기. 묶음 탭: ←→ Home End(roving). 크기는 라디오 묶음(화살표). 추가는 버튼.
- 공용 Sheet(시트 열림·닫힘·초점·Esc·배경), Tabs(묶음, 수동 활성화), RadioGroup(크기)을 쓴다. 이 컴포넌트는 위젯 목록만 그린다.
- XL을 고를 수 없을 때는 그 크기 radio가 disabled이고 이유가 RadioGroup 도움말(aria-describedby)로 보인다. 추가 버튼 이름은 “위젯 추가: {이름}”(보이는 글자가 앞).
- 추가하면 공용 announce()로 “잊고 있던 기록 위젯을 추가했어요”를 알리고 시트를 닫는다.