Astro driver.js
入门介绍
安装 基本用法 配置 API 参考 定制主题 迁移到 1.x
示例
动态导览 静态导览 自定义弹出框 显示进度 异步导览 退出确认 禁止关闭 定制彩色遮罩层 弹出框位置 弹出框按钮 简单高亮

静态导览

您只需将animate选项设置为false，就可以使导览变为静态。这将使导览在步骤之间没有动画效果，并仅显示弹出框。

基本静态导览

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      animate: false,
      showProgress: false,
      showButtons: ['next', 'previous', 'close'],
      steps: [
        { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
        { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
        { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
        { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
        { element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
        { element: '#docs-sidebar a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
        { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
      ]
    });
    
    driverObj.drive();