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

用法

在你的 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，则覆盖的颜色将反转。效果与使用值为 invert(1) 的 CSS filter 属性相同。