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 屬性，您需要將內容匯入您的故事，並將 document/window 作為 prop 傳遞。例如

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

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