Storybook Addon 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)/
    }
  }
};

上面的示例将输出以下面板