chanjet-ui v1.2.3

chanjet-ui

安装

通过 cnpm 方式获取.

   $ cnpm install chanjet-ui

react-tap-event-plugin

我们的UI组件使用 react-tap-event-plugin来响应 touch 事件. 这个依赖只是临时的, react发布v1.0之后我们将会去掉这个依赖. 在此之前请确保在你的app启动之前引入此插件.

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

react-tap-event-plugin为所有的React Component提供onTouchTap()

组件使用:

    import React from 'react'
    import Button from 'chanjet-ui/lib/Button';

    const MyAwesomeReactComponent = () => (
      <Button label="Default" />
    );

    export default MyAwesomeReactComponent;

自定义主题及组件外观

要自定义主题,首先你必须使用getMuiTheme()生成一个可用的uiTheme,然后使用<UIThemeProvider />来包裹你的根组件

import {getMuiTheme,  UIThemeProvider}from 'chanjet-ui/lib/styles';
import testBaseTheme from './style/testBaseTheme'
import widgetsTheme from './style/widgetTheme'

ReactDOM.render(
        <UIThemeProvider muiTheme={getMuiTheme(testBaseTheme,widgetsTheme)}>
            <NavigationController pages={paths} rootPage={'/home'}/>
        </UIThemeProvider>,
        document.getElementById('app')
 );

主题 (theme):

包含

• spaceing 改变组件的间隔
• fontFamily 字体
• palette 调色板 如testBaseTheme.js

import {colors} from 'chanjet-ui/lib/styles';
import ColorManipulator from 'chanjet-ui/lib/components/utils/colorManipulator';

const {
    cyan500, cyan700,
    grey100, grey300, grey400, grey500,
    pinkA200,
    white, darkBlack, fullBlack
} = colors;
export default {
    spacing: {
        iconSize: 24,
        desktopGutter: 24,
        desktopGutterMore: 32,
        desktopGutterLess: 16,
        desktopGutterMini: 8,
        desktopKeylineIncrement: 64,
        desktopDropDownMenuItemHeight: 32,
        desktopDropDownMenuFontSize: 15,
        desktopLeftNavMenuItemHeight: 48,
        desktopSubheaderHeight: 48,
        desktopToolbarHeight: 56,
    },
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: cyan500,
        primary2Color: cyan700,
        primary3Color: grey400,
        accent1Color: pinkA200,
        accent2Color: grey100,
        accent3Color: grey500,
        textColor: darkBlack,
        alternateTextColor: white,
        canvasColor: white,
        borderColor: grey300,
        disabledColor: ColorManipulator.fade(darkBlack, 0.3),
        pickerHeaderColor: cyan500,
        clockCircleColor: ColorManipulator.fade(darkBlack, 0.07),
        shadowColor: fullBlack,
    }
};

widgetTheme

单独定义app中某一类组件的外观,如button widgetTheme.js

export default {
    button: {
        height: '36px',
        minWidth: '88px',
    }

}

最后通过getMuiTheme(testBaseTheme,widgetsTheme) 生成新的theme

组件可自定义外观清单