Storybook 斷點擴充套件

一個 Storybook 擴充套件，用於查看 Storybook iFrame 的實際寬度。如果您為您的斷點提供映射，我們甚至會顯示目前活動的斷點名稱 🤗

安裝

npm install --save-dev storybook-addon-breakpoints

在 .storybook/main.js 中

module.exports = {
  addons: ['storybook-addon-breakpoints'],
};

設定

預設設定

在沒有任何設定的情況下，此擴充套件會顯示一個覆蓋層，其中包含 Storybook 元件檢視的目前寬度。

斷點

您可以傳遞一個物件，其中包含有關斷點的資訊。我們使用此資訊在覆蓋層中顯示對應的斷點名稱。

要執行此操作，您必須將斷點新增至故事中的 breakpoints 參數，如下所示

export default {
  title: 'title-of-my-story',
  parameters: {
    breakpoints: {
      breakpointNames: {
        'small': '0',
        'medium': '500',
        'large': '1000'
      }
    }
  }
};

要為所有故事設定擴充套件，請在 .storybook/preview.js 中設定 breakpoints 參數

export const parameters = {
  breakpoints: {
    breakpointNames: {
      'small': '0',
      'medium': '500',
      'large': '1000'
    }
  }
};

物件 breakpointNames 的鍵是我們在覆蓋層中顯示的名稱。對應的值表示每個斷點的下限起點。在上面的範例中，這表示以下內容

• 小型斷點：從 0 到 499 像素
• 中型斷點：從 500 到 999 像素
• 大型斷點：從 1000 像素開始

防抖動

在每次像素調整大小時進行計算以顯示斷點可能會耗費資源。為了提高效能，我們支援在視窗調整大小時進行防抖動。請使用 debounceTimeout 鍵，如下所示

export const parameters = {
  breakpoints: {
    breakpointNames: {...},
    debounceTimeout: 200
  }
};

在上面的範例中，我們在調整大小時最多每 200 毫秒計算一次斷點。