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(...)

断点配置

默认情况下，设置了两个断点：tablet (平板电脑) 为 768px，desktop (桌面) 为 1024px。对于每个断点，withResponsiveViews 会创建一个比断点小 1px 的视图以及断点本身的视图，还有一个 320px 的最小视图。

要设置你自己的断点，请向 withResponsiveViews 装饰器传递一个对象。这可以在全局或局部层面通过传递一个断点对象来完成。你可以添加任意数量的断点，使用任何你想要的键名。键名将用于视图标题。例如

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

响应式视图

你的响应式视图将出现在你的故事组件下方，这样你就可以看到它在不同尺寸下的样子。要在 Storybook 工具栏中切换视图的开/关，请使用“响应式视图”切换按钮

访问 document 和 window

每个响应式视图都渲染在一个 iFrame 中。要访问每个 iFrame 的 document 和 window 属性，你需要在你的故事中导入 context，并将 document/window 作为 prop 传递。例如

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

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