@virzen/storybook-addon-responsive-views

这是一个分支

这是 vizeat/storybook-addon-responsive-views 的一个分支。创建它是出于两个原因

1. 它在最新版本的 Storybook 中无法工作，
2. 它硬编码了一些任意值。

我发布它是为了自己使用，但一旦原维护者重新活跃起来，我很乐意将其撤下。

原描述

在各种响应式视口中查看您的 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 工具栏中切换视图的显示/隐藏，请使用“响应式视图”开关

访问 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>
        )
      }
    )
  )