디스클로저
콘텐츠 펼침/접힘 컴포넌트입니다.
#disclosure #expand #collapse
- 하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.
- 디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)
HTML
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">신청 서비스안내</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list dash">
<li>하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.</li>
<li>디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)</li>
</ul>
</div>
</div>
</div>Vue 컴포넌트
<template>
<div class="krds-disclosure conts-expand-area">
<button type="button" class="btn-conts-expand">신청 서비스안내</button>
<div class="expand-wrap">
<div class="expand-in">
<ul class="krds-info-list dash">
<li>하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.</li>
<li>디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)</li>
</ul>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// 디스클로저 컴포넌트
// 콘텐츠 펼침/접힘 컴포넌트입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- disclosure.html
- 카테고리
- 유틸리티
- 난이도
- 보통