mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
24 lines
1.0 KiB
Markdown
24 lines
1.0 KiB
Markdown
# Storybook Addon Outline
|
|
|
|
Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in [Storybook](https://storybook.js.org). Based on [Pesticide](https://github.com/mrmrs/pesticide), it draws outlines around every single element in the preview pane.
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
|
|
|
```sh
|
|
npm i -D @storybook/addon-outline
|
|
```
|
|
|
|
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
|
|
|
```js
|
|
module.exports = {
|
|
addons: ['@storybook/addon-outline'],
|
|
};
|
|
```
|
|
|
|
You can now click on the outline button or press the <kbd>o</kbd> key in the toolbar to toggle the outlines.
|