WidgetGrid

오늘 탭 위젯 격자. 휴대폰 2열, 넓은 화면 4열.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

오늘

Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21

title

titleHidden

mode

columns

unit

예시

상태

출시 배치
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
휴대폰 (2열)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
넓은 화면 (4열)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
편집 (이후 단계)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Rediscover size
Before next event
Example
2:00 PM Quarterly plan review
Before next event size
Needs review
Example
2 sentences
Needs review size
Connections
Example
Gmail · Calendar
Connections size
This week
Example
4 on your calendar · 12 received
This week size
Scanned dates
Example
Mar 4 – Oct 21
Scanned dates size
172px 단위 · 빈 칸
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21

이렇게 · 이렇게 하지 않기

이렇게 출시 기간에는 순서를 고정하고 사용자에게 배치를 맡기지 않는다.
이렇게 하지 않기 한 화면의 색면 위젯은 3개를 넘기지 않는다.
이렇게 0일 때 숨는 위젯이 빠지면 다음 위젯이 자리를 채운다. 위젯이 미끄러지지 않고 즉시 바뀐다.
이렇게 하지 않기 grid-auto-flow: dense나 order로 순서를 바꾸지 않는다. 화면 순서 = DOM 순서.
이렇게 21st 참고: Draggable Widget Grid(carolinaraulino — list/listitem + aria-posinset, 키보드 사용법 문장), Draggable Grid Dashboard(uilayout default-swapy), Financial Bento Grid(uiable), bento grid 01(avanishverma4). 끌어서 배치·크기 바꾸기는 편집 모드(이후)로 미뤘고, 가짜 KPI 타일은 쓰지 않았다.

21st — Draggable Widget Grid (carolinaraulino) ↗

토큰과 속성

이름	타입	기본값	설명
`title`	`string`	`오늘`	섹션 제목(h2, tabindex=-1 — 위젯이 사라질 때 마지막 초점 대상).
`titleHidden?`	`boolean`	`false`	제목을 보조기기에만 남긴다(화면 제목이 이미 같은 말일 때).
`items`	`readonly WidgetGridEntry[]`	—	위젯 { id, name, size, sizes?, content, hidden? } 또는 빈 칸 { id, empty: true, size?, label? }. sizes = 그 위젯이 가진 크기(편집 모드는 이것만 고르게 한다). hidden이면 그리지 않고 다음 위젯이 자리를 채운다. 빈 칸은 onAdd가 있으면 "+" 버튼. 미리보기: 출시 6종 순서.
`mode?`	`'fixed' \| 'edit'`	`fixed`	fixed = 출시 고정 순서. edit = 앞/뒤로·크기 조절(출시 이후).
`columns?`	`'auto' \| 1 … 12 ('2' \| '4' kept)`	`auto`	auto = 섹션 폭 768px 미만 2열, 이상 4열(뷰포트가 아니라 컨테이너 기준). 숫자 = 그 열 수로 고정(1열이면 모두 한 칸, 2–3열이면 XL은 L로, 4열 이상이면 XL이 4칸).
`unit?`	`string (CSS length)`		고정 정사각 단위(예: 172px, 랩 단위). 열은 이 폭, 행은 최소 이 높이(텍스트 간격이 늘면 행이 자란다). 비우면 폭을 나눠 쓴다.
`onItemsChange?: (items) => void`	—	—	편집 모드에서 순서·크기가 바뀔 때.
`onAdd?: (slotId, index) => void`	—	—	빈 칸 { id, empty: true }의 "+" 버튼을 눌렀을 때(위젯 고르기를 연다). 없으면 빈 칸은 조용한 빈 자리로만 그린다. 이름은 label 또는 “위젯 추가 (n)”.
`item.sizes?: readonly ('s' \| 'm' \| 'l' \| 'xl')[]`	—	—	그 위젯이 가진 크기(GeneralEntry.sizes). 편집 모드의 크기 선택은 이것만 보여 주고, 하나뿐이면 선택 자체를 그리지 않는다.
`announce() — a11y/announce.ts`	—	—	편집 모드의 이동만 polite로 알린다(“잊고 있던 기록, 6개 중 2번째”). 위젯이 나타나거나 숨겨지는 것은 알리지 않는다.
그 밖의 속성	—	—	id, data-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

오늘

Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21

title

titleHidden

mode

columns

unit

예시

상태

