高亮

Storybook 的 高亮 插件是一种有用的工具，可用于直观地调试你的组件，当用作独立插件时，它允许你高亮故事中的特定 DOM 节点，或者增强其他插件（如 可访问性插件）以通知你组件内的可访问性问题。

¥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.