storybook-addon-grid-overlay

Storybook 擴充功能，透過提供網格覆蓋來增強您的 Storybook 故事的視覺佈局。它允許您輕鬆地在網格系統中對齊和定位您的元件，使創建乾淨、一致的設計變得更加容易。

使用此套件，您可以定義自訂網格設定，例如網格最大尺寸、欄數、間隙和裝訂線間距，並在 Storybook 中預覽元件時輕鬆切換網格覆蓋的開關。

安裝

使用 npm

npm install --save-dev storybook-addon-grid-overlay

使用 yarn

yarn add storybook-addon-grid-overlay --dev

將以下內容新增至您的 .storybook/main.js exports

module.exports = {
  addons: ['storybook-addon-grid-overlay']
};

自訂

可以使用 參數 自訂網格，您可以全域或每個故事進行設定。

參數

名稱	描述	類型	預設值	必填
columns	欄數	number | string	12	否
gap	欄之間的間隙	string	'20px'	否
gutter	水平裝訂線 (間距)	string	'0px'	否
maxWidth	覆蓋層的最大寬度	string	'none'	否
color	欄的顏色	string	'rgba(255, 71, 132, 0.15)'	否

全域設定

export const parameters = {
  gridOverlay: {
    columns: 12,
    gap: '20px',
    gutter: '20px',
    maxWidth: '1024px'
  }
};

故事設定

export const MyComponent = () => {...};

MyComponent.parameters = {
	gridOverlay: {
        gutter: '20px'
    }
};

使用 css 變數

storybook-addon-grid-overlay 旨在接受 CSS 變數作為參數，讓您可以使網格響應您的設計。

@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
    --maxWidth: 1024px;
  }
}

export const parameters = {
  gridOverlay: {
    columns: 'var(--columns)',
    gap: 'var(--gap)',
    gutter: 'var(--gutter)',
    maxWidth: 'var(--maxWidth)'
  }
};