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',
    },
  },
};