Storybook 附加组件徽章

在你的故事中添加徽章

[!TIP]

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

安装

首先，安装包。

npm i 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;

你可以全局添加徽章，添加到单个组件，或添加到单个故事。只需将包含徽章文本的字符串数组作为参数添加到预览文件（用于全局徽章）

// .storybook/preview.ts
// Replace `[your-framework]` with the name of your framework
import type { Preview } from '@storybook/[your-framework]';

const preview: Preview = {
  //...other preview config
  parameters: {
    //...other parameters
    badges: ['beta'],
  },
};

export default preview;

或在组件/故事级别

// MyComponent.stories.ts
// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { MyComponent } from './MyComponent';

const meta = {
  title: 'Path/To/MyComponent',
  component: MyComponent,
  parameters: {
    badges: ['beta'], // <= Add component badges here
    //...other parameters
  },
} satisfies Meta<typeof MyComponent>;

type Story = StoryObj<typeof meta>;

const Default: Story = {
  args: {
    //...component props
  },
  parameters: {
    badges: ['beta'], // <= Add story badges here
  },
};

export default meta;
export { Default };

[!WARNING]

目前徽章只能从一组 parameters 中读取，因此故事徽章会覆盖全局和组件级别徽章，而组件徽章会覆盖全局徽章。

有关添加自定义徽章样式、工具提示等的信息，请参阅 完整文档

贡献者 ✨

感谢这些很棒的人 (表情符号键)

此项目遵循 all-contributors 规范。欢迎任何形式的贡献！

路线图

以下是我想包含的一些未来增强功能

• 侧边栏徽章即使未选中也会显示（被 Storybook 中的潜在错误阻止）
• 能够根据徽章名称搜索故事（同样被上述相同错误阻止）

如果你想看到某个功能，请提交 功能请求