tab bar - Maixbxp/salt-ui GitHub Wiki

tab-bar

底部选项卡菜单

Simple Usage

class Demo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 0
        }
    }

    render() {
        let onChange = (activeIndex)=> {
            console.log(activeIndex);
        };
        return <div>
            <TabBar activeIndex={this.state.activeIndex} onChange={onChange.bind(this)}>
                <TabBar.Item title="收藏" icon="star">这里是 "收藏"</TabBar.Item>
                <TabBar.Item title="地图" icon="map">这里是 "地图"</TabBar.Item>
                <TabBar.Item title="搜索" icon="search">这里是 "搜索"</TabBar.Item>
                <TabBar.Item title="我的" icon="user">这里是 "我的"</TabBar.Item>
                <TabBar.Item title="设置" icon="setting">这里是 "设置"</TabBar.Item>
            </TabBar>
        </div>
    }
}

Props

className

描述:自定义样式的class名称。

类型:String

默认:''

必选:否

activeIndex

描述:当前激活的选项卡序号(从0开始)。

类型:Number

默认:0

必选:否

title

描述:TabBar.Item属性 - 单个选项卡的标题。

类型:String

默认:''

必选:是

icon

描述:TabBar.Item属性 - 单个选项卡的图标名称。

类型:String

默认:''

必选:否

APIs

⚠️ **GitHub.com Fallback** ⚠️