Storybook 插件高亮

Storybook 插件允许您在故事中高亮显示特定的 DOM 节点。

使用它来吸引人们注意故事的特定部分。或者使用它来增强您可能正在构建的其他插件。例如，无障碍 插件使用它来高亮显示未通过无障碍检查的 DOM 节点。

用法

此插件需要 Storybook 6.5 或更高版本。高亮显示是 基础 的一部分，因此默认情况下在所有新的 Storybook 中都安装了它。如果您需要将其添加到您的 Storybook 中，您可以运行以下命令

yarn

yarn add --dev @storybook/addon-highlight

npm

npm install @storybook/addon-highlight --save-dev

pnpm

pnpm add --save-dev @storybook/addon-highlight

在您的 .storybook/main.js|ts 中将 "@storybook/addon-highlight" 添加到插件数组中

// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  addons: ['@storybook/addon-highlight'],
};

export default config;

高亮显示 DOM 元素

通过从故事或插件内部发出 HIGHLIGHT 事件来高亮显示 DOM 节点。事件有效负载必须包含一个 elements 属性，该属性分配给一个选择器数组，该数组与您要高亮显示的元素匹配。

// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const Highlighted: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
      });
      return storyFn();
    },
  ],
};

重置高亮显示的元素

故事发生变化时，高亮显示会自动清除。您也可以通过发出 RESET_HIGHLIGHT 事件来手动清除它们。

// MyComponent.stories.ts|tsx
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const ResetHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
      emit(HIGHLIGHT, {
        elements: ['header', 'section', 'footer'],
      });
      return storyFn();
    },
  ],
};

自定义样式

此插件将标准样式应用于您为故事启用的高亮显示元素。但是，您可以通过扩展有效负载对象并提供 color 和/或 style 属性来启用您的自定义样式。例如

// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const StyledHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
        color: 'red',
        style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
      });
      return storyFn();
    },
  ],
};