Disclosure

하나의 실행 요소로 선택적인 내용을 펼치고 접습니다.

용법

닫힌 상태

닫힌 상태에서 시작하고 연결된 실행 요소를 눌렀을 때만 엽니다.

<!-- Disclosure / Closed -->
<script setup lang="ts">
import { DisclosureContent, DisclosureRoot, DisclosureTrigger } from '@sectile/vue/disclosure'
</script>
<template>
  <DisclosureRoot :default-value="false">
    <DisclosureTrigger>Advanced options</DisclosureTrigger>
    <DisclosureContent>Configuration</DisclosureContent>
  </DisclosureRoot>
</template>

열림 상태

열린 상태에서 시작해 포커스, 닫힘, 화면 배치를 바로 확인합니다.

Browser-defined button focus stays intact while Sectile owns only the open-state transition.

<!-- Disclosure / Open -->
<script setup lang="ts">
import { DisclosureContent, DisclosureRoot, DisclosureTrigger } from '@sectile/vue/disclosure'
</script>
<template>
  <DisclosureRoot :default-value="false">
    <DisclosureTrigger>Advanced options</DisclosureTrigger>
    <DisclosureContent>Configuration</DisclosureContent>
  </DisclosureRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

Browser-defined button focus stays intact while Sectile owns only the open-state transition.

<!-- Disclosure / Controlled -->
<script setup lang="ts">
import { DisclosureContent, DisclosureRoot, DisclosureTrigger } from '@sectile/vue/disclosure'
</script>
<template>
  <DisclosureRoot :default-value="false">
    <DisclosureTrigger>Advanced options</DisclosureTrigger>
    <DisclosureContent>Configuration</DisclosureContent>
  </DisclosureRoot>
</template>

API

Vue 패키지: @sectile/vue/disclosure

컴포넌트

DisclosureRoot
DisclosureTrigger
DisclosureContent

Props

`DisclosureRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
contentId: 타입string기본값undefined
이 실행 요소가 제어하는 콘텐츠의 ID입니다.
defaultValue: 타입boolean기본값false
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
modelValue: 타입boolean기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.

`DisclosureTriggerProps`

as: 타입PrimitiveAs기본값'button'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

`DisclosureContentProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`DisclosureSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.

이벤트

`DisclosureRoot`

update:modelValue: 페이로드boolean
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`DisclosureValueChangeHandler`

type DisclosureValueChangeHandler = (value: boolean) => void

파트

공통 범위: [data-scope="disclosure"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`trigger`	`[data-part="trigger"]`	연결된 콘텐츠를 열고 닫거나 활성화합니다.	—
`content`	`[data-part="content"]`	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—

키보드 동작

키	동작
`Enter` / `Space`	연결된 내용을 펼치거나 접습니다.
`Tab`	실행 요소와 주변 컨트롤 사이를 이동합니다.

접근성

실행 요소가 펼침 상태와 연결된 내용의 관계를 노출합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Disclosure ​

용법 ​

닫힌 상태 ​

열림 상태 ​

외부 상태 관리 ​

API ​

Props ​

DisclosureRootProps ​

DisclosureTriggerProps ​

DisclosureContentProps ​

슬롯 ​

DisclosureSlotProps ​

이벤트 ​

DisclosureRoot ​

기타 타입 ​

DisclosureValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​