패널 Panel

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

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

기본

[(open)]으로 펼침 상태를 주고받습니다. 도움말 버튼으로 열고 접어두기 버튼으로 닫으며, 패널 안에 초점이 있었다면 닫을 때 도움말 버튼으로 돌려줍니다. 도움말 버튼과 패널이 화면 오른쪽에 고정(position: fixed)되므로 예제를 별도 화면(iframe)에 띄웁니다. 예제는 1024px 폭 화면을 축소해 보여 줍니다. 1024px 미만 화면에서는 패널이 화면 폭에서 3rem을 뺀 너비로 열리고 뒤 배경이 어두워집니다.

새 창에서 보기

import { Component, signal } from '@angular/core'
import { KrdsPanel } from '@krds.ui/angular'

@Component({
  selector: 'demo-panel-basic',
  imports: [KrdsPanel],
  template: `<krds-panel [(open)]="open" />`
})
export default class PanelBasic {
  readonly open = signal(false)
}

공식 배너(#krds-masthead)와 헤더(#krds-header .header-in)가 보이면 그 높이만큼 도움말 버튼과 패널 내용을 내려 헤더에 가려지지 않게 합니다. 선택자가 다르면 headerTopSelector, headerInnerSelector로 지정합니다.

도움 패널

패널 안에 탭(<krds-tabs>)을 넣고, 탭마다 <ng-template krdsTabPanel="탭 id">로 도움 탭과 따라하기 탭의 내용을 넣습니다.

새 창에서 보기

import { Component, signal } from '@angular/core'
import { KrdsButton, KrdsDisclosure, KrdsExternalLink, KrdsPanel, KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-panel-help',
  imports: [KrdsPanel, KrdsTabs, KrdsTabPanel, KrdsDisclosure, KrdsExternalLink, KrdsButton],
  template: `
    <krds-panel [(open)]="open">
      <krds-tabs [tabs]="tabs">
        <ng-template krdsTabPanel="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" aria-hidden="true"></i>
                  </span>
                </h4>
                <div class="conts-desc">
                  <p>
                    전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은
                    전자증명서를 열람용으로 다운로드할 수는 있습니다.
                  </p>
                </div>
                <ul class="link-list">
                  <li>
                    <a href="#" krdsExternal class="krds-btn xsmall link basic">
                      안드로이드 애플리케이션 다운로드
                      <i class="svg-icon ico-go" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" krdsExternal class="krds-btn xsmall link basic">
                      iOS애플리케이션 다운로드
                      <i class="svg-icon ico-go" aria-hidden="true"></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" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      영문 주민등록표초본
                      <i class="svg-icon ico-angle right" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      주민등록표등본
                      <i class="svg-icon ico-angle right" aria-hidden="true"></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" aria-hidden="true"></i>
                      민원신청 관련 문의 전화 번호 찾기
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      <i class="svg-icon ico-faq" aria-hidden="true"></i>
                      자주 묻는 질문 확인하기
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </ng-template>
        <ng-template krdsTabPanel="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>
                  <krds-disclosure label="전체 2단계">
                    <ul class="krds-info-list decimal">
                      <li>단계1 : 주소조회</li>
                      <li>단계2 : 조회 결과 확인</li>
                    </ul>
                  </krds-disclosure>
                </li>
                <li>
                  <h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
                  <krds-disclosure label="전체 1단계">
                    <ul class="krds-info-list decimal">
                      <li>단계1 : 주소조회</li>
                    </ul>
                  </krds-disclosure>
                </li>
              </ul>
            </div>
            <div class="help-panel-action">
              <button krdsButton variant="secondary" size="medium" class="coach-btn-stop">그만 따라하기</button>
            </div>
          </div>
        </ng-template>
      </krds-tabs>
    </krds-panel>
  `
})
export default class PanelHelp {
  readonly open = signal(false)
  readonly tabs: KrdsTabItem[] = [
    { id: 'help', label: '도움' },
    { id: 'tutorial', label: '따라하기' }
  ]
}

따라하기 패널

<krds-tabs>의 [(selected)]를 tutorial로 지정해 따라하기 탭이 먼저 보이게 합니다.

새 창에서 보기

