徽章

[!提示]

有关更详细的文档，请参阅 文档。

版本 3 已发布！

版本 3 提供了更多自定义选项，以及 autobadges，现在可以使用 tags 或自定义 badges 参数为任何故事显示 侧边栏徽章。

安装

使用 storybook add 安装并注册插件

npx storybook add storybook-addon-badges

或者，手动安装

npm i -D storybook-addon-badges

然后，在 .storybook/main.js 中将其注册为插件。

// .storybook/main.ts

// Replace [your-framework] with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/[your-framework]';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-badges', // 👈 register the addon here
  ],
};

export default config;

添加徽章

添加徽章非常简单，只需添加全局、组件级别或故事级别的 tags 或 parameters 即可。

有关添加徽章的可用方法详情，请参阅 文档。

贡献

如果您希望看到某个功能，请提交 功能请求