基本用法

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

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

基本导览示例

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`方法的相同配置可以用于创建导览。下面是一个简单的示例，展示如何创建一个具有单个步骤的导览。

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

入门介绍

示例

基本用法

基本导览示例

高亮一个简单元素