패널 Panel

패널은 본문 콘텐츠의 섹션이나 일부 요소에 대한 개념/용어 설명, 옵션의 구성, 이용 방법 등과 관련된 정보나 도움말, 따라하기 콘텐츠를 제공하는 사이드 패널이다.

KRDS 도움 패널KRDS 따라하기 패널

기본

v-model로 펼침 상태를 제어합니다. 도움말 버튼과 패널이 화면 오른쪽에 고정(position: fixed)되므로 예제를 별도 화면(iframe)에 띄웁니다. 예제는 1024px 폭 화면을 축소해 보여 줍니다. 1024px 미만 화면에서는 패널이 화면 폭에서 3rem을 뺀 너비로 열리고 뒤 배경이 어두워집니다.

새 창에서 보기

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsPanel } from '@krds.ui/vue'

  const open = ref(false)
</script>

<template>
  <KrdsPanel v-model="open"></KrdsPanel>
</template>

도움 패널

기본 슬롯에 KrdsTabs를 넣어 도움 탭과 따라하기 탭을 구성합니다.

새 창에서 보기

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsPanel, KrdsTabs } from '@krds.ui/vue'

  const open = ref(false)
  const tabs = [
    { id: 'help', label: '도움' },
    { id: 'tutorial', label: '따라하기' }
  ]
</script>

<template>
  <KrdsPanel v-model="open">
    <KrdsTabs :tabs="tabs">
      <template #help>
        <h3 class="sr-only">도움</h3>
        <div class="help-conts-area-inner">
          <!-- 도움말 -->
          <div class="conts-area help-conts">
            <div class="conts-wrap">
              <h4 class="help-title">
                전자문서지갑
                <span class="krds-btn medium icon">
                  <span class="sr-only">도움말</span>
                  <i class="svg-icon ico-help"></i>
                </span>
              </h4>
              <div class="conts-desc">
                <p>
                  전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은
                  전자증명서를 열람용으로 다운로드할 수는 있습니다.
                </p>
              </div>
              <ul class="link-list">
                <li>
                  <a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
                    안드로이드 애플리케이션 다운로드
                    <i class="svg-icon ico-go"></i>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
                    iOS애플리케이션 다운로드
                    <i class="svg-icon ico-go"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="conts-area related-service">
            <div class="conts-wrap">
              <h4 class="help-title">관련서비스/민원</h4>
              <ul class="link-list">
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    영문 주민등록표등본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    영문 주민등록표초본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    주민등록표등본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="conts-wrap">
              <h4 class="help-title">기타 문의/도움말</h4>
              <ul class="link-list">
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    <i class="svg-icon ico-call"></i>
                    민원신청 관련 문의 전화 번호 찾기
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    <i class="svg-icon ico-faq"></i>
                    자주 묻는 질문 확인하기
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <template #tutorial>
        <h3 class="sr-only">따라하기</h3>
        <div class="help-conts-area-inner">
          <div class="conts-area">
            <h4 class="help-title">
              <a href="#" title="이전으로 돌아가기"> 이사 전 살던 곳 정보 입력하기 </a>
            </h4>
            <ul class="coach-help-process">
              <li>
                <h4 class="tit current">Task 1: 이사 전에 살던 곳 주소 확인</h4>
                <div class="krds-disclosure conts-expand-area">
                  <button type="button" class="btn-conts-expand">전체 2단계</button>
                  <div class="expand-wrap">
                    <div class="expand-in">
                      <ul class="krds-info-list decimal">
                        <li>단계1 : 주소조회</li>
                        <li>단계2 : 조회 결과 확인</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
                <div class="krds-disclosure conts-expand-area">
                  <button type="button" class="btn-conts-expand">전체 1단계</button>
                  <div class="expand-wrap">
                    <div class="expand-in">
                      <ul class="krds-info-list decimal">
                        <li>단계1 : 주소조회</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="help-panel-action">
            <button type="button" class="krds-btn medium secondary coach-btn-stop">그만 따라하기</button>
          </div>
        </div>
      </template>
    </KrdsTabs>
  </KrdsPanel>
</template>

따라하기 패널

KrdsTabs의 v-model을 tutorial로 지정해 따라하기 탭이 먼저 보이게 합니다.

새 창에서 보기

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsPanel, KrdsTabs } from '@krds.ui/vue'

  const open = ref(false)
  const activeTab = ref('tutorial')
  const tabs = [
    { id: 'help', label: '도움' },
    { id: 'tutorial', label: '따라하기' }
  ]
