WidgetHeader

아이콘, 위젯 이름, 선택적 더보기 메뉴.

개요

미리보기

예시 언어동작 줄이기

size

title

href

icon

overflow

exception

titleId

이렇게 위젯 이름만 보고 탭한 결과를 예측할 수 있게 쓴다.
이렇게 M·L·XL에서는 이름이 링크이고, S에서는 위젯 전체가 링크라서 머리글은 링크가 아니다.
이렇게 하지 않기 이름에 개수를 붙이지 않는다.
이렇게 21st 참고: 적합한 결과가 없어 Apple HIG 위젯 머리글과 Draggable Widget Grid(carolinaraulino)의 위젯 제목 구조를 기준으로 삼았다.

이름	타입	기본값	설명
`size?`	`'s' \| 'm' \| 'l' \| 'xl'`	`m`	S는 위젯 전체가 링크라 이름이 글자. M/L/XL은 이름이 링크(“모두 보기” 목적지).
`title`	`string`	`잊고 있던 기록`	위젯 이름(카피 덱 §6). 이름에 개수를 붙이지 않는다. 한 줄 말줄임.
`href?`	`string`		M/L/XL의 목적지. S에서는 무시한다.
`icon?`	`ReactNode`	`none`	16px 장식 아이콘(aria-hidden). 미리보기는 비우면 시계 아이콘.
`overflow?`	`boolean`	`false`	더보기 IconButton(“{이름} 위젯 옵션”). M/L/XL만. S에는 두 번째 조작을 둘 수 없다.
`exception?`	`'none' \| 'needs-review' \| 'source-unavailable'`	`none`	S에서도 반드시 보이는 예외 라벨. 접근 이름에도 들어간다.
`titleId?`	`string`		<h3> id. 위젯 <article aria-labelledby>가 가리킨다. 비우면 자동.
`onOverflow?: () => void`	—	—	더보기 버튼. Menu 계약으로 연다.
`--cb-focus · --cb-focus-ring`	—	—	색면 위에서는 위젯 프레임이 두 변수를 --cb-field-<색면>-focus로 덮어쓴다(이하린 §8). 제목 링크 링은 --cb-focus-ring을 읽는다.
그 밖의 속성	—	—	id, data-* 등 네이티브 header 속성은 그대로 전달된다. className·style·children은 받지 않는다.

이렇게 · 이렇게 하지 않기

이렇게 위젯 이름만 보고 탭한 결과를 예측할 수 있게 쓴다.

이렇게 M·L·XL에서는 이름이 링크이고, S에서는 위젯 전체가 링크라서 머리글은 링크가 아니다.

이렇게 하지 않기 이름에 개수를 붙이지 않는다.

이렇게 21st 참고: 적합한 결과가 없어 Apple HIG 위젯 머리글과 Draggable Widget Grid(carolinaraulino)의 위젯 제목 구조를 기준으로 삼았다.

토큰과 속성

이름	타입	기본값	설명
`size?`	`'s' \| 'm' \| 'l' \| 'xl'`	`m`	S는 위젯 전체가 링크라 이름이 글자. M/L/XL은 이름이 링크(“모두 보기” 목적지).
`title`	`string`	`잊고 있던 기록`	위젯 이름(카피 덱 §6). 이름에 개수를 붙이지 않는다. 한 줄 말줄임.
`href?`	`string`		M/L/XL의 목적지. S에서는 무시한다.
`icon?`	`ReactNode`	`none`	16px 장식 아이콘(aria-hidden). 미리보기는 비우면 시계 아이콘.
`overflow?`	`boolean`	`false`	더보기 IconButton(“{이름} 위젯 옵션”). M/L/XL만. S에는 두 번째 조작을 둘 수 없다.
`exception?`	`'none' \| 'needs-review' \| 'source-unavailable'`	`none`	S에서도 반드시 보이는 예외 라벨. 접근 이름에도 들어간다.
`titleId?`	`string`		<h3> id. 위젯 <article aria-labelledby>가 가리킨다. 비우면 자동.
`onOverflow?: () => void`	—	—	더보기 버튼. Menu 계약으로 연다.
`--cb-focus · --cb-focus-ring`	—	—	색면 위에서는 위젯 프레임이 두 변수를 --cb-field-<색면>-focus로 덮어쓴다(이하린 §8). 제목 링크 링은 --cb-focus-ring을 읽는다.
그 밖의 속성	—	—	id, data-* 등 네이티브 header 속성은 그대로 전달된다. className·style·children은 받지 않는다.