mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
53 lines • 2.18 kB
JavaScript
import Nerv from "nervjs";
import { Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST } from "../utils/model";
export default class ClTitleBar extends 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">
<Text className={`${textColorClassName} text-bold text-xl`}>
{this.props.title}
</Text>
<Text className={`${borderColorClassName}`} style={{ width: `${this.props.borderLong}rpx` }} />
</View>;
const subComponent = <View className="action sub-title">
<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>;
const iconComponent = <View className="action">
<Text className={`${iconClassName} ${iconColorClassName}`} />
<Text className={`text-xl text-bold ${textColorClassName}`}>
{this.props.title}
</Text>
</View>;
return <View className={`${bgColorClassName} cu-bar`}>
{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'
};