mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
a039c96426
# Conflicts: # MIGRATION.md # addons/backgrounds/package.json # addons/events/package.json # addons/info/package.json # addons/info/src/__snapshots__/index.test.js.snap # addons/jest/package.json # addons/knobs/package.json # addons/links/package.json # addons/notes/package.json # addons/options/package.json # addons/storyshots/storyshots-core/package.json # addons/storyshots/storyshots-puppeteer/package.json # addons/storysource/package.json # addons/viewport/package.json # app/angular/package.json # app/html/package.json # app/marko/package.json # app/mithril/package.json # app/polymer/package.json # app/react/package.json # app/vue/package.json # examples/angular-cli/package.json # examples/cra-kitchen-sink/package.json # examples/html-kitchen-sink/package.json # examples/marko-cli/package.json # examples/mithril-kitchen-sink/package.json # examples/official-storybook/package.json # examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot # examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot # examples/polymer-cli/package.json # examples/vue-kitchen-sink/package.json # jest.config.js # lib/cli/package.json # lib/cli/test/snapshots/angular-cli/package.json # lib/cli/test/snapshots/marko/package.json # lib/cli/test/snapshots/meteor/package.json # lib/cli/test/snapshots/mithril/package.json # lib/cli/test/snapshots/polymer/package.json # lib/cli/test/snapshots/react/package.json # lib/cli/test/snapshots/react_project/package.json # lib/cli/test/snapshots/react_scripts/package.json # lib/cli/test/snapshots/sfc_vue/package.json # lib/cli/test/snapshots/update_package_organisations/package.json # lib/cli/test/snapshots/vue/package.json # lib/cli/test/snapshots/webpack_react/package.json # lib/codemod/package.json # lib/components/src/layout/__snapshots__/index.stories.storyshot # lib/core/package.json # lib/core/src/server/config/webpack.config.prod.js # package.json # yarn.lock
Storybook Addon Backgrounds
Storybook Background Addon can be used to change background colors inside the preview in Storybook.
Installation
npm i -D @storybook/addon-backgrounds
Configuration
Then create a file called addons.js in your storybook config.
Add following content to it:
import '@storybook/addon-backgrounds/register';
Usage
Then write your stories like this:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withBackgrounds } from '@storybook/addon-backgrounds';
storiesOf('Button', module)
.addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
])
)
.add('with text', () => <button>Click me</button>);
You can add the backgrounds to all stories with addDecorator in .storybook/config.js:
import { addDecorator } from '@storybook/react'; // <- or your storybook framework
import { withBackgrounds } from '@storybook/addon-backgrounds';
addDecorator(
withBackgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
])
);
If you want to override backgrounds for a single story or group of stories, pass the backgrounds parameter:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({
backgrounds: [
{ name: 'red', value: '#F44336' },
{ name: 'blue', value: '#2196F3', default: true },
],
})
.add('with text', () => <button>Click me</button>);
If you don't want to use backgrounds for a story, you can set the backgrounds parameter to [], or use { disable: true } to skip the addon:
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module).add('with text', () => <button>Click me</button>, {
backgrounds: { disable: true },
});