主题

你可以通过向弹出窗口添加自定义类或将 CSS 应用于 driver.js 使用的不同类来自定义驱动程序的外观。

¥You can customize the look and feel of the driver by adding custom class to popover or applying CSS to different classes used by driver.js.

弹出层样式

¥Styling Popover

你可以在驱动程序配置中全局设置 popoverClass 选项，也可以在步骤级别设置 popoverClass 选项，将自定义类应用于弹出窗口，然后使用 CSS 应用样式。

¥You can set the popoverClass option globally in the driver configuration or at the step level to apply custom class to the popover and then use CSS to apply styles.

const driverObj = driver({
  popoverClass: 'my-custom-popover-class'
});

// or you can also have different classes for different steps
const driverObj2 = driver({
  steps: [
    {
      element: '#some-element',
      popover: {
        title: 'Title',
        description: 'Description',
        popoverClass: 'my-custom-popover-class'
      }
    }
  ],
})

以下是应用于弹出窗口的类列表，你可以将其与 popoverClass 选项结合使用，以在弹出窗口上应用自定义样式。

¥Here is the list of classes applied to the popover which you can use in conjunction with popoverClass option to apply custom styles on the popover.

/* Class assigned to popover wrapper */
.driver-popover {}

/* Arrow pointing towards the highlighted element */
.driver-popover-arrow {}

/* Title and description */
.driver-popover-title {}
.driver-popover-description {}

/* Close button displayed on the top right corner */
.driver-popover-close-btn {}

/* Footer of the popover displaying progress and navigation buttons */
.driver-popover-footer {}
.driver-popover-progress-text {}
.driver-popover-prev-btn {}
.driver-popover-next-btn {}

访问 示例页面 获取修改弹出窗口样式的示例。

¥Visit the example page for an example that modifies the popover styles.

修改 Popover DOM

¥Modifying Popover DOM

或者，你也可以使用 onPopoverRender 钩子在弹出窗口显示之前修改它。此钩子以弹出窗口 DOM 作为第一个参数调用。

¥Alternatively, you can also use the onPopoverRender hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.

type PopoverDOM = {
  wrapper: HTMLElement;
  arrow: HTMLElement;
  title: HTMLElement;
  description: HTMLElement;
  footer: HTMLElement;
  progress: HTMLElement;
  previousButton: HTMLElement;
  nextButton: HTMLElement;
  closeButton: HTMLElement;
  footerButtons: HTMLElement;
};

onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;

页面样式

¥Styling Page

以下类在驱动程序处于活动状态时应用于页面。

¥Following classes are applied to the page when the driver is active.

/* Applied to the `body` when the driver: */
.driver-active {}  /* is active */
.driver-fade {}    /* is animated */
.driver-simple {}  /* is not animated */

以下类应用于覆盖层，即显示在页面上的灯箱。

¥Following classes are applied to the overlay i.e. the lightbox displayed over the page.

.driver-overlay {}

高亮元素的样式

¥Styling Highlighted Element

每当高亮一个元素时，以下类都会应用于该元素。

¥Whenever an element is highlighted, the following classes are applied to it.

.driver-active-element {}