스텝

스텝 (Steps)

출처: 문서

본문

사용자가 프로세스에 따라 작업을 순서대로 완료하도록 안내하는 컴포넌트예요. 스텝은 실제 애플리케이션 시나리오에 맞게 설정할 수 있으며, 스텝 수는 2개보다 작을 수 없어요.

기본 사용법 (Basic Usage)

간단한 스텝 바예요. active 속성을 Number 타입으로 설정하면 되고, 스텝의 인덱스를 나타내며 0부터 시작해요. 스텝의 너비를 고정해야 할 때는 Number 타입을 받는 space 속성을 설정할 수 있어요. space 속성의 단위는 px예요. 설정하지 않으면 반응형으로 동작해요. finish-status 속성을 설정하면 이미 완료된 스텝의 상태를 바꿀 수 있어요.

상태가 포함된 스텝 바 (Step Bar That Contains Status)

각 스텝의 상태를 보여줘요. title 속성으로 스텝 이름을 설정하거나, named slot을 사용해서 속성을 덮어쓸 수도 있어요. 모든 슬롯 이름은 이 페이지 끝부분에 정리해두었어요.

가운데 정렬 (Center)

제목과 설명을 가운데로 정렬할 수 있어요.

설명이 있는 스텝 바 (Step Bar With Description)

각 스텝에 설명이 있어요.

아이콘이 있는 스텝 바 (Step Bar With Icon)

스텝 바에서는 다양한 커스텀 아이콘을 사용할 수 있어요. 아이콘은 icon 속성으로 설정해요. 아이콘의 종류는 Icon 컴포넌트 문서에서 확인할 수 있어요. 또한 named slot을 통해 아이콘을 직접 커스텀할 수도 있어요.

세로 스텝 바 (Vertical Step Bar)

세로 스텝 바예요. el-steps 요소의 direction 속성을 vertical로 설정하기만 하면 돼요.

심플 스텝 바 (Simple Step Bar)

간단한 스텝 바로, align-center, description, direction, space는 무시돼요.

Steps API

Steps 속성 (Attributes)

Name	Description	Type	Default
space	각 스텝의 간격. 생략하면 반응형이 돼요. 퍼센트도 지원해요	number / string	''
direction	표시 방향	enum	horizontal
active	현재 활성화된 스텝	number	0
process-status	현재 스텝의 상태	enum	process
finish-status	마지막 스텝의 상태	enum	finish
align-center	제목과 설명 가운데 정렬	boolean	—
simple	심플 테마 적용 여부	boolean	—

Steps 이벤트 (Events)

Name	Description	Parameters
change	활성 스텝이 변경될 때 트리거돼요	Function

Steps 슬롯 (Slots)

Name	Description	Subtags
default	기본 콘텐츠 커스텀	Step

Step API

Step 속성 (Attributes)

Name	Description	Type	Default
title	스텝 제목	string	''
description	스텝 설명	string	''
icon	스텝 커스텀 아이콘. 아이콘은 named slot으로도 전달할 수 있어요	string / Component	—
status	현재 상태. 설정하지 않으면 Steps가 자동으로 설정해요	enum	''

Step 슬롯 (Slots)

Name	Description
icon	커스텀 아이콘
title	스텝 제목
description	스텝 설명

스텝