高亮显示

Storybook 的高亮显示附加组件是一个用于可视化调试组件的有用工具，允许你在故事中使用它作为独立附加组件时突出显示特定 DOM 节点，或者增强其他附加组件（例如辅助功能附加组件）以告知你组件中的辅助功能问题。

Story with highlighted elements

突出显示 DOM 元素

要使用附加组件突出显示 DOM 元素，你需要在故事或附加组件中发出 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 树匹配。

重置突出显示的元素

默认情况下，Storybook 会在故事之间切换时自动删除突出显示的元素。但是，如果你需要手动清除它们，则可以在故事或附加组件中发出 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();
    },
  ],
};

从 useChannel API 钩子派生的 emit 函数在 Storybook 的 UI 中创建一个通信通道，用于监听事件并相应地更新 UI。Highlight 附加组件使用此通道监听自定义事件，并相应地更新突出显示的元素（如果有）。

自定义样式

默认情况下，附加组件会对已为故事启用的突出显示的元素应用标准样式。但是，你可以通过扩展负载对象并提供 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，那么它可以在元（组件）或故事级别被设置为 false 来重新启用。

导出

此插件向 Storybook 贡献以下导出

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

`HIGHLIGHT`

类型: string

突出显示 DOM 元素的事件。事件负载必须包含一个 elements 属性，该属性分配给一个选择器数组，这些选择器匹配您要突出显示的元素。请参见上面的使用示例。

`RESET_HIGHLIGHT`

类型: string

清除所有突出显示元素的事件。请参见上面的使用示例。