Storybook 擴充套件版本

Storybook 擴充套件版本用於在 Storybook 工具列中突顯元件或套件的版本。

安裝

npm install storybook-version --save-dev

基本設定

在您的 Storybook 設定的 main.js 中加入以下程式碼

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

使用鍵值 version 設定您的 story 參數，以便提供要顯示的必要資訊。

設定

屬性	必填	數值類型	描述	範例
major	✔	字串	主要版本	'1'
minor	✔	字串	次要版本	'2'
patch	✔	字串	修補版本	'3'
postfix		字串	版本後綴額外資料	'beta.1'
style		鍵為字串，值為字串的物件	覆寫版本預設樣式的額外 CSS 屬性	'{ 'color' : 'red', 'border-width': '2px' }'

實作

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

Story 設定範例

在預設的 Story 設定中加入 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'
      }
    }
  }
}