Storybook 工具栏插件

工具栏插件通过 Storybook 的工具栏 UI 控制全局故事渲染选项。它是一个通用插件，可用于

• 设置组件的主题
• 设置组件的国际化 (i18n) 语言环境
• 配置 Storybook 中几乎所有使用全局变量的功能

框架支持

安装

工具栏是 基础功能 的一部分，因此默认情况下在所有新的 Storybook 中都已安装。如果需要将其添加到 Storybook 中，可以运行

npm i -D @storybook/addon-toolbars

然后，将以下内容添加到 .storybook/main.js 中

export default {
  addons: ['@storybook/addon-toolbars'],
};

用法

用法在 文档 中有说明。

常见问题

这与 addon-contexts 相比如何？

Addon-toolbars 是 addon-contexts 的后续版本，后者在 Storybook 的工具栏中提供了方便的全局工具栏。

这两个包之间的主要区别在于 addon-toolbars 利用了 Storybook 的新 故事参数 功能，该功能具有以下优势

• 标准化。参数内置于 Storybook 6.x 中。由于 addon-toolbars 基于参数，因此无需学习任何插件特定的 API 即可使用它。

• 人体工程学。全局参数易于在 故事中、在 Storybook 文档 中，甚至在其他插件中使用。

• 框架兼容性。参数完全独立于框架，因此 addon-toolbars 与 React、Vue 3、Angular 等开箱即用，无需在插件中添加任何框架逻辑。