ScopeCapsule

개요

미리보기

예시 언어동작 줄이기

ScopeAll sources · Last 30 daysGmail · Last 30 daysGoogle Calendar · Last 30 daysGoogle Drive · Last 30 days

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

value

label

open

이름	타입	기본값	설명
`options`	`readonly { value, label, description? }[]`	—	범위 선택지(2–6개). 미리보기는 출처 4개.
`value?`	`string`	`all`	처음 값 / 바깥에서 바뀐 값(all · mail · calendar · docs). 사용자 선택은 onValueChange로 알린다.
`label?`	`string`		패널 안 fieldset의 legend. 비우면 “보기 범위”.
`open?`	`boolean`	`false`	패널을 연다. 카탈로그 프리셋은 무대 안에 정적으로 그린다.
`onValueChange?: (value) => void`	—	—	radio를 바꾸면 즉시 호출(즉시 적용). URL ?scope=는 replaceState로 소비자가 쓴다.
`onOpenChange?: (open) => void`	—	—	열기·닫기(Enter, Esc, 바깥 클릭) 때 호출.
`popover="auto"`	—	—	패널은 네이티브 popover(top layer, 바깥 클릭으로 닫힘). 포털 없음.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. ref는 트리거 <button>. className·style·children은 받지 않는다.

미리보기

예시 언어동작 줄이기

ScopeAll sources · Last 30 daysGmail · Last 30 daysGoogle Calendar · Last 30 daysGoogle Drive · Last 30 days

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

value

label

open

이름	타입	기본값	설명
`options`	`readonly { value, label, description? }[]`	—	범위 선택지(2–6개). 미리보기는 출처 4개.
`value?`	`string`	`all`	처음 값 / 바깥에서 바뀐 값(all · mail · calendar · docs). 사용자 선택은 onValueChange로 알린다.
`label?`	`string`		패널 안 fieldset의 legend. 비우면 “보기 범위”.
`open?`	`boolean`	`false`	패널을 연다. 카탈로그 프리셋은 무대 안에 정적으로 그린다.
`onValueChange?: (value) => void`	—	—	radio를 바꾸면 즉시 호출(즉시 적용). URL ?scope=는 replaceState로 소비자가 쓴다.
`onOpenChange?: (open) => void`	—	—	열기·닫기(Enter, Esc, 바깥 클릭) 때 호출.
`popover="auto"`	—	—	패널은 네이티브 popover(top layer, 바깥 클릭으로 닫힘). 포털 없음.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. ref는 트리거 <button>. className·style·children은 받지 않는다.