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

定制主题

您可以通过为弹出框添加自定义类或对driver.js使用的不同类应用CSS来自定义driver的外观和动作。

弹出框样式定制

您可以在全局的driver配置中设置`popoverClass`选项，或者在步骤级别设置弹出框的自定义类，然后使用CSS来修改样式。

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`选项使用这些类来为弹出框应用自定义样式。 

/* 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 {}

你可以访问示例页面，找到一个修改弹出框样式的示例。

修改弹出框DOM

另外，您还可以使用`onPopoverRender`钩子，在弹出框显示之前修改弹出框的DOM。该钩子以弹出框DOM作为第一个参数被调用。

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;

页面样式定制

当driver处于活动状态时，以下类将应用于页面。

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

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

.driver-overlay {}

高亮元素样式定制

每当一个元素被高亮时，以下类将被应用于它。

.driver-active-element {}