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 中潛在錯誤的阻礙）
• 能夠根據徽章名稱搜尋故事（也受到上述相同錯誤的阻礙）

如果您有想要看到的功能，請提出功能要求