</script>

<template>
  <KrdsPanel v-model="open">
    <KrdsTabs v-model="activeTab" :tabs="tabs">
      <template #help>
        <h3 class="sr-only">도움</h3>
        <div class="help-conts-area-inner">
          <!-- 도움말 -->
          <div class="conts-area help-conts">
            <div class="conts-wrap">
              <h4 class="help-title">
                전자문서지갑
                <span class="krds-btn medium icon">
                  <span class="sr-only">도움말</span>
                  <i class="svg-icon ico-help"></i>
                </span>
              </h4>
              <div class="conts-desc">
                <p>
                  전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은
                  전자증명서를 열람용으로 다운로드할 수는 있습니다.
                </p>
              </div>
              <ul class="link-list">
                <li>
                  <a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
                    안드로이드 애플리케이션 다운로드
                    <i class="svg-icon ico-go"></i>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" title="새 창 열림" class="krds-btn xsmall link basic">
                    iOS애플리케이션 다운로드
                    <i class="svg-icon ico-go"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="conts-area related-service">
            <div class="conts-wrap">
              <h4 class="help-title">관련서비스/민원</h4>
              <ul class="link-list">
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    영문 주민등록표등본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    영문 주민등록표초본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    주민등록표등본
                    <i class="svg-icon ico-angle right"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="conts-wrap">
              <h4 class="help-title">기타 문의/도움말</h4>
              <ul class="link-list">
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    <i class="svg-icon ico-call"></i>
                    민원신청 관련 문의 전화 번호 찾기
                  </a>
                </li>
                <li>
                  <a href="#" class="krds-btn xsmall link basic">
                    <i class="svg-icon ico-faq"></i>
                    자주 묻는 질문 확인하기
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <template #tutorial>
        <h3 class="sr-only">따라하기</h3>
        <div class="help-conts-area-inner">
          <div class="conts-area">
            <h4 class="help-title">
              <a href="#" title="이전으로 돌아가기"> 이사 전 살던 곳 정보 입력하기 </a>
            </h4>
            <ul class="coach-help-process">
              <li>
                <h4 class="tit current">Task 1: 이사 전에 살던 곳 주소 확인</h4>
                <div class="krds-disclosure conts-expand-area">
                  <button type="button" class="btn-conts-expand">전체 2단계</button>
                  <div class="expand-wrap">
                    <div class="expand-in">
                      <ul class="krds-info-list decimal">
                        <li>단계1 : 주소조회</li>
                        <li>단계2 : 조회 결과 확인</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
                <div class="krds-disclosure conts-expand-area">
                  <button type="button" class="btn-conts-expand">전체 1단계</button>
                  <div class="expand-wrap">
                    <div class="expand-in">
                      <ul class="krds-info-list decimal">
                        <li>단계1 : 주소조회</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="help-panel-action">
            <button type="button" class="krds-btn medium secondary coach-btn-stop">그만 따라하기</button>
          </div>
        </div>
      </template>
    </KrdsTabs>
  </KrdsPanel>
</template>

KrdsPanel

Props

이름	타입	기본값	설명
modelValue	boolean	false	도움말 패널 펼침 상태 (v-model)
headerTopSelector	string	'#krds-masthead'	헤더 상단 영역 선택자 (기본값: '#krds-masthead', KrdsInPageNavigation과 같음)
headerInnerSelector	string	'#krds-header .header-in'	헤더 내부 영역 선택자 (기본값: '#krds-header .header-in', KrdsInPageNavigation과 같음)

Events

이름	인자	설명
update:modelValue	[value: boolean]	도움 패널을 펼치거나 접을 때 (v-model)

Slots

이름	설명
default	도움 패널 내용

KrdsTabs

Props

이름	타입	기본값	설명
class	KrdsClassValue	-	CSS 클래스
variant	KrdsTabsVariant	'line'	탭 스타일 변형
modelValue	string	-	활성 탭 id (v-model)
full	boolean	false	풀사이즈 레이아웃 여부
selectedText	string	'선택됨'	선택된 탭의 스크린 리더 대체 텍스트
tabs (필수)	KrdsTabItem[]	-	탭 아이템 목록

Events

이름	인자	설명
change	[id: string]	탭을 바꿨을 때 (탭 id)
update:modelValue	[id: string]	선택한 탭 id가 바뀔 때 (v-model)