Storybook 附加组件版本

使用 Storybook 附加组件版本 在 Storybook 工具栏中突出显示组件或包的版本。

安装

npm install storybook-version --save-dev

基本设置

在您的 Storybook 配置文件的 main.js 中添加以下代码

module.exports = {
  addons: ['storybook-version'],
};

使用键值 version 设置您的故事参数，以提供需要显示的信息。

配置

属性	必需	值类型	描述	示例
major	✔	string	主版本	'1'
minor	✔	string	次版本	'2'
patch	✔	string	补丁版本	'3'
postfix		string	后缀版本额外数据	'beta.1'
style		键为 string，值为 string 的对象	覆盖默认版本样式的额外 CSS 属性	'{ 'color' : 'red', 'border-width': '2px' }'

实现

export const parameters = {
  version: {
    major: '1',
    minor: '2',
    patch: '3'
  }
}

故事设置示例

在默认故事配置中添加 version 参数

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    version: {
      major: '4',
      minor: '2',
      patch: '0',
      postfix: 'rc3',
      style: {
        color: 'red',
        'font-weight': '900',
        'font-size': '24px'
      }
    }
  }
}