Storybook 插件像素完美

通过在 Storybook 的预览 iframe 中添加组件的叠加图像来构建像素完美的组件。

在线示例。尝试切换 Storybook 工具栏中的眼睛按钮和“像素完美”面板。

功能

• 叠加渲染。
• 叠加可见性切换。
• 叠加不透明度自定义。
• 叠加颜色反转切换。
• 叠加选项重置。

入门

安装

npm install -D pixel-perfect-storybook-addon

或者

yarn add -D pixel-perfect-storybook-addon

然后，使用以下内容更新 .storybook/main.js（在此处了解更多信息）

// .storybook/main.js

module.exports = {
  addons: ["pixel-perfect-storybook-addon"],
};

用法

在您故事的参数中

parameters: {
    pixelPerfect: {
        overlay: {
            src: "path/to/overlay",
            opacity: 0.5,
            colorInversion: true,
        },
    },
},

选项

名称	类型	默认值	描述
overlay.src	字符串		叠加图像的路径。这可以是 HTML img 元素的 src 属性接受的任何字符串。
overlay.opacity	数字	0.5	叠加层的不透明度。
overlay.colorInversion	布尔值	true	如果为 true，则反转叠加层的颜色。效果与使用 CSS filter 属性并将值设置为 invert(1) 相同。