mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）
63 lines • 2.63 kB
JavaScript
import Nerv from "nervjs";
import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames } from "../../lib/index";
import { BG_COLOR_LIST } from "../../lib/model";
export default class ClTitleBar extends Taro.Component {
render() {
const textColorClassName = this.props.textColor ? `text-${this.props.textColor}` : ``;
const borderColorClassName = this.props.borderColor ? BG_COLOR_LIST[this.props.borderColor] : "bg-green";
const bgColorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : `bg-white`;
const iconClassName = this.props.icon ? `cuIcon-${this.props.icon}` : ``;
const iconColorClassName = this.props.iconColor ? `text-${this.props.iconColor}` : ``;
const borderComponent = <View className="action border-title justify-between">
<View>
<Text className={`${textColorClassName} text-bold text-xl`}>
{this.props.title}
</Text>
<Text className={`${borderColorClassName}`} style={{ width: `${Taro.pxTransform(this.props.borderLong || 20)}` }} />
</View>
<View>{this.props.renderRight}</View>
</View>;
const subComponent = <View className="action sub-title justify-between">
<View>
<Text className={`text-xl text-bold ${textColorClassName}`}>
{this.props.title}
</Text>
{this.props.subTitle ? <Text className={`text-${this.props.subTitleColor}`}>
{this.props.subTitle}
</Text> : <Text className={`${borderColorClassName}`}></Text>}
</View>
<View>{this.props.renderRight}</View>
</View>;
const iconComponent = <View className="action justify-between">
<View>
<Text className={`${iconClassName} ${iconColorClassName}`} />
<Text className={`text-xl text-bold ${textColorClassName}`}>
{this.props.title}
</Text>
</View>
<View>{this.props.renderRight}</View>
</View>;
return <View className={classNames(`${bgColorClassName} cu-bar`, this.props.className)} style={Object.assign({}, this.props.style)}>
{this.props.type === "border-title" ? borderComponent : ""}
{this.props.type === "sub-title" ? subComponent : ""}
{this.props.type === "icon" ? iconComponent : ""}
</View>;
}
}
ClTitleBar.options = {
addGlobalClass: true
};
ClTitleBar.defaultProps = {
bgColor: "white",
textColor: "green",
type: "border-title",
borderLong: 20,
borderColor: "green",
icon: "title",
iconColor: "green",
title: "",
subTitle: "",
subTitleColor: "gray"
};