mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
effe2ee84b
# Conflicts: # app/react-native/readme.md # examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot # examples/cra-kitchen-sink/src/stories/index.js # examples/crna-kitchen-sink/package.json # integration/__image_snapshots__/cra-kitchen-sink-snap.png # integration/__image_snapshots__/vue-kitchen-sink-snap.png # yarn.lock
110 lines
3.5 KiB
Markdown
110 lines
3.5 KiB
Markdown
# Storybook Options Addon
|
|
|
|
[](https://circleci.com/gh/storybooks/storybook)
|
|
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
|
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
|
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
|
[](https://now-examples-slackin-nqnzoygycp.now.sh/)
|
|
[](#backers) [](#sponsors)
|
|
|
|
* * *
|
|
|
|
The Options addon can be used to (re-)configure the [Storybook](https://storybook.js.org) UI at runtime.
|
|
|
|
This addon works with Storybook for:
|
|
- [React](https://github.com/storybooks/storybook/tree/master/app/react)
|
|
- [React Native](https://github.com/storybooks/storybook/tree/master/app/react-native)
|
|
- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
First, install the addon
|
|
|
|
```sh
|
|
npm install -D @storybook/addon-options
|
|
```
|
|
|
|
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
|
|
|
|
```js
|
|
import '@storybook/addon-options/register';
|
|
```
|
|
|
|
Import and use the `setOptions` function in your config.js file.
|
|
|
|
```js
|
|
import * as storybook from '@storybook/react';
|
|
import { setOptions } from '@storybook/addon-options';
|
|
|
|
// Option defaults:
|
|
setOptions({
|
|
/**
|
|
* name to display in the top left corner
|
|
* @type {String}
|
|
*/
|
|
name: 'Storybook',
|
|
/**
|
|
* URL for name in top left corner to link to
|
|
* @type {String}
|
|
*/
|
|
url: '#',
|
|
/**
|
|
* show story component as full screen
|
|
* @type {Boolean}
|
|
*/
|
|
goFullScreen: false,
|
|
/**
|
|
* display panel that shows a list of stories
|
|
* @type {Boolean}
|
|
*/
|
|
showStoriesPanel: true,
|
|
/**
|
|
* display panel that shows addon configurations
|
|
* @type {Boolean}
|
|
*/
|
|
showAddonPanel: true,
|
|
/**
|
|
* display floating search box to search through stories
|
|
* @type {Boolean}
|
|
*/
|
|
showSearchBox: false,
|
|
/**
|
|
* show addon panel as a vertical panel on the right
|
|
* @type {Boolean}
|
|
*/
|
|
addonPanelInRight: false,
|
|
/**
|
|
* sorts stories
|
|
* @type {Boolean}
|
|
*/
|
|
sortStoriesByKind: false,
|
|
/**
|
|
* regex for finding the hierarchy separator
|
|
* @example:
|
|
* null - turn off hierarchy
|
|
* /\// - split by `/`
|
|
* /\./ - split by `.`
|
|
* /\/|\./ - split by `/` or `.`
|
|
* @type {Regex}
|
|
*/
|
|
hierarchySeparator: null,
|
|
|
|
/**
|
|
* sidebar tree animations
|
|
* @type {Boolean}
|
|
*/
|
|
sidebarAnimations: true,
|
|
|
|
/**
|
|
* id to select an addon panel
|
|
* @type {String}
|
|
*/
|
|
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
|
|
});
|
|
|
|
storybook.configure(() => require('./stories'), module);
|
|
```
|
|
It is also possible to call `setOptions()` inside individual stories. Note that this will bring impact story render performance significantly.
|