Storybook 擴充套件 Perfect Design

此擴充套件可幫助您以像素級的精確度開發元件！它允許您在開發的元件頂部放置一個半透明的圖像覆蓋層，並在它們之間執行像素到像素的比較。

鍵盤快捷鍵

• [Shift + 方向鍵] 進行 10px 位置變更
• [Alt + Shift + 方向鍵] 進行 0.1px 位置變更

開始使用

需要 Storybook 6.1 或更高版本。使用 npx sb upgrade --prerelease 安裝最新版本

首先，安裝擴充套件

npm i -D storybook-addon-perfect-design

然後，將以下內容新增至 .storybook/main.js

module.exports = {
  addons: ['storybook-addon-perfect-design']
};

使用方式

在您的 Stories 中

import React from 'react';

import imageUrl from './images/my-image.jpg'; 

export default {
  title: 'Design Assets',
  parameters: {
    assets: [
      imageUrl, // link to a file imported
      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
      'https://www.example.com', // link to a webpage
      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
    ],
  },
};

export const defaultView = () => (
  <div>your story here</div>
);