tplus-ui-mobile
v1.0.15
Published
chanjet-ui-mobile component
Downloads
3
Maintainers
Readme
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