高亮

Storybook 的 高亮 插件是一个实用的工具，可用于可视化调试组件。它可以作为独立插件使用，也可以增强其他插件（例如 可访问性插件）的功能，从而帮助你发现组件中的可访问性问题。

¥Storybook's Highlight addon is a helpful tool for visually debugging your components, allowing you to highlight specific DOM nodes within your story when used as a standalone addon or enhancing other addons such as the Accessibility addon to inform you of accessibility issues within your components.

高亮 DOM 元素

¥Highlighting DOM Elements

要使用此插件高亮显示 DOM 元素，你需要在故事或插件内部发出 HIGHLIGHT 事件。事件有效负载必须包含一个 elements 属性，该属性分配给一个选择器数组，该数组匹配你要高亮的元素。例如：

¥To highlight DOM elements with the addon, you'll need to emit the HIGHLIGHT event from within a story or an addon. The event payload must contain an elements property assigned to an array of selectors matching the elements you want to highlight. For example:

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

重置高亮的元素

¥Reset highlighted elements

开箱即用，Storybook 会在故事之间转换时自动删除高亮的元素。但是，如果你需要手动清除它们，则可以在故事或插件中发出 RESET_HIGHLIGHT 事件。例如：

¥Out of the box, Storybook automatically removes highlighted elements when transitioning between stories. However, if you need to clear them manually, you can emit the RESET_HIGHLIGHT event from within a story or an addon. For example:

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

自定义样式

¥Customize style

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

¥By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a color and/or style properties. For example:

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

API

参数

¥Parameters

此插件将以下 参数 组件添加到 Storybook 的 highlight 命名空间中：

¥This addon contributes the following parameters to Storybook, under the highlight namespace:

disable

类型：boolean

¥Type: boolean

禁用此插件的行为。如果你希望在整个 Storybook 中禁用此插件，则应在注册 addon-essentials 时进行设置。有关更多信息，请参阅 基本插件文档。

¥Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering addon-essentials. See the essential addon's docs for more information.

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

¥This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to true at the project level, it could then be re-enabled by setting it to false at the meta (component) or story level.

导出

¥Exports

此插件向 Storybook 提供以下导出功能：

¥This addon contributes the following exports to Storybook:

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

HIGHLIGHT

类型：string

¥Type: string

高亮显示 DOM 元素的事件。事件有效负载必须包含一个 elements 属性，该属性分配给一个选择器数组，该数组匹配你要高亮的元素。参见上方的 使用示例。

¥An event that highlights DOM elements. The event payload must contain an elements property assigned to an array of selectors matching the elements you want to highlight. See the usage example, above.

RESET_HIGHLIGHT

类型：string

¥Type: string

清除高亮元素的所有高亮的事件。参见上方的 使用示例。

¥An event to clear all highlights from highlighted elements. See the usage example, above.