mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 20:21:07 +08:00
51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
---
|
|
title: 'Highlight'
|
|
---
|
|
|
|
Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlight/) addon allows you to highlight specific DOM nodes within your story. You can use it to call attention to particular parts of the story.
|
|
|
|
|
|
|
|
This addon can be used to enhance other addons. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
|
|
|
|
## Apply or clear highlights
|
|
|
|
Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'react/component-story-highlight-addon.js.mdx',
|
|
'angular/component-story-highlight-addon.ts.mdx',
|
|
'vue/component-story-highlight-addon.js.mdx',
|
|
'web-components/component-story-highlight-addon.js.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'common/addon-highlight-reset.js.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
## Customize style
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'common/addon-highlight-customize.js.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end -->
|