高亮

Storybook 的 Highlight 插件是一个有用的工具，可以直观地调试您的组件，当作为独立插件使用或增强其他插件（如 Accessibility 插件）时，允许您突出显示 Story 中特定的 DOM 节点，以告知您组件中的可访问性问题。

Story with highlighted elements

高亮 DOM 元素

要使用插件高亮 DOM 元素，您需要从 Story 或插件中发出 HIGHLIGHT 事件。事件负载必须包含一个 elements 属性，该属性被分配给一个选择器数组，这些选择器与您想要高亮的元素相匹配。例如

MyComponent.stories.ts|tsx

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: ['h2', 'a', '.storybook-button'],
      });
      return storyFn();
    },
  ],
};

我们建议选择尽可能具体的选择器，以避免高亮显示其他插件使用的元素。这是因为该插件尝试将选择器与整个 DOM 树匹配。

重置高亮元素

开箱即用，当在 Stories 之间转换时，Storybook 会自动删除高亮元素。但是，如果您需要手动清除它们，您可以从 Story 或插件中发出 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();
    },
  ],
};

emit 函数派生自 useChannel API Hook，在 Storybook 的 UI 中创建一个通信通道，以监听事件并相应地更新 UI。Highlight 插件使用此通道来监听自定义事件并相应地更新高亮元素（如果有）。

自定义样式

默认情况下，该插件将标准样式应用于您为 Story 启用的高亮元素。但是，您可以通过扩展负载对象并提供 color 和/或 style 属性来启用您的自定义样式。例如

MyComponent.stories.ts|tsx

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: ['h2', 'a', '.storybook-button'],
        color: 'blue',
        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
      });
      return storyFn();
    },
  ],
};

此参数最有用的是允许在更具体的级别进行覆盖。例如，如果此参数在项目级别设置为 true，则可以通过在元数据（组件）或 Story 级别将其设置为 false 来重新启用它。

导出

此插件为 Storybook 贡献了以下导出

import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';

`HIGHLIGHT`

类型：string

一个高亮 DOM 元素的事件。事件负载必须包含一个 elements 属性，该属性被分配给一个选择器数组，这些选择器与您想要高亮的元素相匹配。请参阅上面的用法示例。

`RESET_HIGHLIGHT`

类型：string

一个清除所有高亮元素高亮的事件。请参阅上面的用法示例。