단계 표시기

프로세스 단계를 표시합니다.

#step #progress #wizard

1단계 단계 레이블
2단계 단계 레이블
3단계 단계 레이블
현재단계 4단계 단계 레이블
5단계 단계 레이블

타이틀

1단계 유의 사항 확인
2단계 신청인 정보
현재단계 3단계 이사 전 살던 곳
4단계 이사 온 곳

HTML

<ol class="krds-step-wrap">
	<li class="done">
        <span>
            <i class="step">1단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="done">
        <span>
            <i class="step">2단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="done">
        <span>
            <i class="step">3단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="active">
        <span>
            <em class="sr-only">현재단계</em>
            <i class="step">4단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li>
        <span>
            <i class="step">5단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
</ol>


<br>
<br>


<div class="page-title-wrap between">
	<h2 class="h-tit">타이틀</h2>
	
	<ol class="krds-step-wrap">
		<li class="done">
            <span>
                <i class="step">1단계</i>
                <span class="step-tit">유의 사항 확인</span>
            </span>
		</li>
		<li class="done">
            <span>
                <i class="step">2단계</i>
                <span class="step-tit">신청인 정보</span>
            </span>
		</li>
		<li class="active">
            <span>
                <em class="sr-only">현재단계</em>
                <i class="step">3단계</i>
                <span class="step-tit">이사 전 살던 곳</span>
            </span>
		</li>
		<li>
            <span>
                <i class="step">4단계</i>
                <span class="step-tit">이사 온 곳</span>
            </span>
		</li>
	</ol>
	
</div>

Vue 컴포넌트

<template>
  <ol class="krds-step-wrap">
	<li class="done">
        <span>
            <i class="step">1단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="done">
        <span>
            <i class="step">2단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="done">
        <span>
            <i class="step">3단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li class="active">
        <span>
            <em class="sr-only">현재단계</em>
            <i class="step">4단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
	<li>
        <span>
            <i class="step">5단계</i>
            <span class="step-tit">단계 레이블</span>
        </span>
	</li>
</ol>


<br>
<br>


<div class="page-title-wrap between">
	<h2 class="h-tit">타이틀</h2>
	
	<ol class="krds-step-wrap">
		<li class="done">
            <span>
                <i class="step">1단계</i>
                <span class="step-tit">유의 사항 확인</span>
            </span>
		</li>
		<li class="done">
            <span>
                <i class="step">2단계</i>
                <span class="step-tit">신청인 정보</span>
            </span>
		</li>
		<li class="active">
            <span>
                <em class="sr-only">현재단계</em>
                <i class="step">3단계</i>
                <span class="step-tit">이사 전 살던 곳</span>
            </span>
		</li>
		<li>
            <span>
                <i class="step">4단계</i>
                <span class="step-tit">이사 온 곳</span>
            </span>
		</li>
	</ol>
	
</div>
</template>

<script setup lang="ts">
// 단계 표시기 컴포넌트
// 프로세스 단계를 표시합니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명: step_indicator.html
카테고리: 피드백
난이도: 보통