Storybook 擴充功能 CSS 自訂屬性

這個擴充功能讓您可以自訂專案的 CSS 屬性。

Vue3 友善的擴充功能：使用這個擴充功能，您不會遇到與 @types/react 相關的問題 =)

它會自動從我們的專案中抓取所有 CSS 自訂屬性，根據 CSS.support 瀏覽器的原生方法回應，在 color 和 text 之間進行轉換，並顯示在自訂面板中，您可以在其中輕鬆修改它。

安裝

在您的終端機中執行

npm install -D @bissolli/storybook-css-properties

然後，將以下內容新增至 .storybook/main.js

module.exports = {
  addons: ['@bissolli/storybook-css-properties'],
};

完成，擴充功能將會識別您元件上所有可用的 CSS 自訂屬性，並使其可以在 CSS 屬性面板中進行編輯。

自訂

擴充功能會為您完成所有工作，但如果因為某些原因您需要自行自訂某些內容，我們有一些技巧可供您使用。

透過 preview.{ts|js} 檔案，您可以簡單地使用擴充功能參數來獲得所需的輸出。

範例

export const parameters: Parameters = {
  cssCustomProperties: {
    // list here all the props you would like to customize manually
    // this will deepmerge and override any setup that was automatically done
    // by the addon
    props: {
      // prop name
      '--font-size': {
        // description to be shown in the table
        description: 'This property is the only one coming from the `Text` component',
        // if you want to group items, use this props
        // this has a higher weight than the following `matchCategory`
        category: 'Button properties'
      },
    },
    // props listed here won't be visible in the panel to be customized
    hiddenProps: [
      '--color-white',
    ],
    // to make your life easier when grouping props
    // you can use regex to match props name and add under a section in the table
    // the key is the name of the section
    matchCategory: {
      color: /color/,
      typograph: /font/,
      space: /(space|padding|margin|line-height)/
    }
  }
};

上面的範例將會輸出以下面板