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" 添加到 addons 数组中

// .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();
    },
  ],
};