Storybook 插件 Pixel Perfect

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

在线示例。尝试在 Storybook 工具栏和“Pixel Perfect”面板中切换眼睛按钮。

功能

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

入门

安装

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) 相同。