출시 배치
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
휴대폰 (2열)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
넓은 화면 (4열)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21
편집 (이후 단계)
오늘
Rediscover
Example
2 weeks ago · Oct 7
Rediscover size
Before next event
Example
2:00 PM Quarterly plan review
Before next event size
Needs review
Example
2 sentences
Needs review size
Connections
Example
Gmail · Calendar
Connections size
This week
Example
4 on your calendar · 12 received
This week size
Scanned dates
Example
Mar 4 – Oct 21
Scanned dates size
172px 단위 · 빈 칸
오늘
Rediscover
Example
2 weeks ago · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
Needs review
Example
2 sentences
Connections
Example
Gmail · Calendar
This week
Example
4 on your calendar · 12 received
Scanned dates
Example
Mar 4 – Oct 21

이렇게 · 이렇게 하지 않기

이렇게 출시 기간에는 순서를 고정하고 사용자에게 배치를 맡기지 않는다.

이렇게 하지 않기 한 화면의 색면 위젯은 3개를 넘기지 않는다.

이렇게 0일 때 숨는 위젯이 빠지면 다음 위젯이 자리를 채운다. 위젯이 미끄러지지 않고 즉시 바뀐다.

이렇게 하지 않기 grid-auto-flow: dense나 order로 순서를 바꾸지 않는다. 화면 순서 = DOM 순서.

이렇게 21st 참고: Draggable Widget Grid(carolinaraulino — list/listitem + aria-posinset, 키보드 사용법 문장), Draggable Grid Dashboard(uilayout default-swapy), Financial Bento Grid(uiable), bento grid 01(avanishverma4). 끌어서 배치·크기 바꾸기는 편집 모드(이후)로 미뤘고, 가짜 KPI 타일은 쓰지 않았다.

토큰과 속성

이름	타입	기본값	설명
`title`	`string`	`오늘`	섹션 제목(h2, tabindex=-1 — 위젯이 사라질 때 마지막 초점 대상).
`titleHidden?`	`boolean`	`false`	제목을 보조기기에만 남긴다(화면 제목이 이미 같은 말일 때).
`items`	`readonly WidgetGridEntry[]`	—	위젯 { id, name, size, sizes?, content, hidden? } 또는 빈 칸 { id, empty: true, size?, label? }. sizes = 그 위젯이 가진 크기(편집 모드는 이것만 고르게 한다). hidden이면 그리지 않고 다음 위젯이 자리를 채운다. 빈 칸은 onAdd가 있으면 "+" 버튼. 미리보기: 출시 6종 순서.
`mode?`	`'fixed' \| 'edit'`	`fixed`	fixed = 출시 고정 순서. edit = 앞/뒤로·크기 조절(출시 이후).
`columns?`	`'auto' \| 1 … 12 ('2' \| '4' kept)`	`auto`	auto = 섹션 폭 768px 미만 2열, 이상 4열(뷰포트가 아니라 컨테이너 기준). 숫자 = 그 열 수로 고정(1열이면 모두 한 칸, 2–3열이면 XL은 L로, 4열 이상이면 XL이 4칸).
`unit?`	`string (CSS length)`		고정 정사각 단위(예: 172px, 랩 단위). 열은 이 폭, 행은 최소 이 높이(텍스트 간격이 늘면 행이 자란다). 비우면 폭을 나눠 쓴다.
`onItemsChange?: (items) => void`	—	—	편집 모드에서 순서·크기가 바뀔 때.
`onAdd?: (slotId, index) => void`	—	—	빈 칸 { id, empty: true }의 "+" 버튼을 눌렀을 때(위젯 고르기를 연다). 없으면 빈 칸은 조용한 빈 자리로만 그린다. 이름은 label 또는 “위젯 추가 (n)”.
`item.sizes?: readonly ('s' \| 'm' \| 'l' \| 'xl')[]`	—	—	그 위젯이 가진 크기(GeneralEntry.sizes). 편집 모드의 크기 선택은 이것만 보여 주고, 하나뿐이면 선택 자체를 그리지 않는다.
`announce() — a11y/announce.ts`	—	—	편집 모드의 이동만 polite로 알린다(“잊고 있던 기록, 6개 중 2번째”). 위젯이 나타나거나 숨겨지는 것은 알리지 않는다.
그 밖의 속성	—	—	id, data-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

오늘

예시

상태

오늘

오늘

오늘

오늘

오늘

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

오늘

예시

상태

오늘

오늘

오늘

오늘

오늘

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기