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

基本用法

安装完成后，您可以导入并开始使用该库。有多种不同的配置选项可用于自定义该库。您可以在配置部分找到更多关于选项的详细信息。以下是基本的入门步骤。

这是一个创建具有多个步骤的导览的简单示例。

基本导览示例

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      showProgress: true,
      steps: [
        { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
        { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
        { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
        { element: '.footer', popover: { title: 'Title', description: 'Description' } },
      ]
    });
    
    driverObj.drive();

您可以将单个步骤配置传递给`highlight`方法来高亮单个元素。下面是一个简单的示例，展示如何高亮单个元素。

高亮一个简单元素

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver();
    driverObj.highlight({
      element: '#some-element',
      popover: {
        title: 'Title for the Popover',
        description: 'Description for it',
      },
    });

传递给`highlight`方法的相同配置可以用于创建导览。下面是一个简单的示例，展示如何创建一个具有单个步骤的导览。

上面的示例展示了库的基本用法。您可以在配置部分找到更多关于配置选项的详细信息，以及在示例部分找到示例。