# 介绍

顶部选项卡,与 Tabbar 类似。

# 引入

"usingComponents": {
	"m-navbar-group": "mind-ui-weapp/navbar-group/index",
	"m-navbar": "mind-ui-weapp/navbar/index"
}

# 示例

# 基础用法

<m-navbar-group bind:click="onClick" bind:change="onChange">
	<m-navbar title="标签1" name="tab1" />
	<m-navbar title="标签2" name="tab2" />
	<m-navbar title="标签3" name="tab3" />
</m-navbar-group>

# 两边自定义内容

<view>
	<view>自定义内容</view>
	<m-navbar-group custom-class="custom-group" bind:click="onClick" bind:change="onChange">
		<m-navbar title="标签1" name="tab1" />
		<m-navbar title="标签2" name="tab2" />
		<m-navbar title="标签3" name="tab3" />
	</m-navbar-group>
	<view>自定义内容</view>
</view>

# 设置默认选中项

<m-navbar-group name="tab4" bind:click="onClick" bind:change="onChange">
	<m-navbar title="标签1" name="tab1" />
	<m-navbar title="标签2" name="tab2" />
	<m-navbar title="标签3" name="tab3" />
	<m-navbar title="标签4" name="tab4" />
	<m-navbar title="标签5" name="tab5" />
	<m-navbar title="标签6" name="tab6" />
	<m-navbar title="标签7" name="tab7" />
</m-navbar-group>

# 徽章统计

<m-navbar-group bind:click="onClick" bind:change="onChange">
	<m-navbar title="标签1" name="tab1" />
	<m-navbar title="标签2" name="tab2" count="8" />
	<m-navbar title="标签3" name="tab3" />
	<m-navbar title="标签4" name="tab4" count="100" />
</m-navbar-group>
Page({
	// 点击标签时触发
	onClick({ detail }) {
		console.log(detail)
	},

	// 标签激活后触发
	onChange({ detail }) {
		console.log(detail)
	}
})
参数 说明 类型 可选值 默认值
acive-name 默认选中的标签 String
acive-color 选中标签的文字颜色 String
line-width 选中底线长度(单位 rpx) Number 与当前标签等宽
line-height 底线高度(单位 rpx),0 时不展示 Number 与当前标签等宽
line-color 选中底线颜色 String
disabled 禁止点击 Boolean fasle
参数 说明 类型 可选值 默认值
name 标签名称,必填,选中时事件中返回 String
title 标签名称 String
count 徽章统计值 Number

# Events

名称 说明 返回值
bind:click 点击标签时触发 标签对应的 name
bind:change 标签激活后触发 标签对应的 name