storybook-addon-measure-viewport

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/main.js 中的 addons 数组中添加 storybook-addon-measure-viewport。

// storybook/main.js

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

附加组件数组的顺序决定了 Measure Viewport 按钮在工具栏中的显示位置。

配置

Measure Viewport 附加组件已预先配置，并默认设置了所有颜色、显示和测量选项。如果您想进行控制，可以通过 measureViewport 参数 进行配置。

API

使用以下 parameters.measureViewport 属性配置 Measure Viewport。所有属性都是可选的。

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

灵感

• 测量
• 视窗