@virzen/storybook-addon-responsive-views

這是一個分支

這是 vizeat/storybook-addon-responsive-views 的分支。創建它是基於兩個原因

1. 它在最新的 storybook 中無法運作，
2. 它有一些硬編碼的任意值。

我發佈它是為了我自己的使用，但只要原始維護者重新活躍，我就很樂意把它撤下。

原始描述

在各種響應式視窗中檢視您的 Storybook 故事

在開發響應式應用程式時，通常是斷點的邊緣造成最多的問題。這個 Storybook 擴充功能讓您可以在各種斷點預覽您的元件/故事，這樣您就可以確保您的網頁應用程式在任何螢幕尺寸下看起來都很棒 ✨

相容性：目前這個擴充功能僅適用於 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>
        )
      }
    )
  )