Astrodriver.js

浏览进度

你可以使用 showProgress 选项来显示游览的进度。它显示在屏幕的左下角。还有 progressText 选项可用于自定义进度显示的文本。

¥You can use showProgress option to show the progress of the tour. It is shown in the bottom left corner of the screen. There is also progressText option which can be used to customize the text shown for the progress.

请注意，showProgress 默认为 false。progressText 的默认文本为 {{current}} of {{total}}。你可以在 progressText 模板中使用 {{current}} 和 {{total}} 来显示当前步骤和总步骤。

¥Please note that showProgress is false by default. Also the default text for progressText is {{current}} of {{total}}. You can use {{current}} and {{total}} in your progressText template to show the current and total steps.

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  showButtons: ['next', 'previous'],
  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(16)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
  ]
});

driverObj.drive();