# chanjet-ui

## 安装
通过 [cnpm](http://172.18.22.198:7002/) 方式获取.

 ```
    $ cnpm install chanjet-ui
 ```

#### react-tap-event-plugin
 我们的UI组件使用 [react-tap-event-plugin](https://github.com/zilverline/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

[组件可自定义外观清单](./all-widgets-theme.md)