storybook-addon-grommet

一個 storybook 擴充功能，可在工具列中新增 grommet 主題選擇器

線上展示

grommet-controls

安裝

npm i -D storybook-addon-grommet

設定

在您的 storybook 設定中的 addons.js 檔案中，註冊 storybook-addon-grommet

import 'storybook-addon-grommet/register'

使用方法

在您的 config.js 中，定義您的主題設定並將其傳遞給 addDecorator 函式

import { addDecorator } from '@storybook/react'; // <- or your storybook framework
import { withGrommet } from 'storybook-addon-grommet';
import { grommet, dark } from 'grommet';
import { black, light, materialdark, materiallight, metro } from 'grommet-controls';

addDecorator(withGrommet({
    theme: 'grommet',
    themes: {
      grommet,
      dark,
      black,
      light,
      materialdark,
      materiallight,
      metro,
    },
    boxProps: {
      align: 'start',
    },
    grommetProps: {
        full: true,
    }
  }
));

預覽

storybook-addon-grommet 使用 <Grommet /> 和 <Box/> 元件包裝預覽故事，這些元件的屬性是可設定的

<Grommet theme={themes[state]} {...grommetProps}>
  <Box {...boxProps}>
    {children}
  </Box>  
</Grommet>

選項

theme: 最初選擇的主題 themes: 物件，其鍵為主體名稱，值為主體物件 boxProps: <Box /> 屬性 grommetProps: <Grommet /> 屬性