mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 22:51:18 +08:00
77c0f3ab81
# Conflicts: # addons/a11y/package.json # addons/actions/package.json # addons/backgrounds/package.json # addons/controls/package.json # addons/docs/package.json # addons/essentials/package.json # addons/interactions/package.json # addons/jest/package.json # addons/links/package.json # addons/measure/package.json # addons/outline/package.json # addons/storyshots/storyshots-core/package.json # addons/storysource/package.json # addons/toolbars/package.json # addons/viewport/package.json # docs/faq.md # examples/angular-cli/.storybook/main.js # examples/angular-cli/package.json # examples/cra-kitchen-sink/.storybook/main.js # examples/cra-kitchen-sink/package.json # examples/cra-react15/.storybook/main.js # examples/cra-react15/package.json # examples/cra-ts-essentials/.storybook/main.ts # examples/cra-ts-essentials/package.json # examples/cra-ts-kitchen-sink/.storybook/main.ts # examples/cra-ts-kitchen-sink/package.json # examples/ember-cli/.storybook/main.js # examples/ember-cli/package.json # examples/external-docs/package.json # examples/html-kitchen-sink/.storybook/main.js # examples/html-kitchen-sink/package.json # examples/official-storybook/main.ts # examples/official-storybook/package.json # examples/preact-kitchen-sink/.storybook/main.js # examples/preact-kitchen-sink/package.json # examples/react-ts-webpack4/package.json # examples/react-ts/package.json # examples/server-kitchen-sink/package.json # examples/standalone-preview/package.json # examples/svelte-kitchen-sink/.storybook/main.js # examples/svelte-kitchen-sink/package.json # examples/vue-3-cli/.storybook/main.js # examples/vue-3-cli/package.json # examples/vue-cli/.storybook/main.js # examples/vue-cli/package.json # examples/vue-kitchen-sink/.storybook/main.js # examples/vue-kitchen-sink/package.json # examples/web-components-kitchen-sink/.storybook/main.js # frameworks/angular/package.json # frameworks/ember/package.json # frameworks/preact-webpack5/package.json # frameworks/vue-webpack5/package.json # frameworks/vue3-webpack5/package.json # lib/addons/package.json # lib/api/package.json # lib/builder-webpack4/package.json # lib/builder-webpack5/package.json # lib/channel-postmessage/package.json # lib/channel-websocket/package.json # lib/channels/package.json # lib/cli/package.json # lib/cli/src/automigrate/fixes/angular12.test.ts # lib/cli/src/automigrate/index.ts # lib/cli/src/versions.ts # lib/client-api/package.json # lib/client-logger/package.json # lib/codemod/package.json # lib/components/package.json # lib/core-client/package.json # lib/core-common/package.json # lib/core-events/package.json # lib/core-server/package.json # lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix # lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix # lib/core-vite/package.json # lib/csf-tools/package.json # lib/docs-tools/package.json # lib/instrumenter/package.json # lib/manager-webpack4/package.json # lib/manager-webpack5/package.json # lib/node-logger/package.json # lib/postinstall/package.json # lib/preview-web/package.json # lib/router/package.json # lib/source-loader/package.json # lib/store/package.json # lib/telemetry/package.json # lib/theming/package.json # lib/ui/package.json # presets/server-webpack/package.json # renderers/html/package.json # renderers/react/package.json # renderers/svelte/package.json # renderers/web-components/package.json # scripts/build-package.js # scripts/bundle-package.ts # yarn.lock
Storybook Toolbars Addon
The Toolbars addon controls global story rendering options from Storybook's toolbar UI. It's a general purpose addon that can be used to:
- set a theme for your components
- set your components' internationalization (i18n) locale
- configure just about anything in Storybook that makes use of a global variable
Installation
Toolbars is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
npm i -D @storybook/addon-toolbars
Then, add following content to .storybook/main.js:
module.exports = {
addons: ['@storybook/addon-toolbars'],
};
Usage
The usage is documented in the documentation.
FAQs
How does this compare to addon-contexts?
Addon-toolbars is the successor to addon-contexts, which provided convenient global toolbars in Storybook's toolbar.
The primary difference between the two packages is that addon-toolbars makes use of Storybook's new Story Args feature, which has the following advantages:
-
Standardization. Args are built into Storybook in 6.x. Since
addon-toolbarsis based on args, you don't need to learn any addon-specific APIs to use it. -
Ergonomics. Global args are easy to consume in stories, in Storybook Docs, or even in other addons.
- Framework compatibility. Args are completely framework-independent, so
addon-toolbarsis compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.