mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
139 lines
13 KiB
Markdown
139 lines
13 KiB
Markdown
---
|
|
title: Tour
|
|
lang: en-US
|
|
---
|
|
|
|
# Tour
|
|
|
|
A popup component for guiding users through a product. Use when you want to guide users through a product.
|
|
|
|
## Basic usage
|
|
|
|
The most basic usage
|
|
|
|
:::demo
|
|
|
|
tour/basic
|
|
|
|
:::
|
|
|
|
## Non modal
|
|
|
|
Use `:mask="false"` to make Tour non-modal. At the meantime it is recommended to use with `type="primary"` to emphasize the guide itself.
|
|
|
|
:::demo
|
|
|
|
tour/non-modal
|
|
|
|
:::
|
|
|
|
## Placement
|
|
|
|
Change the placement of the guide relative to the target, there are 12 placements available. When `target` is empty the guide will show in the center.
|
|
|
|
:::demo
|
|
|
|
tour/placement
|
|
|
|
:::
|
|
|
|
## Custom mask style
|
|
|
|
Custom mask style.
|
|
|
|
:::demo
|
|
|
|
tour/mask
|
|
|
|
:::
|
|
|
|
## Custom indicator
|
|
|
|
Custom indicator.
|
|
|
|
:::demo
|
|
|
|
tour/indicator
|
|
|
|
:::
|
|
|
|
## Target
|
|
|
|
Various parameter passing types of target. The string and Function types are supported since ^(2.5.2).
|
|
|
|
:::demo
|
|
|
|
tour/target
|
|
|
|
:::
|
|
|
|
## Tour API
|
|
|
|
:::tip
|
|
tour-step component configuration with the same name has higher priority
|
|
:::
|
|
|
|
### Tour Attributes
|
|
|
|
| Property | Description | Type | Default |
|
|
| ------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
|
|
| show-arrow | whether to show the arrow | `boolean` | true |
|
|
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
|
|
| content-style | custom style for content | `CSSProperties` | - |
|
|
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
|
|
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
|
|
| model-value / v-model | open tour | `boolean` | - |
|
|
| current / v-model:current | what is the current step | `number` | - |
|
|
| scroll-into-view-options | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | ^[Object]`{ block: 'center' }` |
|
|
| z-index | Tour's zIndex | `number` | `2001` |
|
|
| show-close | whether to show a close button | `boolean` | `true` |
|
|
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
|
|
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | `boolean` | `true` |
|
|
| target-area-clickable | whether the target element can be clickable, when using mask | `boolean` | `true` |
|
|
|
|
### Tour slots
|
|
|
|
| Name | Description |
|
|
| ---------- | ------------------------------------------------------------- |
|
|
| default | tourStep component list |
|
|
| indicators | custom indicator, The scope parameter is `{ current, total }` |
|
|
|
|
### Tour events
|
|
|
|
| Name | Description | Type |
|
|
| ------ | ------------------------------ | -------------------------------------- |
|
|
| close | callback function on shutdown | ^[Function]`(current: number) => void` |
|
|
| finish | callback function on finished | ^[Function]`() => void` |
|
|
| change | callback when the step changes | ^[Function]`(current: number) => void` |
|
|
|
|
### TourStep Attributes
|
|
|
|
| Property | Description | Type | Default |
|
|
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
|
|
| target | get the element the guide card points to. Empty makes it show in center of screen. the string and Function types are supported since ^(2.5.2). the string type is selectors of document.querySelector. | `HTMLElement` \| `string` \| ^[Function]`() => HTMLElement` | - |
|
|
| show-arrow | whether to show the arrow | `boolean` | `true` |
|
|
| title | title | `string` | - |
|
|
| description | description | `string` | - |
|
|
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
|
|
| content-style | custom style for content | `CSSProperties` | - |
|
|
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
|
|
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
|
|
| next-button-props | properties of the Next button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
|
|
| prev-button-props | properties of the previous button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
|
|
| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean` \| `ScrollIntoViewOptions` | - |
|
|
| show-close | whether to show a close button | `boolean` | `true` |
|
|
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
|
|
|
|
### TourStep slots
|
|
|
|
| Name | Description |
|
|
| ------- | ----------- |
|
|
| default | description |
|
|
| header | header |
|
|
|
|
### TourStep events
|
|
|
|
| Name | Description | Arguments |
|
|
| ----- | ----------------------------- | ----------------------- |
|
|
| close | callback function on shutdown | ^[Function]`() => void` |
|