maxzhao

不要害怕Exception和Error

0%

Angular11+Antd笔记-TabBar

Edited on 2022-07-04 In 前端 , Angular , AntD

前言

笔记：创建一个 tab 切换的主页面。

`antd` 构建 `home` 页面

1	ng g ng-zorro-antd-mobile:tab-bar-basic -p app --path="src/app/pages" --styleext='less' --name=home

其中 html 中的标签属性，可以参考后面的文档记录。

文档记录

建议查询官方文档,下面只是简单的记录
Angular

`TabBar` 属性

参数	说明	类型	默认值
`[activeTab]`	当前激活Tab索引	`number`	`0`
`[barTintColor]`	tabbar 背景色	`string`	`'white'`
`[tintColor]`	选中的字体颜色	`string`	`'#108ee9'`
`[unselectedTintColor]`	未选中的字体颜色	`string`	`'#888'`
`[hidden]`	是否隐藏	`boolean`	`false`
`[tabBarPosition]`	tabbar 位置	`’top’	‘bottom’`
`[prerenderingSiblingsNumber]`	预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tab	`number`	`-1`
`(onPress)`	bar 点击触发	`EventEmitter<{index: number, title: string, key: string}>`	-

`TabBarItem` 属性

参数	说明	类型	默认值
`[badge]`	徽标数	`number	string`
`[dot]`	是否在右上角显示小红点（在设置badge的情况下失效）	`boolean`	`false`
`[icon]`	默认展示的内容	`TemplateRef`	-
`[selectedIcon]`	选中后展示的内容	`TemplateRef`	-
`[title]`	标题文字	`string`	-
`[key]`	唯一标识	`string`	-

本文地址： https://github.com/maxzhao-it/blog/post/58472/