KRDS Vue

아코디언 Accordion ​

아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다. 일반적으로 헤더 목록은 컨트롤 요소로 활용되며 사용자는 필요에 따라 헤더를 선택하여 하위 콘텐츠 섹션을 표시하거나 숨길 수 있다.

KRDS 가이드

기본 ​

KrdsAccordionGroup 안에 KrdsAccordionItem을 둡니다. 열린 항목의 id를 open-item으로 내려 주고 toggle 이벤트로 받은 id로 갱신합니다. 예제처럼 같은 id를 다시 받으면 닫도록 하면 한 번에 한 항목만 열립니다.

id는 항목 요소의 id와 accordion-header-{id}, accordion-collapse-{id}에 그대로 쓰이므로 페이지 안에서 고유해야 합니다.

content1
content2
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsAccordionGroup, KrdsAccordionItem } from '@krds.ui/vue'

  const openItem = ref<string>()
  const handleToggle = (id: string) => {
    openItem.value = openItem.value === id ? undefined : id
  }
</script>

<template>
  <KrdsAccordionGroup>
    <KrdsAccordionItem id="basic-1" :open-item="openItem" title="title1" content="content1" @toggle="handleToggle" />
    <KrdsAccordionItem id="basic-2" :open-item="openItem" title="title2" content="content2" @toggle="handleToggle" />
  </KrdsAccordionGroup>
</template>

라인 ​

type-line을 지정하면 라인형으로 표시됩니다. 제목과 본문은 title, content 속성 대신 같은 이름의 슬롯으로도 넣을 수 있습니다.

content1
content2
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsAccordionGroup, KrdsAccordionItem } from '@krds.ui/vue'

  const openItem = ref<string>()
  const handleToggle = (id: string) => {
    openItem.value = openItem.value === id ? undefined : id
  }
</script>

<template>
  <KrdsAccordionGroup type-line>
    <KrdsAccordionItem id="line-1" :open-item="openItem" @toggle="handleToggle">
      <template #title>title1</template>
      <template #content>content1</template>
    </KrdsAccordionItem>
    <KrdsAccordionItem id="line-2" :open-item="openItem" @toggle="handleToggle">
      <template #title>title2</template>
      <template #content>content2</template>
    </KrdsAccordionItem>
  </KrdsAccordionGroup>
</template>

KrdsAccordionGroup ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
typeLinebooleanfalse라인 타입 아코디언 여부

Slots

이름설명
default아코디언 항목 (KrdsAccordionItem)

KrdsAccordionItem ​

Props

이름타입기본값설명
titlestring-헤더 텍스트 (title 슬롯으로 대체 가능)
openItemstring-현재 열려 있는 아이템의 id
contentstring-본문 텍스트 (content 슬롯으로 대체 가능)
id (필수)string-아이템 고유 식별자

Events

이름인자설명
toggle[id: string]펼침·접힘 버튼을 눌렀을 때 (항목 id)

Slots

이름설명
title제목 (title 속성 대신)
content펼쳤을 때 보이는 내용 (content 속성 대신)