KRDS Vue

디스클로저 Disclosure ​

디스클로저는 특정한 정보/컨트롤/섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다. 디스클로저 하위 콘텐츠 섹션은 기본으로 축소된 상태로 제공되며 사용자가 요청하는 경우에 확장되어 자세한 정보가 표시된다. 이는 사용자의 인지적 부담을 감소시키고 정보를 빠르게 훑어보는 데 도움이 된다.

KRDS 가이드

기본 ​

v-model로 펼침 상태를 제어합니다. 접혀 있는 동안 콘텐츠 영역은 inert로 포커스와 보조기기 대상에서 제외됩니다.

  • 하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.
  • 디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsDisclosure } from '@krds.ui/vue'

  const expanded = ref(false)
</script>

<template>
  <KrdsDisclosure v-model="expanded" title="신청 서비스안내">
    <ul class="krds-info-list dash">
      <li>하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.</li>
      <li>디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)</li>
    </ul>
  </KrdsDisclosure>
</template>

KrdsDisclosure ​

Props

이름타입기본값설명
modelValuebooleanfalse확장 상태 (v-model)
title (필수)string-디스클로저 제목

Events

이름인자설명
update:modelValue[value: boolean]펼침 상태가 바뀔 때 (v-model)

Slots

이름설명
default펼쳤을 때 보이는 내용