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"],
};

使用方法

在你的 stories 参数中

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

选项

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