Storybook 狀態擴充功能

Storybook 狀態擴充功能會在您的 story 中顯示元件狀態。

即時預覽

安裝

yarn add --dev @mverissimoo/storybook-addon-status

設定

將 storybook-addon-status 加入您的擴充功能列表

// .storybook/main.js

module.exports = {
  addons: ['@mverissimoo/storybook-addon-status/preset'],
};

用法

只需在您的 story 中加入以下參數

export default {
  title: 'Components/Button',
  parameters: {
    status: 'stable', // beta| deprecated | review | stable
  },
};

自訂狀態標籤

只需在您的 parameters 中加入一個 status 物件，例如

// .storybook/preview.js

export const parameters = {
  badges: {
    custom: {
      title: 'some badge',
      color: '#FFFFFF',
      background: '#000000',
    },
  },
};