Tour

Since v2.2.0

​

<script setup lang="ts">
import { ref } from 'vue'

import type { TourStepOptions } from 'vexip-ui'

const active = ref(false)

const steps: TourStepOptions[] = [
  {
    target: '#start-1',
    title: 'Start Tour',
    content:
      'Although you already know its purpose, I still tell you that after clicking it, you can start tour',
  },
  {
    target: '#button-1',
    title: 'A Button',
    content: 'A button and it just sits there',
  },
  {
    target: '#another-button-1',
    title: 'Another Button',
    content: 'Another button and it just sits there too',
  },
]
</script>

<template>
  <Space>
    <Button id="start-1" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-1">
      A Button
    </Button>
    <Button id="another-button-1">
      Another Button
    </Button>
  </Space>
  <Tour v-model:active="active" :steps="steps"></Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { SelectExposed } from 'vexip-ui'

const active = ref(false)
const select = ref<SelectExposed>()
</script>

<template>
  <Space>
    <Button id="start-4" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-4">
      A Button
    </Button>
    <Select ref="select" style="width: 300px"></Select>
  </Space>
  <Tour v-model:active="active">
    <TourStep
      target="#start-4"
      title="Start Tour"
      content="Although you already know its purpose, I still tell you that after clicking it, you can start tour"
    ></TourStep>
    <TourStep
      target="#button-4"
      title="A Button"
      content="A button and it just sits there"
    ></TourStep>
    <TourStep
      :target="select"
      title="Empty Select"
      content="A selector without any option, so you can select nothing"
    ></TourStep>
  </Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TourStepOptions } from 'vexip-ui'

const active = ref(false)

const steps: TourStepOptions[] = [
  {
    target: '#start-2',
    title: 'Start Tour',
    content: 'By default the tour tip will be below',
  },
  {
    target: '#button-2',
    title: 'A Button',
    content: 'You can also place it to the right of the target or other position',
    placement: 'right',
  },
  {
    title: 'Center',
    content: "If you don't specify a target then it will be in the center",
  },
]
</script>

<template>
  <Space>
    <Button id="start-2" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-2">
      A Button
    </Button>
  </Space>
  <Tour v-model:active="active" :steps="steps"></Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TourStepOptions } from 'vexip-ui'

const active = ref(false)

const steps: TourStepOptions[] = [
  {
    target: '#start-7',
    title: 'Start Tour',
    content:
      'Although you already know its purpose, I still tell you that after clicking it, you can start tour',
  },
  {
    target: '#button-7',
    title: 'A Button',
    content: 'A button and it just sits there',
    type: 'success',
  },
  {
    target: '#another-button-7',
    title: 'Another Button',
    content: 'Another button and it just sits there too',
    type: 'error',
  },
]
</script>

<template>
  <Space>
    <Button id="start-7" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-7" type="success">
      A Button
    </Button>
    <Button id="another-button-7" type="error">
      Another Button
    </Button>
  </Space>
  <Tour v-model:active="active" :steps="steps" type="primary"></Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { SelectExposed, TourSignType } from 'vexip-ui'

const signTypes: TourSignType[] = ['dot', 'bar', 'count']
const signType = ref(signTypes[0])

const active = ref(false)
const select = ref<SelectExposed>()
</script>

<template>
  <p>
    Sign Type:
    <RadioGroup v-model:value="signType" button :options="signTypes"></RadioGroup>
  </p>
  <Space>
    <Button id="start-3" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-3">
      A Button
    </Button>
    <Select ref="select" style="width: 300px"></Select>
  </Space>
  <Tour v-model:active="active">
    <TourStep
      target="#start-3"
      title="Start Tour"
      content="Although you already know its purpose, I still tell you that after clicking it, you can start tour"
    ></TourStep>
    <TourStep
      target="#button-3"
      title="A Button"
      content="A button and it just sits there"
    ></TourStep>
    <TourStep
      :target="select"
      title="Empty Select"
      content="A selector without any option, so you can select nothing"
    ></TourStep>
  </Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { TourStepOptions } from 'vexip-ui'

const active = ref(false)

const steps: TourStepOptions[] = [
  {
    target: '#start-6',
    title: 'Start Tour',
    content:
      'Although you already know its purpose, I still tell you that after clicking it, you can start tour',
  },
  {
    target: '#button-6',
    title: 'A Button',
    content: 'A button and it just sits there',
  },
  {
    target: '#another-button-6',
    title: 'Another Button',
    content: 'Another button and it just sits there too',
  },
]
</script>

<template>
  <Space>
    <Button id="start-6" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-6">
      A Button
    </Button>
    <Button id="another-button-6">
      Another Button
    </Button>
  </Space>
  <Tour v-model:active="active" :steps="steps" permeable></Tour>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { SelectExposed } from 'vexip-ui'

const active = ref(false)
const select = ref<SelectExposed>()
</script>

<template>
  <Space>
    <Button id="start-5" type="primary" @click="active = true">
      Start Tour
    </Button>
    <Button id="button-5">
      A Button
    </Button>
    <Select ref="select" style="width: 300px"></Select>
  </Space>
  <Tour v-model:active="active">
    <TourStep
      target="#start-5"
      title="Start Tour"
      content="Although you already know its purpose, I still tell you that after clicking it, you can start tour"
    ></TourStep>
    <TourStep
      target="#button-5"
      title="A Button"
      content="A button and it just sits there"
    ></TourStep>
    <TourStep
      :target="select"
      title="Empty Select"
      content="A selector without any option, so you can select nothing"
    ></TourStep>

    <template #title="{ step, index }">
      {{ `Step ${index + 1}. ${step.title}` }}
    </template>
    <template #body="{ step }">
      <div style="color: var(--vxp-color-primary-base)">
        {{ step.content }}
      </div>
    </template>
    <template #sign="{ index }">
      {{ index === 2 ? 'Will be done' : `${2 - index} step remaining` }}
    </template>
  </Tour>
</template>