自定义弹出框

您可以使用默认的类名并覆盖样式，或者您可以全局或按步骤传递自定义类名到`popoverClass`选项中。

或者，如果您想要修改弹出框的DOM，您可以使用`onPopoverRender`回调来获取弹出框的DOM元素，并在弹出框渲染之前对其进行任何您想要的操作。

我们在下面添加了一些示例，但请查看定制主题 - 弹出框样式定制部分以获取详细指南，包括要定位的类名等。

使用 CSS

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      popoverClass: 'driverjs-theme'
    });
    
    driverObj.highlight({
      element: '#demo-theme',
      popover: {
        title: 'Style However You Want',
        description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
      }
    });

这是用于上述示例的CSS：

.driver-popover.driverjs-theme {
      background-color: #fde047;
      color: #000;
    }
    
    .driver-popover.driverjs-theme .driver-popover-title {
      font-size: 20px;
    }
    
    .driver-popover.driverjs-theme .driver-popover-title,
    .driver-popover.driverjs-theme .driver-popover-description,
    .driver-popover.driverjs-theme .driver-popover-progress-text {
      color: #000;
    }
    
    .driver-popover.driverjs-theme button {
      flex: 1;
      text-align: center;
      background-color: #000;
      color: #ffffff;
      border: 2px solid #000;
      text-shadow: none;
      font-size: 14px;
      padding: 5px 8px;
      border-radius: 6px;
    }
    
    .driver-popover.driverjs-theme button:hover {
      background-color: #000;
      color: #ffffff;
    }
    
    .driver-popover.driverjs-theme .driver-popover-navigation-btns {
      justify-content: space-between;
      gap: 3px;
    }
    
    .driver-popover.driverjs-theme .driver-popover-close-btn {
      color: #9b9b9b;
    }
    
    .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
      color: #000;
    }
    
    .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
      border-left-color: #fde047;
    }
    
    .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
      border-right-color: #fde047;
    }
    
    .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
      border-top-color: #fde047;
    }
    
    .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
      border-bottom-color: #fde047;
    }

使用钩子进行修改

import { driver } from "driver.js";
    import "driver.js/dist/driver.css";
    
    const driverObj = driver({
      // Get full control over the popover rendering.
      // Here we are adding a custom button that takes
      // the user to the first step.
      onPopoverRender: (popover, { config, state }) => {
        const firstButton = document.createElement("button");
        firstButton.innerText = "Go to First";
        popover.footerButtons.appendChild(firstButton);
    
        firstButton.addEventListener("click", () => {
          driverObj.drive(0);
        });
      },
      steps: [
        // ..
      ]
    });
    
    driverObj.drive();

入门介绍

示例

自定义弹出框

使用 CSS

使用钩子进行修改