Storybook CSS Chaos 插件

一个插件，它在组件周围应用可继承的 CSS 属性，以便更好地测试改变组件外观的上下文场景。通过这种方式测试，可以在组件添加到应用程序中时限制样式溢出。

之前

之后

使用脚本

运行 npm install css-chaos-addon

在你的 main.js 文件中，添加到 addons 数组

addons: ["css-chaos-addon"]

支持的 CSS 属性

此插件设置的可继承属性包括

• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• letter-spacing
• line-height
• list-style-position
• list-style-type
• text-align
• text-indent
• text-transform
• white-space
• word-spacing

有关这些属性的更多信息，请在此查看属性文件。

某些属性具有可能由使用该插件的应用程序设置的任意值（例如 color）。如果您想用自己的值集覆盖这些值，请参阅自定义 CSS 属性部分。

自定义 CSS 属性

要进行自定义，您需要利用 Storybook 的参数功能，该功能可以全局设置或在故事级别设置。CSS Chaos 插件使用的参数称为 cssPropertyData。

CSS 属性键包括

• name：CSS 属性的名称，将显示在插件下拉菜单上方，并用于在全局 CSS 中设置 CSS 属性值。
• description：CSS 属性的描述，将显示在插件面板中，位于名称下方和下拉选项上方。
• default：下拉菜单的默认值。当插件面板激活时，此值将自动应用于全局 CSS。
• values：用户可以选择用来操纵视图的选项列表。随机化功能也将使用此列表来选取一个随机值。

如果您想添加 CSS 属性

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "hello world",
                "description": "Lorem ipsum",
                "default": "world",
                "values": [
                    "hello",
                    "world"
                ]
            }
        ]
    }
};

如果您想修改 CSS 属性，更新对象中的一个或所有键 (name, description, default, values)

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "updated-name",
                "description": "An updated description goes here",
                "default": "new default",
                "values": [
                    "this",
                    "includes",
                    "updated",
                    "values",
                    "new default"
                ]
            }
        ]
    }
};

要从插件面板中移除现有的 CSS 属性下拉菜单，请从对象中移除所有值

parameters: {
    cssChaos: {
      propertyData:
        [
            {
                "name": "color",
                "values": []
            }
        ]
    }
};

设置最大变异数

如果您想限制点击“随机化！”按钮时的变异数量，可以设置一个名为 maxVariance 的值。如果您设置了最大变异数，它只会随机化您设置的属性数量。如果您不设置最大变异数，它将默认随机化所有属性。

parameters: {
    cssChaos: {
        maxVariance: 5
    }
};

• 设置最大变异数并不意味着会有该数量的非默认值。每个属性都被设置为一个随机值，该值可能等于默认值。

关闭历史记录

如果您想隐藏历史记录下拉菜单，请将 cssChaos 对象下的 history 属性设置为 false。默认情况下，此属性设置为 true。

parameters: {
    cssChaos: {
        history: false
    }
};

开发脚本

• npm start 在观察模式下运行 babel 并启动 Storybook
• npm run build 构建并打包你的插件代码