mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
# Storybook Addon Backgrounds
|
|
|
|
[](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-rrirkqohko.now.sh/)
|
|
[](#backers) [](#sponsors)
|
|
|
|
* * *
|
|
|
|
Storybook Background Addon can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
|
|
|
|
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
npm i -D @storybook/addon-backgrounds
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Then create a file called `addons.js` in your storybook config.
|
|
|
|
Add following content to it:
|
|
|
|
```js
|
|
import '@storybook/addon-backgrounds/register';
|
|
```
|
|
|
|
## Usage
|
|
|
|
Then write your stories like this:
|
|
|
|
```js
|
|
import React from 'react';
|
|
import { storiesOf } from "@storybook/react";
|
|
import backgrounds from "@storybook/addon-backgrounds";
|
|
|
|
storiesOf("Button", module)
|
|
.addDecorator(backgrounds([
|
|
{ name: "twitter", value: "#00aced", default: true },
|
|
{ name: "facebook", value: "#3b5998" },
|
|
]))
|
|
.add("with text", () => <button>Click me</button>);
|
|
```
|
|
|
|
Of course it's easy to create a library module so you can re-use:
|
|
|
|
```js
|
|
import addonBackgrounds from "@storybook/addon-backgrounds";
|
|
|
|
export const backgrounds = addonBackgrounds([
|
|
{ name: "twitter", value: "#00aced", default: true },
|
|
{ name: "facebook", value: "#3b5998" },
|
|
]);
|
|
```
|
|
|
|
```js
|
|
import React from 'react';
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import { backgrounds } from "./my-lib";
|
|
|
|
storiesOf("Button", module)
|
|
.addDecorator(backgrounds)
|
|
.add("with text", () => <button>Click me</button>);
|
|
```
|