Accordion

관련 내용을 각각 펼치고 접을 수 있는 여러 영역으로 구성합니다.

용법

하나만 선택

한 번에 하나의 값만 활성화하고 키보드나 포인터로 이동해 선택합니다.

<!-- Accordion / Single -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

여러 항목 선택

기존 선택을 유지하면서 여러 값을 각각 선택하거나 해제합니다.

<!-- Accordion / Multiple -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="multiple"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

필수 선택

항상 하나의 값이 선택되거나 하나의 영역이 펼쳐진 상태를 유지합니다.

Build targets and release protection. Expanded

<!-- Accordion / Required -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    default-value="deployments"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

외부 상태 관리

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

<!-- Accordion / Controlled -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

API

Vue 패키지: @sectile/vue/accordion

컴포넌트

AccordionRoot
AccordionItem
AccordionHeader
AccordionTrigger
AccordionContent

Props

`AccordionRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
collapsible: 타입boolean기본값true
마지막으로 펼친 항목까지 접을 수 있는지 여부입니다.
defaultValue: 타입AccordionValue기본값undefined
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값[]
포커스와 선택 대상에서 제외할 항목 값입니다.
items: 타입readonly string[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
modelValue: 타입AccordionValue기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
type: 타입AccordionType기본값'single'
컴포넌트가 사용할 선택 또는 동작 방식입니다.

`AccordionItemProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
value: 타입string기본값필수
이 계약이 노출하는 현재 값입니다.

`AccordionPartProps`

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

슬롯

`AccordionRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입AccordionValue
이 계약이 노출하는 현재 값입니다.

`AccordionItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`AccordionRoot`

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

기타 타입

`AccordionType`

type AccordionType = 'single' | 'multiple'

`AccordionValue`

type AccordionValue = string | readonly string[]

`AccordionValueChangeHandler`

type AccordionValueChangeHandler = (value: AccordionValue) => void

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`item`	`[data-part="item"]`	선택하거나 실행할 수 있는 항목 하나입니다.	—
`header`	`[data-part="header"]`	펼칠 수 있는 항목의 의미론적 제목입니다.	—
`trigger`	`[data-part="trigger"]`	연결된 콘텐츠를 열고 닫거나 활성화합니다.	—
`content`	`[data-part="content"]`	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—

키보드 동작

키	동작
`Enter` / `Space`	포커스된 절을 펼치거나 접습니다.
`Arrow Up` / `Arrow Down`	절 실행 요소 사이에서 포커스를 이동합니다.
`Home` / `End`	첫 번째 또는 마지막 절 실행 요소로 이동합니다.

접근성

절 실행 요소가 펼침 상태와 연결된 내용 영역을 노출합니다.

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

Accordion ​

용법 ​

하나만 선택 ​

General

Deployments

Danger zone

여러 항목 선택 ​

General

Deployments

Danger zone

필수 선택 ​

General

Deployments

Danger zone

외부 상태 관리 ​

General

Deployments

Danger zone

API ​

Props ​

AccordionRootProps ​

AccordionItemProps ​

AccordionPartProps ​

슬롯 ​

AccordionRootSlotProps ​

AccordionItemSlotProps ​

이벤트 ​

AccordionRoot ​

기타 타입 ​

AccordionType ​

AccordionValue ​

AccordionValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​

Accordion

용법

하나만 선택

여러 항목 선택

필수 선택

외부 상태 관리

API

Props

`AccordionRootProps`

`AccordionItemProps`

`AccordionPartProps`

슬롯

`AccordionRootSlotProps`

`AccordionItemSlotProps`

이벤트

`AccordionRoot`

기타 타입

`AccordionType`

`AccordionValue`

`AccordionValueChangeHandler`

파트

키보드 동작

접근성