storybook-addon-measure-viewport

測量視窗附加元件會顯示目前預覽視窗的高度和寬度。對於微調響應式斷點很有用。

安裝

1. 以開發依賴項安裝此附加元件。

// Install with NPM
npm install -D storybook-addon-measure-viewport

// Install with Yarn
yarn add -D storybook-addon-measure-viewport

2. 將 storybook-addon-measure-viewport 加入 .storybook/main.js 中的 addons 陣列。

// storybook/main.js

module.exports = {
  addons: [
    "addon-a",
    "addon-b",
    "storybook-addon-measure-viewport", // Heads up! Order matters.
    "addon-c",
  ],
};

附加元件陣列的順序決定了測量視窗按鈕在工具列中顯示的位置。

組態

測量視窗附加元件已預先組態，並開箱即用設定所有顏色、顯示和測量選項。如果您想要擁有控制權，可以透過 measureViewport 參數進行組態。

API

使用以下 parameters.measureViewport 屬性組態測量視窗。所有屬性都是可選的。

measureViewport	選項	描述	預設值
.color	css 顏色	設定寬度和高度測量的顏色	#e9004e
.height.color	css 顏色	僅設定高度測量的顏色	#e9004e
.height.display	left、middle、right 或 none	定位垂直、高度測量（使用 none 隱藏）	left
.height.measure	innerHeight 或 clientHeight	決定如何計算測量值（使用 innerHeight 包含捲軸）	innerHeight
.width.color	css 顏色	僅設定寬度測量的顏色	#e9004e
.width.display	top、middle、bottom、none	定位水平、寬度測量（使用 none 隱藏）	top
.width.measure	innerWidth 或 clientWidth	決定如何計算測量值（使用 innerWidth 包含捲軸）	innerWidth

🖥 捲軸可能很棘手！如果您希望在測量中包含捲軸，請使用 innerHeight 或 innerWidth。如果您不希望在測量中包含捲軸，請使用 clientHeight 或 clientWidth。

全域組態

若要為所有 Storybook 故事進行組態，請在 .storybook/preview.js 中設定 measureViewport 全域參數。

export const parameters = {
  measureViewport: {
    color: "DarkCyan", // this is overridden by height.color & width.color
    height: {
      color: "rgba(0,100,0,0.5)",
      display: "right",
      measure: "clientHeight",
    },
    width: {
      color: "#0033cc55",
      display: "bottom",
      measure: "clientWidth",
    },
  },
};

在故事層級組態

您也可以使用 參數繼承在故事層級進行組態。

// Button.stories.js

// Set options for all Button stories in module
export default {
  title: "Button",
  parameters: {
    measureViewport: {
      color: "DarkCyan", // this is overridden by height.color & width.color
      height: {
        color: "rgba(0,100,0,0.5)",
        display: "middle",
        measure: "clientHeight",
      },
      width: {
        color: "#0033cc55",
        display: "middle",
        measure: "innerWidth",
      },
    },
  },
};

// Disable height measure in Button/Large story only
export const Large = Template.bind({});
Large.parameters = {
  measureViewport: {
    height: {
      display: "none",
    },
  },
};

靈感

• 測量
• 視窗