20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,85 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root'), version: '1.0.0' },
|
||||
{ name: 'mask', desc: t('mask'), version: '1.0.0' },
|
||||
{ name: 'section', desc: t('section'), version: '1.0.0' },
|
||||
{ name: 'cover', desc: t('cover'), version: '1.0.0' },
|
||||
{ name: 'header', desc: t('header'), version: '1.0.0' },
|
||||
{ name: 'title', desc: t('title'), version: '1.0.0' },
|
||||
{ name: 'description', desc: t('description'), version: '1.0.0' },
|
||||
{ name: 'footer', desc: t('footer'), version: '1.0.0' },
|
||||
{ name: 'actions', desc: t('actions'), version: '1.0.0' },
|
||||
{ name: 'indicators', desc: t('indicators'), version: '1.0.0' },
|
||||
{ name: 'indicator', desc: t('indicator'), version: '1.0.0' },
|
||||
{ name: 'close', desc: t('close'), version: '1.3.0' },
|
||||
])
|
||||
|
||||
const open = ref(true)
|
||||
const createBtnRef = ref<HTMLButtonElement | null>(null)
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: 'Hello World!',
|
||||
description: 'Hello World?!',
|
||||
target: () => createBtnRef.value!,
|
||||
mask: true,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: () => createBtnRef.value!,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Tour"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: '825px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}"
|
||||
>
|
||||
<a-button ref="createBtnRef" @click="open = true">
|
||||
Show
|
||||
</a-button>
|
||||
<a-tour
|
||||
v-model:open="open"
|
||||
:z-index="1"
|
||||
:default-current="0"
|
||||
:get-popup-container="false"
|
||||
:steps="steps"
|
||||
:classes="classes"
|
||||
>
|
||||
<template #coverRender="{ index }">
|
||||
<template v-if="index === 0">
|
||||
<img src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png" alt="img">
|
||||
</template>
|
||||
</template>
|
||||
</a-tour>
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,91 @@
|
||||
# Custom action
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Custom action.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { EllipsisOutlined } from '@antdv-next/icons'
|
||||
import { Button } from 'antdv-next'
|
||||
import { h, shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: ref1,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
},
|
||||
]
|
||||
|
||||
function actionsRender(originNode: any, info: { current: number, total: number }) {
|
||||
const nodes: any[] = []
|
||||
if (info.current !== info.total - 1) {
|
||||
nodes.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
open.value = false
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => 'Skip',
|
||||
},
|
||||
),
|
||||
)
|
||||
}
|
||||
if (Array.isArray(originNode)) {
|
||||
nodes.push(...originNode)
|
||||
}
|
||||
else {
|
||||
nodes.push(originNode)
|
||||
}
|
||||
return nodes
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
<a-divider />
|
||||
<a-space>
|
||||
<a-button ref="ref1">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2" type="primary">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-tour
|
||||
v-model:open="open"
|
||||
:steps="steps"
|
||||
:actions-render="actionsRender"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,69 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The most basic usage.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { EllipsisOutlined } from '@antdv-next/icons'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
|
||||
target: ref1,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
<a-divider />
|
||||
<a-space>
|
||||
<a-button ref="ref1">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2" type="primary">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-tour v-model:open="open" :steps="steps">
|
||||
<template #coverRender="{ index }">
|
||||
<template v-if="index === 0">
|
||||
<img
|
||||
draggable="false"
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
</a-tour>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
# Custom highlighted area style
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Using `gap` to control the radius of highlight area and the offset between highlight area and the element.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { computed, ref, shallowRef } from 'vue'
|
||||
|
||||
const tourNodeRef = shallowRef()
|
||||
const open = ref(false)
|
||||
|
||||
const radius = ref(8)
|
||||
const offsetX = ref(2)
|
||||
const offsetY = ref(2)
|
||||
const offset = ref(2)
|
||||
const offsetDirection = ref<'both' | 'individual'>('individual')
|
||||
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: tourNodeRef,
|
||||
},
|
||||
]
|
||||
|
||||
const gap = computed(() => {
|
||||
const offsetValue = offsetDirection.value === 'both'
|
||||
? offset.value
|
||||
: [offsetX.value, offsetY.value]
|
||||
return {
|
||||
offset: offsetValue,
|
||||
radius: radius.value,
|
||||
} as {
|
||||
offset: number | [number, number]
|
||||
radius: number
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="tourNodeRef">
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
<a-space vertical style="display: flex; margin-top: 12px">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-typography-text>Radius:</a-typography-text>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-slider v-model:value="radius" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-typography-text>Offset:</a-typography-text>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-slider
|
||||
v-model:value="offset"
|
||||
:max="50"
|
||||
@change="offsetDirection = 'both'"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-typography-text>Horizontal offset:</a-typography-text>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-slider
|
||||
v-model:value="offsetX"
|
||||
:max="50"
|
||||
@change="offsetDirection = 'individual'"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-typography-text>Vertical offset:</a-typography-text>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-slider
|
||||
v-model:value="offsetY"
|
||||
:max="50"
|
||||
@change="offsetDirection = 'individual'"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-space>
|
||||
<a-tour v-model:open="open" :steps="steps" :gap="gap" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
# Custom indicator
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Custom indicator.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { EllipsisOutlined } from '@antdv-next/icons'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: ref1,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
},
|
||||
]
|
||||
|
||||
function indicatorsRender(current: number, total: number) {
|
||||
return `${current + 1} / ${total}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
<a-divider />
|
||||
<a-space>
|
||||
<a-button ref="ref1">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2" type="primary">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-tour
|
||||
v-model:open="open"
|
||||
:steps="steps"
|
||||
:indicators-render="indicatorsRender"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
# Custom mask style
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Custom mask style.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { EllipsisOutlined } from '@antdv-next/icons'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
|
||||
const mask = {
|
||||
style: {
|
||||
boxShadow: 'inset 0 0 15px #333',
|
||||
},
|
||||
color: 'rgba(80, 255, 255, .4)',
|
||||
}
|
||||
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: ref1,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
mask: {
|
||||
style: {
|
||||
boxShadow: 'inset 0 0 15px #fff',
|
||||
},
|
||||
color: 'rgba(40, 0, 255, .4)',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
mask: false,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
<a-divider />
|
||||
<a-space>
|
||||
<a-button ref="ref1">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2" type="primary">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-tour v-model:open="open" :steps="steps" :mask="mask">
|
||||
<template #coverRender="{ index }">
|
||||
<template v-if="index === 0">
|
||||
<img
|
||||
draggable="false"
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
</a-tour>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
# Non-modal
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `mask={false}` to make Tour non-modal. At the meantime it is recommended to use with `type="primary"` to emphasize the guide itself.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { EllipsisOutlined } from '@antdv-next/icons'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
target: ref1,
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin non-modal Tour
|
||||
</a-button>
|
||||
<a-divider />
|
||||
<a-space>
|
||||
<a-button ref="ref1">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2" type="primary">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-tour v-model:open="open" :steps="steps" type="primary" :mask="false">
|
||||
<template #coverRender="{ index }">
|
||||
<template v-if="index === 0">
|
||||
<img
|
||||
draggable="false"
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
</a-tour>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,46 @@
|
||||
# Placement
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Change the placement of the guide relative to the target, there are 12 placements available. When `target={null}` the guide will show in the center.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourStepItem } from 'antdv-next'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const ref = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Center',
|
||||
description: 'Displayed in the center of screen.',
|
||||
target: null,
|
||||
},
|
||||
{
|
||||
title: 'Right',
|
||||
description: 'On the right of target.',
|
||||
placement: 'right',
|
||||
target: ref,
|
||||
},
|
||||
{
|
||||
title: 'Top',
|
||||
description: 'On the top of target.',
|
||||
placement: 'top',
|
||||
target: ref,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-300px ml-300px">
|
||||
<a-button ref="ref" type="primary" @click="open = true">
|
||||
Begin Tour
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-tour v-model:open="open" :steps="steps" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { TourProps, TourStepItem } from 'antdv-next'
|
||||
import { computed, h, shallowRef } from 'vue'
|
||||
|
||||
const ref1 = shallowRef()
|
||||
const ref2 = shallowRef()
|
||||
const ref3 = shallowRef()
|
||||
const open = shallowRef(false)
|
||||
const openFn = shallowRef(false)
|
||||
|
||||
const btnProps = {
|
||||
nextButtonProps: {
|
||||
style: {
|
||||
border: '1px solid #CDC1FF',
|
||||
color: '#CDC1FF',
|
||||
},
|
||||
},
|
||||
prevButtonProps: {
|
||||
style: {
|
||||
backgroundColor: '#CDC1FF',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const coverNode = h('img', {
|
||||
alt: 'tour.png',
|
||||
src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png',
|
||||
})
|
||||
|
||||
const steps: TourStepItem[] = [
|
||||
{
|
||||
title: 'Upload File',
|
||||
description: 'Put your files here.',
|
||||
cover: coverNode,
|
||||
target: ref1,
|
||||
prevButtonProps: {},
|
||||
},
|
||||
{
|
||||
title: 'Save',
|
||||
description: 'Save your changes.',
|
||||
target: ref2,
|
||||
},
|
||||
{
|
||||
title: 'Other Actions',
|
||||
description: 'Click to see other actions.',
|
||||
target: ref3,
|
||||
},
|
||||
]
|
||||
|
||||
const stepsWithButtonProps = computed(() => steps.map(step => ({ ...step, ...btnProps })))
|
||||
|
||||
const classes: TourProps['classes'] = {
|
||||
root: 'custom-tour-root',
|
||||
section: 'custom-tour-section',
|
||||
}
|
||||
|
||||
const stylesObject: TourProps['styles'] = {
|
||||
mask: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
section: {
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
border: '2px solid #4096ff',
|
||||
},
|
||||
cover: {
|
||||
borderRadius: '12px 12px 0 0',
|
||||
},
|
||||
}
|
||||
|
||||
const stylesFn: TourProps['styles'] = (info) => {
|
||||
if (info.props.type === 'primary') {
|
||||
return {
|
||||
mask: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
section: {
|
||||
backgroundColor: 'rgba(205, 193, 255, 0.8)',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
cover: {
|
||||
borderRadius: '12px 12px 0 0',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-flex gap="middle">
|
||||
<a-button type="primary" @click="open = true">
|
||||
Begin Tour Object
|
||||
</a-button>
|
||||
<a-button type="primary" @click="openFn = true">
|
||||
Begin Tour Function
|
||||
</a-button>
|
||||
</a-flex>
|
||||
<a-divider />
|
||||
<a-tour
|
||||
v-model:open="open"
|
||||
:steps="steps"
|
||||
:classes="classes"
|
||||
:styles="stylesObject"
|
||||
:arrow="false"
|
||||
/>
|
||||
<a-tour
|
||||
v-model:open="openFn"
|
||||
:steps="stepsWithButtonProps"
|
||||
:classes="classes"
|
||||
:styles="stylesFn"
|
||||
:arrow="false"
|
||||
type="primary"
|
||||
/>
|
||||
<a-space>
|
||||
<a-button ref="ref1" type="primary">
|
||||
Upload
|
||||
</a-button>
|
||||
<a-button ref="ref2">
|
||||
Save
|
||||
</a-button>
|
||||
<a-button ref="ref3" type="dashed">
|
||||
Other Actions
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-tour-root {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-tour-section {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
title: Tour
|
||||
description: A popup component for guiding users through a product.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
Use when you want to guide users through a product.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Non-modal | demo/non-modal.md |
|
||||
| Placement | demo/placement.md |
|
||||
| Custom mask style | demo/mask.md |
|
||||
| Custom indicator | demo/indicator.md |
|
||||
| Custom action | demo/actions-render.md |
|
||||
| Custom highlighted area style | demo/gap.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Comon props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| steps | Tour steps | TourStepItem[\] | - | - | × |
|
||||
| open | Open tour, support `v-model:open` | boolean | false | - | × |
|
||||
| current | What is the current step | number | - | - | × |
|
||||
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean \| { pointAtCenter: boolean } | true | - | × |
|
||||
| closeIcon | Customize close icon | VueNode | true | - | ✓ |
|
||||
| disabledInteraction | Disable interaction on highlighted area | boolean | false | - | × |
|
||||
| gap | Control the radius of the highlighted area and the offset between highlighted area and the element | { offset?: number \| [number, number]; radius?: number } | { offset: 6, radius: 2 } | - | × |
|
||||
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | - | × |
|
||||
| mask | Whether to enable masking, change mask style and fill color by pass custom props | boolean \| { style?: CSSProperties; color?: string } | true | - | × |
|
||||
| type | Type, affects the background color and text color | 'default' \| 'primary' | `default` | - | × |
|
||||
| scrollIntoViewOptions | support pass custom scrollIntoView options | boolean \| ScrollIntoViewOptions | true | - | × |
|
||||
| indicatorsRender | Custom indicator | (current: number, total: number) => VueNode | - | - | × |
|
||||
| actionsRender | Custom action | (originNode: VueNode, info: { current: number, total: number }) => VueNode | - | - | × |
|
||||
| zIndex | Tour zIndex | number | 1001 | - | × |
|
||||
| getPopupContainer | Set the rendering node of Tour floating layer | (node: HTMLElement) => HTMLElement | () => document.body | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | TourClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | TourStylesType | - | - | ✓ |
|
||||
| rootClass | Root container class | string | - | - | × |
|
||||
| prefixCls | - | string | - | - | × |
|
||||
|
||||
### Events
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| change | Callback when the step changes. Current is the previous step | (current: number) => void | - |
|
||||
| close | Callback function on shutdown | (current: number) => void | - |
|
||||
| finish | Callback when tour is finished | () => void | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| actionsRender | Custom action | (originNode: any, info: { current: number, total: number }) => any | - |
|
||||
| indicatorsRender | Custom indicator | (current: number, total: number) => any | - |
|
||||
| nextButton | Customize next button | (params: { current: number, isFirst: boolean, isLast: boolean }) => any | - |
|
||||
| prevButton | Customize previous button | (params: { current: number, isFirst: boolean, isLast: boolean }) => any | - |
|
||||
| coverRender | Customize step cover | (params: { step: TourStepItem, index: number }) => any | - |
|
||||
| titleRender | Customize step title | (params: { step: TourStepItem, index: number }) => any | - |
|
||||
| descriptionRender | Customize step description | (params: { step: TourStepItem, index: number }) => any | - |
|
||||
|
||||
## Types
|
||||
|
||||
### TourStepItem
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| target | Get the element the guide card points to. Empty makes it show in center of screen | HTMLElement \| (() => HTMLElement) \| null | - | - |
|
||||
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean \| { pointAtCenter: boolean } | true | - |
|
||||
| closeIcon | Customize close icon | VueNode | true | - |
|
||||
| cover | Displayed pictures or videos | VueNode | - | - |
|
||||
| title | Title | VueNode | - | - |
|
||||
| description | Description | VueNode | - | - |
|
||||
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | - |
|
||||
| mask | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | boolean \| { style?: CSSProperties; color?: string } | true | - |
|
||||
| type | Type, affects the background color and text color | 'default' \| 'primary' | `default` | - |
|
||||
| nextButtonProps | Properties of the Next button | { children?: VueNode; onClick?: () => void; class?: string; style?: CSSProperties } | - | - |
|
||||
| prevButtonProps | Properties of the previous button | { children?: VueNode; onClick?: () => void; class?: string; style?: CSSProperties } | - | - |
|
||||
| scrollIntoViewOptions | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | boolean \| ScrollIntoViewOptions | true | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,29 @@
|
||||
# tour Token
|
||||
|
||||
Use these variables through `theme.components.Tour`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Tour: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `zIndexPopup` | `number` | Tour popup z-index |
|
||||
| `closeBtnSize` | `number` | Close button size |
|
||||
| `primaryPrevBtnBg` | `string` | Background color of previous button in primary type |
|
||||
| `primaryNextBtnHoverBg` | `string` | Hover background color of next button in primary type |
|
||||
Reference in new issue
Block a user