import { Component, signal } from '@angular/core'
import { KrdsButton, KrdsDisclosure, KrdsExternalLink, KrdsPanel, KrdsTabPanel, KrdsTabs, type KrdsTabItem } from '@krds.ui/angular'

@Component({
  selector: 'demo-panel-tutorial',
  imports: [KrdsPanel, KrdsTabs, KrdsTabPanel, KrdsDisclosure, KrdsExternalLink, KrdsButton],
  template: `
    <krds-panel [(open)]="open">
      <krds-tabs [tabs]="tabs" [(selected)]="selected">
        <ng-template krdsTabPanel="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" aria-hidden="true"></i>
                  </span>
                </h4>
                <div class="conts-desc">
                  <p>
                    전자문서지갑에서는 전자증명서 출력기능을 제공하지 않으며, 스마트폰 화면을 캡쳐하여 사용할 수 없습니다. 다만, 발급받은
                    전자증명서를 열람용으로 다운로드할 수는 있습니다.
                  </p>
                </div>
                <ul class="link-list">
                  <li>
                    <a href="#" krdsExternal class="krds-btn xsmall link basic">
                      안드로이드 애플리케이션 다운로드
                      <i class="svg-icon ico-go" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" krdsExternal class="krds-btn xsmall link basic">
                      iOS애플리케이션 다운로드
                      <i class="svg-icon ico-go" aria-hidden="true"></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" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      영문 주민등록표초본
                      <i class="svg-icon ico-angle right" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      주민등록표등본
                      <i class="svg-icon ico-angle right" aria-hidden="true"></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" aria-hidden="true"></i>
                      민원신청 관련 문의 전화 번호 찾기
                    </a>
                  </li>
                  <li>
                    <a href="#" class="krds-btn xsmall link basic">
                      <i class="svg-icon ico-faq" aria-hidden="true"></i>
                      자주 묻는 질문 확인하기
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </ng-template>
        <ng-template krdsTabPanel="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>
                  <krds-disclosure label="전체 2단계">
                    <ul class="krds-info-list decimal">
                      <li>단계1 : 주소조회</li>
                      <li>단계2 : 조회 결과 확인</li>
                    </ul>
                  </krds-disclosure>
                </li>
                <li>
                  <h4 class="tit">Task 2: 이사 갈 가족 구성원 선택하기</h4>
                  <krds-disclosure label="전체 1단계">
                    <ul class="krds-info-list decimal">
                      <li>단계1 : 주소조회</li>
                    </ul>
                  </krds-disclosure>
                </li>
              </ul>
            </div>
            <div class="help-panel-action">
              <button krdsButton variant="secondary" size="medium" class="coach-btn-stop">그만 따라하기</button>
            </div>
          </div>
        </ng-template>
      </krds-tabs>
    </krds-panel>
  `
})
export default class PanelTutorial {
  readonly open = signal(false)
  readonly selected = signal('tutorial')
  readonly tabs: KrdsTabItem[] = [
    { id: 'help', label: '도움' },
    { id: 'tutorial', label: '따라하기' }
  ]
}

KrdsPanel

선택자 krds-panel

Inputs

이름	타입	기본값	설명
[(open)]	boolean	false	열림
headerTopSelector	string	'#krds-masthead'	높이만큼 비켜 갈 공식 배너·헤더
headerInnerSelector	string	'#krds-header .header-in'

KrdsTabs

선택자 krds-tabs

Inputs

이름	타입	기본값	설명
tabs (필수)	KrdsTabItem[]	-	탭 목록
[(selected)]	string	-	선택한 탭 id
variant	'line' | 'fill'	'line'	스타일
full	boolean	false	탭을 전체 폭으로 나눔
selectedText	string	'선택됨'	선택한 탭을 화면낭독기에 알리는 문구

타입

/** 탭 */
export interface KrdsTabItem {
  /** 탭 id (패널의 krdsTabPanel과 같게) */
  id: string
  /** 탭 이름 */
  label: string
  /** 비활성화 */
  disabled?: boolean
}

KrdsTabPanel

선택자 ng-template[krdsTabPanel]

Inputs

이름	타입	기본값	설명
krdsTabPanel (필수)	string	-	패널이 속한 탭 id