npm 包 @beisen/storybook-addon-viewport 使用教程

前言

在开发前端应用的过程中，如何快速地调试 UI 界面以及检查不同分辨率下的表现效果是一个很重要的问题。本文将介绍如何使用 @beisen/storybook-addon-viewport 这个 npm 包来快速测试不同的 Viewport，以及如何在 Storybook 中对其进行集成。

什么是 @beisen/storybook-addon-viewport

@beisen/storybook-addon-viewport 是一个 Storybook 可插拔插件，用于预览 web 应用在不同 Viewport 下的界面展示效果。Viewport 是指浏览器中所能显示的可见区域大小，通常使用 width 和 height 来表示。

@beisen/storybook-addon-viewport 支持两种模式：Responsive 和 Fixed。Responsive 模式下，你可以设置一个 Viewport 宽度范围，插件将展示应用在不同 Viewport 下的自适应效果；Fixed 模式下，你可以精确地设置 Viewport 的宽高比，展示应用在固定宽高比的情况下的表现效果。

集成 @beisen/storybook-addon-viewport

使用 @beisen/storybook-addon-viewport 插件需要先安装 Storybook，然后在 Storybook 的配置文件 main.js 中配置并启用该插件。具体步骤如下：

1. 安装 Storybook

npm install @storybook/cli --save-dev

1. 初始化 Storybook 配置文件

npx sb init

1. 安装 @beisen/storybook-addon-viewport

npm install @beisen/storybook-addon-viewport --save-dev

1. 在 .storybook/main.js 文件中添加以下配置

module.exports = {
  addons: [
    '@beisen/storybook-addon-viewport',
  ],
};

1. 在 .storybook/preview.js 文件中添加以下配置

import { withViewport } from '@beisen/storybook-addon-viewport';

export const decorators = [
  withViewport,
];

到这里，你已经成功地集成了 @beisen/storybook-addon-viewport 插件。

使用 @beisen/storybook-addon-viewport

@beisen/storybook-addon-viewport 支持两种模式：Responsive 和 Fixed，可以通过 Addons 下方的 Viewport 选项卡进行切换。接下来，我们将介绍具体的使用方法。

Responsive 模式

在 Responsive 模式下，你需要设置一个 Viewport 宽度范围。插件将通过设定的 Viewport 宽度范围进行自适应展示。

可以通过添加 @addDecorator 装饰器来应用该模式。示例代码如下：

import { withViewport } from '@beisen/storybook-addon-viewport';

export default {
  title: 'Button',
  decorators: [withViewport],
};

export const Default = () => '<button>Default</button>';

Fixed 模式

在 Fixed 模式下，你可以精确地设置 Viewport 的宽高比，展示应用在固定宽高比的情况下的表现效果。

可以通过添加 @addDecorator 装饰器和 @viewport 参数来应用该模式。示例代码如下：

-- -------------------- ---- -------
------ - ------------ - ---- -----------------------------------

------ ------- -
  ------ ---------
  ----------- ---------------
  ----------- -
    --------- -
      ---------------- ----------
      ---------- -
        -------- -
          ----- ------- ---
          ------- -
            ------ --------
            ------- --------
          --
        --
      --
    --
  --
--

------ ----- ------- - -- -- ---------------------------

总结

@beisen/storybook-addon-viewport 插件是一个很实用的前端工具，可以帮助开发者快速、精确地测试不同的 Viewport 尺寸下的界面展示效果。本文介绍了该插件的集成以及使用方法，希望对你在前端开发中调试界面有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128080