@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 工具栏中的“响应式视图”切换按钮

访问文档和窗口

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

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

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