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

用法

在你的 Story 的參數中

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