Storybook 擴充套件響應式欄位

一個響應式的、基於網格的欄位覆蓋層。使用全域或本地參數定義你的網格，並使用 Columns 控制面板調整你的網格屬性。

檢視互動式演示。

安裝

yarn add -D storybook-addon-responsive-columns

在 .storybook/main.js 中：

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

用法

storybook-addon-responsive-columns 帶有一些預設值，可讓你快速開始使用。

屬性	預設值	類型
active	false	布林值
gridColor	tomato	字串
opacity	30	number
breakpoints	參見此處	object[]

如果你想使用自訂的參數，你可以在 ./storybook/preview.js 中使用 columns 鍵進行全域設定

export const parameters = {
  columns: {
    active: true,
    gridColor: "salmon",
    opacity: 30,
    breakpoints: [
      {
        breakpoint: 0,
        columns: 4,
        gap: 8,
      },
      {
        breakpoint: 768,
        columns: 8,
        gap: 16,
      },
      {
        breakpoint: 1024,
        columns: 12,
        gap: 16,
        maxWidth: 1224,
        gutter: 24,
      },
    ],
  },
};

或透過將 columns 新增至你的 story 的 metadata 中的 parameters 鍵進行本地設定

export default {
  parameters: {
    columns: {
      ...
    },
  },
};