mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）
39 lines • 1.89 kB
JavaScript
import Nerv from "nervjs";
import { Block, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames } from "../../lib/index";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../../lib/model";
export default class ClNavBar extends Taro.Component {
onClickLeftIcon(index) {
this.props.onClickLeftIcon && this.props.onClickLeftIcon(index);
}
onClickRightIcon(index) {
this.props.onClickRightIcon && this.props.onClickRightIcon(index);
}
render() {
const bgColorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : "bg-white";
const leftComponent = this.props.leftIcon && this.props.leftIcon.map((item, index) => <Nerv.Fragment key={index}>
<Text className={`${item.icon ? "cuIcon-" + item.icon : ""} ${item.color ? TEXT_COLOR_LIST[item.color] : ""}`} onClick={this.onClickLeftIcon.bind(this, index)} />
<Text className={`${item.color ? TEXT_COLOR_LIST[item.color] : ""}`} onClick={this.onClickLeftIcon.bind(this, index)}>
{item.text}
</Text>
</Nerv.Fragment>);
const rightComponent = this.props.rightIcon && this.props.rightIcon.map((item, index) => <Nerv.Fragment key={index}>
<Text className={`${item.icon ? "cuIcon-" + item.icon : ""} ${item.color ? TEXT_COLOR_LIST[item.color] : ""}`} onClick={this.onClickRightIcon.bind(this, index)} />
</Nerv.Fragment>);
return <View className={classNames(`cu-bar ${bgColorClassName}`, this.props.className)} style={Object.assign({}, this.props.style)}>
<View className="action">{leftComponent}</View>
<View className="content text-bold">{this.props.title}</View>
<View className="action">{rightComponent}</View>
</View>;
}
}
ClNavBar.options = {
addGlobalClass: true
};
ClNavBar.defaultProps = {
title: "",
leftIcon: [],
rightIcon: [],
bgColor: "white"
};