参加直播:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA

Material-UI

Storybook Material UI 库插件

在 Github 上查看

Codacy Badge npm version Live demo

Storybook Addon Material-UI

提供有助于创建 Material-UI 组件的开发环境。它是 React Storybook 的一个插件,将您的组件包裹在 MuiThemeProvider 中。这加速并简化了基于 Material-UI 应用程序的开发过程。

您可以使用此项目的演示页面来发现任何组件的 Material-UI 主题设置,并在线创建您自己的 新主题。但要充分利用此项目,请在您的工作环境中本地运行它。

screen1

功能

Live demo

  • 包裹在主题提供器中。只需使用基本浅色主题开始开发。
  • 注入 TapEvent 插件。在移动设备上测试。
  • 切换主题。一键查看外观。
  • 创建您的自定义主题。通过代码或可视化编辑器。
  • 动态可视化主题编辑。发现所有可用的主题属性。
  • Google Material Color 调色板选择器
  • 保存所做的更改并下载为 JSON 文件
  • 部分属于 React Theming。创建可主题化的 React 组件。
  • 适用于 Storybook 3.0

快速入门

为了快速开始使用最新的 storybook-addon-material-ui,您可以查看 create-material-ui-app

它包含以下工作设置:

  • create-react-app
  • Storybook
  • Material-UI
  • storybook-addon-material-ui

入门

首先,安装插件

npm i storybook-addon-material-ui --save-dev

Storybook 6.1

storybook-addon-material-ui 添加到 storybook 插件中

//.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(js|mdx)'],
  addons: [
    'storybook-addon-material-ui'
  ],
};

将装饰器添加到 storybook 预览中

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

export const decorators = [
	muiTheme()
];

注意:您可以在已加载的主题之间切换。开箱即用,您有两个基础主题,但您可以像这样简单地添加您的自定义主题:

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

// Create your own theme like this.
// Note: you can specify theme name in `themeName` field. Otherwise it will be displayed by the number.
// you can specify only required fields overriding the `Light Base Theme`
const newTheme = {
    themeName: 'Grey Theme',
    palette: {
        primary1Color: '#00bcd4',
        alternateTextColor: '#4a4a4a',
        canvasColor: '#616161',
        textColor: '#bdbdbd',
        secondaryTextColor: 'rgba(255, 255, 255, 0.54)',
        disabledColor: '#757575',
        accent1Color: '#607d8b',
    },
};


export const decorators = [
	muiTheme([newTheme])
];

或者甚至从其他地方导入

//.storybook/preview.js

import { muiTheme } from 'storybook-addon-material-ui'

import theme1 from './src/theme/theme1'
import theme2 from './src/theme/theme2'

export const decorators = [
	muiTheme([theme1, theme2])
];

Storybook 5(及更早版本)

现在,使用 Material-UI Addon 编写您的 stories。默认情况下,您的 stories 将提供 Light Base ThemeDark Base Theme

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import {muiTheme} from 'storybook-addon-material-ui';

// Import some examples from react-theming https://github.com/react-theming/react-theme-provider/blob/master/example/
import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

storiesOf('Material-UI', module)
// Add the `muiTheme` decorator to provide material-ui support to your stories.
// If you do not specify any arguments it starts with two default themes
// You can also configure `muiTheme` as a global decorator.
    .addDecorator(muiTheme())
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));

注意:您可以在已加载的主题之间切换。开箱即用,您有两个基础主题,但您可以像这样简单地添加您的自定义主题:

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';

import {muiTheme} from 'storybook-addon-material-ui';

import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

// Create your own theme like this.
// Note: you can specify theme name in `themeName` field. Otherwise it will be displayed by the number.
// you can specify only required fields overriding the `Light Base Theme`
const newTheme = {
    themeName: 'Grey Theme',
    palette: {
        primary1Color: '#00bcd4',
        alternateTextColor: '#4a4a4a',
        canvasColor: '#616161',
        textColor: '#bdbdbd',
        secondaryTextColor: 'rgba(255, 255, 255, 0.54)',
        disabledColor: '#757575',
        accent1Color: '#607d8b',
    },
};



storiesOf('Material-UI', module)
    .addDecorator(muiTheme([newTheme]))
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));


反馈

您可以通过匿名调查留下您对该项目的意见。

查询字符串参数

当您选择主题和其他选项时,它会存储在地址栏中。因此,当您刷新页面时,此状态会保留,并且您可以使用直接链接到所需状态。

http://localhost:9001/?theme-ind=0&theme-sidebar=true&theme-full=true

贡献

@airbnb

开发者

我们的团队欢迎所有贡献、测试、错误修复。如果您愿意帮助贡献该项目,请随时创建 issue、PR 或与我联系。

设计师

我们非常欢迎设计师参与此项目。我们非常感兴趣听取您对使用此工具、设计师和开发者协同工作的可能性以及其外观和功能的意见。

致谢