mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）
35 lines • 1.49 kB
JavaScript
import Nerv from "nervjs";
import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames } from "../../lib/index";
import { TEXT_COLOR_LIST } from "../../lib/model";
export default class ClStep extends Taro.Component {
constructor() {
super(...arguments);
this.state = {};
}
render() {
const stepTypeClassName = this.props.type === "arrow" ? "steps-arrow" : "";
const activeColorClassName = this.props.activeColor ? TEXT_COLOR_LIST[this.props.activeColor] : "";
const step = this.props.step || 0;
const tabsComponents = this.props.steps.map((item, index) => <View className={`cu-item ${step > index ? activeColorClassName : ""}`} key={index}>
{this.props.stepTitlePosition === "top" ? item.title : ""}
{<Text className={`${this.props.stepIconType === "number" ? "num" : ""} ${this.props.stepIconType === "custom" ? "cuIcon-" + item.icon : ""}`} data-index={index + 1} />}
{this.props.stepTitlePosition === "bottom" ? item.title : ""}
</View>);
return <View className={classNames(`cu-steps ${stepTypeClassName} ${this.props.stepTitlePosition === "top" ? "steps-bottom" : ""}`, this.props.className)} style={Object.assign({}, this.props.style)}>
{tabsComponents}
</View>;
}
}
ClStep.options = {
addGlobalClass: true
};
ClStep.defaultProps = {
steps: [],
type: "line",
activeColor: "blue",
step: 0,
stepIconType: "number",
stepTitlePosition: "bottom"
};