简介
tabslayout 是一个UI组件库,主要用于导航的tabItem,可配置图片,文字,等基础属性,方便开发及扩展
安装
-
ohpm install @cornflower/tabslayout
-
或者在模块的oh-package.json5中添加
"dependencies": { "@cornflower/tabslayout": "1.0.2" }
支持参数
参数 | 类型 | 描述 |
---|---|---|
name | string | tab名称 |
normalIcon | string Resource | 默认tab图标 |
selectIcon | string Resource | 选中tab图标 |
iconWidth | number | icon宽度 默认30vp |
iconHeight | number | icon高度 默认30vp |
normalColor | ResourceColor | 默认文字颜色 |
selectColor | ResourceColor | 选中文字颜色 |
normalTextSize | number string Resource | 默认文字大小 默认16vp |
selectTextSize | number string Resource | 默认文字大小 默认16vp |
showBadge | @Prop boolean | 是否显示右上角消息 默认不显示 |
badgeTextSize | number string | 右上角消息尺寸 默认6vp |
badgeLargeSize | number string | 右上角带文字消息尺寸 默认18vp |
badgeColor | ResourceColor | 右上角消息颜色 默认红色 |
badgeTextColor | ResourceColor | 右上角消息文字颜色 默认白色 |
badgeTextSize | number string | 右上角消息文字大小 默认10vp |
message | string | 右上角消息提示信息 |
tabHeight | Length | tab高度默认56vp |
currentIndex | number | 默认index |
selectIndex | @Prop number | 选中的index |
使用
导入引用
import { TabComponent } from '@cornflower/tabslayout'
builder方式图标+文字
@Builder AddBuilder() {
TabComponent({
name: "首页",
currentIndex: 0,
selectIndex: this.currentIndex,
normalIcon: $r("app.media.icon"),
selectIcon: $r("app.media.icon"),
showBadge: false,
message:''
}).width("100%").height(56)
}
builder纯文字
@Builder AddBuilder() {
TabComponent({
name: "首页",
currentIndex: 0,
selectIndex: this.currentIndex,
showBadge: false,
message:''
}).width("100%").height(56)
}
例子
仿写抖音底部导航
@Preview
@Component
export struct DyTabContainer {
@State selectIndex: number = 0
@State showBadge: boolean = false
private controller: TabsController = new TabsController()
@Builder AddBuilder() {
TabComponent({
name: "",
currentIndex: 2,
selectIndex: this.selectIndex,
normalIcon: $r("app.media.icon"),
selectIcon: $r("app.media.icon"),
normalColor: "#696969",
selectColor: '#505050',
showBadge: false,
message:''
}).width("100%").height(56)
}
aboutToAppear() {
this.showBadge = true
}
@Builder TabBuilder(item: ItemTab) {
TabComponent({
name: item.name,
currentIndex: item.index,
selectIndex: this.selectIndex,
showBadge: item.index === 3 ? this.showBadge : false,
normalColor: "#696969",
selectColor: '#505050',
message:''
}).width("100%").height(56)
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
ForEach(DEFAULT_TABS, (item: ItemTab, index: number) => {
if (index == 2) {
TabContent() {
Column() {
Text(item.name).fontSize(32)
}.width('100%')
}.tabBar(this.AddBuilder())
} else {
TabContent() {
Column() {
Text(item.name).fontSize(32)
}.width('100%')
}.tabBar(this.TabBuilder(item))
}
})
}
.vertical(false)
.onChange((index: number) => {
this.selectIndex = index
if (index == 3) {
this.showBadge = false
}
})
.width('100%')
}.width('100%').height('100%').backgroundColor('#000000')
}
}
仿写微信底部导航
@Preview
@Component
export struct WxTabContainer {
@State selectIndex: number = 0
@State showFindBadge: boolean = false
@State badgeMessage: string = ''
private controller: TabsController = new TabsController()
aboutToAppear() {
this.showFindBadge = true
this.badgeMessage = '11'
}
@Builder TabBuilder(item: ItemTab) {
TabComponent({
name: item.name,
currentIndex: item.index,
selectIndex: this.selectIndex,
showBadge: item.index === 2 ? this.showFindBadge : false,
normalColor: "#000000",
selectColor: '#0CC160',
iconWidth:26,
iconHeight:26,
normalIcon: item.icon,
selectIcon: item.selectIcon,
message: item.index === 2 ? this.badgeMessage : ''
}).width("100%")
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
ForEach(DEFAULT_WX_TABS, (item: ItemTab, index: number) => {
TabContent() {
Column() {
Text(item.name).fontSize(32)
}.width('100%')
}.tabBar(this.TabBuilder(item))
})
}
.vertical(false).barHeight(60)
.onChange((index: number) => {
this.selectIndex = index
if (index === 2) {
this.showFindBadge = false
}
})
.width('100%')
}.width('100%').height('100%').backgroundColor('#ffffff')
}
}
最后
小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
为了确保高效学习,建议规划清晰的学习路线
GitCode - 全球开发者的开源社区,开源代码托管平台希望这一份鸿蒙学习文档能够给大家带来帮助~
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 (鸿蒙语法ArkTS、TypeScript、ArkUI教程……)
纯血版鸿蒙全套学习文档(面试、文档、全套视频等)
鸿蒙APP开发必备
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。