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	字串		覆蓋圖像的路徑。這可以是 HTML img 元素的 src 屬性接受的任何字串。
overlay.opacity	數字	0.5	覆蓋層的不透明度。
overlay.colorInversion	布林值	true	如果為 true，則覆蓋層的顏色會反轉。效果與使用 CSS filter 屬性且值為 invert(1) 的效果相同。