투어 (Tour)

출처: 문서

본문

제품을 설명하고 사용자의 조작을 안내하는 데 자주 사용하는 컴포넌트예요. 사용 중에 좋은 가이드를 제공해서 사용자의 학습 및 조작 비용을 크게 줄여줄 수 있어요.

기본 투어를 사용해서 사용자를 전체 튜토리얼로 안내해요.

보통 각 영역의 기능을 설명하거나 몇 가지 팁을 보여줘야 하는데, 그럴 때 공식 steps를 사용하거나 콘텐츠를 커스터마이즈하면 돼요.

커스텀 화살표 아이콘을 사용해요.

Tour는 세로 정렬을 지원해요. align을 center로 설정하고 mask를 false로 지정하세요.

v-model을 사용해서 투어의 가시성을 제어할 수 있어요.

Name	Description	Type	Default
mask	마스크 표시 여부	boolean	true
show-arrow	화살표 표시 여부	boolean	true
type	투어의 타입	enum	—
placement	위치	enum	top
content-style	콘텐츠 영역의 커스텀 스타일	object	{}
content-class	콘텐츠 영역의 커스텀 클래스 이름	string	—
mask-style 2.7.0	마스크 영역의 커스텀 스타일	object	—
mask-class 2.7.0	마스크 영역의 커스텀 클래스 이름	string	—
mask-opacity 2.4.0	마스크 오버레이 투명도	number	0.5
scroll-parent	스크롤 요소의 부모	Selector / Element	null
custom-arrows 2.4.0	커스텀 화살표 사용 여부	boolean	false
current 2.5.0	현재 스텝	number	0
aria-label	커스텀 aria-label	string	—

Name	Description
default	기본 콘텐츠

Name	Description	Type	Default
target	대상 요소	Selector / Element	—
title	제목	string	—
description	설명	string	—
show-arrow	화살표 표시 여부	boolean	true
placement	위치	enum	top
align	정렬	enum	center
type	투어 스텝의 타입	enum	—
mask	마스크 표시 여부	boolean	true
show-close	닫기 버튼 표시 여부	boolean	true
show-progress 2.6.0	진행 상황 표시 여부	boolean	true
prev-text	이전 버튼 텍스트	string	—
next-text	다음 버튼 텍스트	string	—
done-text	완료 버튼 텍스트	string	—
close-icon 2.9.0	커스텀 닫기 버튼 아이콘	string / Component	—
aria-label	커스텀 aria-label	string	—