storybook-addon-responsive-views

在各种响应式视口中查看您的 Storybook 故事

在开发响应式应用程序时，断点边缘通常会导致最多的问题。此 Storybook 插件允许您在各种断点处预览您的组件/故事，以便您可以确保您的 Web 应用程序无论屏幕尺寸如何都能看起来很棒 ✨

兼容性：目前此插件仅适用于 React。您可以在 #6 中表达对 Angular 和其他框架的支持，或者更好的是：发送一个 PR 添加对它的支持。

安装

安装以下 npm 模块

yarn add storybook-addon-responsive-views

基本用法

withResponsiveViews 作为装饰器添加到您的故事中。

首先，在 addons.js 中注册插件。这使您可以访问 Storybook 工具栏中打开/关闭视图的切换按钮。

import 'storybook-addon-responsive-views/register'

然后您可以将其全局添加到所有故事，或单独添加到某个故事

// Globally in .storybook/config.js
import { addDecorator } from '@storybook/react'
import { withResponsiveViews } from 'storybook-addon-responsive-views'

addDecorator(withResponsiveViews)

或

// In a .story file
import { withResponsiveViews } from 'storybook-addon-responsive-views'

storiesOf('Component', module)
  .addDecorator(withResponsiveViews)
  .add(...)

断点配置

默认情况下，设置了两个断点：平板电脑为 768px，桌面为 1024px。对于每个断点，withResponsiveViews 将在断点下方 1px 和断点本身处创建一个视图，以及一个 320px 的最小视图。

要设置自己的断点，请将一个对象传递给 withResponsiveViews 装饰器。这可以通过在全局或本地级别传递断点对象来完成。您可以根据需要添加任意数量的断点，并使用任何您想要的键名。键名用于视图标题。示例如下

addDecorator(
  withResponsiveViews({
    mobile: 425,
    tablet: 750,
    desktop: 1000,
    large: 1200,  
  })
)

响应式视图

您的响应式视图将显示在故事组件下方，以便您可以查看它在各种尺寸下的显示效果。要打开/关闭视图，请使用 Storybook 工具栏中的响应式视图切换按钮。

访问文档和窗口

每个响应式视图都在一个 iframe 中渲染。要访问每个 iframe 的 document 和 window 属性，您需要将上下文导入到您的故事中，并将文档/窗口作为道具传递。例如

import { ResponsiveViewContextConsumer } from 'storybook-addon-responsive-views'

storiesOf('Component', module)
  .add(
    'MediaQuery',
      () => {
        return (
          <ResponsiveViewContextConsumer>
            {({ document, window }) => <Component window={window} />}
          </ResponsiveViewContextConsumer>
        )
      }
    )
  )