欄位導引

npm install storybook-addon-grid 讓您的 Story 保持節奏

一個用於批次處理和快取操作的小工具

這是免費軟體，但如果您喜歡它，請考慮支持我 ❤️

⚙️ 安裝

npm install storybook-addon-grid

// .storybook/main.js
const config = {
  addons: ['storybook-addon-grid'],
};

加入這個額外的預設設定，為您的 Chromatic 螢幕截圖配置欄位導引。

// .storybook/main.js
const config = {
  addons: ['storybook-addon-grid', 'storybook-addon-grid/chromatic'],
};

🚀 使用方式

欄位導引透過 參數 控制，因此您可以全域或個別 Story 定義。

欄位導引可以透過點擊工具列按鈕或透過鍵盤快捷鍵 Ctrl + G 開啟。

注意： 由於 z-index 的特性，Story 的根 div 將會套用 position: relative 和 z-index: 0，讓欄位導引可以置於頂層。

參數

欄位設計系統由 3 個值定義

• columns 的數量
• 它們之間的 gap
• gutter — 系統和螢幕之間的最小邊距
• maximal-width 也用於限制系統所有欄位的最大寬度。

columns?: number = 12

欄位導引的數量。

gap?: string = '20px'

columns 之間的間距。

gutter?: string = '50px'

系統的邊界 (margin)，用於左側和右側。

定義以覆寫右側定義的邊界。

maxWidth?: string = '1024px'

我們的欄位應該成長的最大寬度。

color?: string = 'rgba(255, 0, 0, 0.1)'

設定用於欄位導引的顏色。

全域參數~

// .storybook/preview.js
export const parameters = {
  grid: {
    gridOn: true,
    columns: 12,
    gap: '20px',
    gutter: '50px',
    maxWidth: '1024px',
  },
};

每個 Story~

// MyComponent.stories.js
export const Example = () => {...};
Example.parameters = {
	grid: {
		columns: 6,
	},
};

響應式屬性

storybook-addon-grid 解決響應式屬性的方式是讓您自行決定。我們不希望您為此擴充功能建立抽象和實作，我們希望重複使用您可能已經在使用的現有模式。

事實上，所有屬性都會對應到 CSS，因此您公開的任何 CSS 變數都是可用的。

例如

// file: my-styles.css
@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
  }
}

Story.parameters = {
  grid: {
    // a custom variable names for the number of columns
    columns: 'var(--columns)',
    // or the gutter
    gutter: 'var(--gutter)',
    // or the gap
    gap: 'var(--gap)',
  },
};

您可以在我們的 範例 Story ResponsiveGrid 中看到實際效果。

📚 進一步閱讀

• https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids

❤ 感謝

特別感謝 Marina 的初始實作和設計。

許可證

MIT © Marais Rossouw