导航有已知边界

NnTabs 标签页

线型或卡片式内容切换。

示例

API

Props

名称	类型	默认值	说明
activeKey	string | number	—	受控活动页键；未传时组件维护内部状态。配合 v-model:active-key。
size	string	'default'	small 使用紧凑样式，其他值使用默认样式。
tabPosition	string	'top'	left 使用纵向标签栏，其他值使用横向标签栏。
type	string	'line'	card 使用卡片样式，其他值使用线型样式。
tabBarStyle	object | string	—	标签栏根节点的内联样式。

Events

事件	参数	说明
update:activeKey	(key: string | number)	选择不同的可用标签时触发；受控键无效时也会建议第一个可用键。
change	(key: string | number)	用户选择不同标签时触发。自动修正无效受控键不会触发。

Slots

名称	作用域参数	说明
default	—	放置带稳定 Vue key 的 NnTabPane。

当前限制

• 只识别默认插槽中直接出现的 NnTabPane，或 Fragment 内的 NnTabPane；其他包装组件会被忽略。
• 页签身份取 NnTabPane 的 Vue VNode key，缺失时按索引生成 nn-tab-{index}。这里的 key 不是普通 Prop。
• 受控 activeKey 不存在时，组件会发送第一个可用键，但在父组件更新前不会自行切换。
• 键盘支持左右方向键；tabPosition="left" 时改用上下方向键，并支持 Home、End。
• 横向标签总宽度超过标签栏时，不再显示横向滚动条；隐藏在可见区左、右两侧的标签会分别进入对应方向的下拉菜单，选择后活动标签自动回到可见区。极窄标签栏会合并为一个隐藏标签页菜单。