storybook-addon-grommet
一个在工具栏中添加 Grommet 主题选择器的 Storybook 插件
实时演示
安装
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 />
属性