基本用法

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

¥Once installed, you can import and start using the library. There are several different configuration options available to customize the library. You can find more details about the options in the configuration section. Given below are the basic steps to get started.

以下是一个创建多步游览的简单示例。

¥Here is a simple example of how to create a tour with multiple steps.

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 方法以高亮单个元素。以下是一个高亮单个元素的简单示例。

¥You can pass a single step configuration to the highlight method to highlight a single element. Given below is a simple example of how to highlight a single element.

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 方法的相同配置可用于创建游览。以下是一个创建单步游览的简单示例。

¥The same configuration passed to the highlight method can be used to create a tour. Given below is a simple example of how to create a tour with a single step.

以上示例展示了该库的基本用法。在 配置部分 中查找有关配置选项的更多详细信息，并在 示例部分 中查找示例。

¥Examples above show the basic usage of the library. Find more details about the configuration options in the configuration section and the examples in the examples section.