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 , or none	定位垂直高度测量（使用 none 隐藏）	left
.height.measure	innerHeight or clientHeight	确定测量如何计算（使用 innerHeight 包括滚动条）	innerHeight
.width.color	CSS 颜色	仅设置宽度测量的颜色	#e9004e
.width.display	top , middle , bottom , none	定位水平宽度测量（使用 none 隐藏）	top
.width.measure	innerWidth or clientWidth	确定测量如何计算（使用 innerWidth 包括滚动条）	innerWidth

🖥 滚动条可能很棘手！如果您希望测量包含滚动条，请使用 innerHeight 或 innerWidth。如果您不希望测量包含滚动条，请使用 clientHeight 或 clientWidth。

全局配置

要为所有 Storybook stories 配置，请在 .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",
    },
  },
};

在 story 级别配置

您也可以使用 参数继承 在 story 级别进行配置。

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

灵感来源

• 测量
• 视口