• TabBar标签栏
    • 规则
  • 代码演示
  • API
    • TabBar
    • TabBarItem

    TabBar标签栏

    位于 APP 底部,方便用户在不同功能模块之间进行快速切换。

    规则

    • 用作 APP 的一级分类,数量控制在 3-5 个之间。
    • 即使某个 Tab 不可用,也不要禁用或者移除该 Tab。
    • 使用 Badge 进行提示,足不出户也能知道有内容更新。

    代码演示

    APP 型选项卡

    多用于页面的内容区块,起着控制小范围内的大块内容的分组和隐藏,起着保持界面整洁的作用。其中Tabbar可以显示在顶部或者底部。

    1. import { Component } from '@angular/core';
    2. @Component({
    3. selector: 'demo-tab-bar-basic',
    4. template: `
    5. <TabBar [barTintColor]="'white'"
    6. [tintColor]="tintColor"
    7. [unselectedTintColor]="unselectedTintColor"
    8. [ngStyle]="tabbarStyle"
    9. [activeTab]="selectedIndex"
    10. [hidden]="hidden"
    11. [tabBarPosition]="topFlag ? 'top' : 'bottom'"
    12. (onPress)="tabBarTabOnPress($event)"
    13. >
    14. <TabBarItem [title]="'Life'"
    15. [key]="1"
    16. [badge]="1"
    17. [icon]="icon1"
    18. [selectedIcon]="icon11">
    19. <ng-template #icon1>
    20. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg') center center / 21px 21px no-repeat;">
    21. </div>
    22. </ng-template>
    23. <ng-template #icon11>
    24. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg') center center / 21px 21px no-repeat;">
    25. </div>
    26. </ng-template>
    27. <div style="background-color: white; height: 100%; text-align: center">
    28. <div style="padding-top: 60px">Clicked Life tab, show Life information</div>
    29. <ng-container>
    30. <ng-template [ngTemplateOutlet]="content"></ng-template>
    31. </ng-container>
    32. </div>
    33. </TabBarItem>
    34. <TabBarItem [title]="'Koubei'"
    35. [key]="2"
    36. [badge]="'new'"
    37. [icon]="icon2"
    38. [selectedIcon]="icon22"
    39. >
    40. <ng-template #icon2>
    41. <div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg') center center / 21px 21px no-repeat;">
    42. </div>
    43. </ng-template>
    44. <ng-template #icon22>
    45. <div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg') center center / 21px 21px no-repeat;">
    46. </div>
    47. </ng-template>
    48. <div style="background-color: white; height: 100%; text-align: center">
    49. <div style="padding-top: 60px">Clicked Koubei tab, show Koubei information</div>
    50. <ng-container>
    51. <ng-template [ngTemplateOutlet]="content"></ng-template>
    52. </ng-container>
    53. </div>
    54. </TabBarItem>
    55. <TabBarItem [title]="'Friend'"
    56. [key]="3"
    57. [dot]="true"
    58. [icon]="icon3"
    59. [selectedIcon]="icon33">
    60. <ng-template #icon3>
    61. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg') center center / 21px 21px no-repeat;">
    62. </div>
    63. </ng-template>
    64. <ng-template #icon33>
    65. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg') center center / 21px 21px no-repeat;">
    66. </div>
    67. </ng-template>
    68. <div style="background-color: white; height: 100%; text-align: center">
    69. <div style="padding-top: 60px">Clicked Friend tab, show Friend information</div>
    70. <ng-container>
    71. <ng-template [ngTemplateOutlet]="content"></ng-template>
    72. </ng-container>
    73. </div>
    74. </TabBarItem>
    75. <TabBarItem [title]="'My'"
    76. [key]="4"
    77. [icon]="icon4"
    78. [selectedIcon]="icon44">
    79. <ng-template #icon4>
    80. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg') center center / 21px 21px no-repeat;">
    81. </div>
    82. </ng-template>
    83. <ng-template #icon44>
    84. <div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg') center center / 21px 21px no-repeat;">
    85. </div>
    86. </ng-template>
    87. <div style="background-color: white; height: 100%; text-align: center">
    88. <div style="padding-top: 60px">Clicked My tab, show My information</div>
    89. <ng-container>
    90. <ng-template [ngTemplateOutlet]="content"></ng-template>
    91. </ng-container>
    92. </div>
    93. </TabBarItem>
    94. </TabBar>
    95. <ng-template #content>
    96. <a style="display: block; margin-top: 40px; margin-bottom: 20px; color: #108ee9"
    97. (click)="showNextTabBar($event)">
    98. Click to next tab-bar
    99. </a>
    100. <a style="display: block; margin-top: 20px; margin-bottom: 20px; color: #108ee9"
    101. (click)="showTabBar($event)">
    102. Click to show/hide tab-bar
    103. </a>
    104. <a style="display: block; margin-top: 20px; margin-bottom: 20px; color: #108ee9"
    105. (click)="changePosition($event)">
    106. Click to change tab-bar position top/bottom
    107. </a>
    108. <a style="display: block; margin-bottom: 60px; color: #108ee9"
    109. (click)="showFullScreen($event)">
    110. Click to switch fullscreen
    111. </a>
    112. </ng-template>
    113. `
    114. })
    115. export class DemoTabBarBasicComponent {
    116. hidden: boolean = false;
    117. fullScreen: boolean = false;
    118. topFlag: boolean = false;
    119. tintColor: string = '#108ee9';
    120. unselectedTintColor: string = '#888';
    121. tabbarStyle: object = { height: '400px' };
    122. selectedIndex: number = 1;
    123. showTabBar(event) {
    124. event.preventDefault();
    125. this.hidden = !this.hidden;
    126. }
    127. showNextTabBar(event) {
    128. event.preventDefault();
    129. const PANE_COUNT = 4;
    130. if (this.selectedIndex == PANE_COUNT - 1) {
    131. this.selectedIndex = 0;
    132. } else {
    133. this.selectedIndex++;
    134. }
    135. console.log('selectedIndex: ', this.selectedIndex);
    136. }
    137. showFullScreen(event) {
    138. event.preventDefault();
    139. this.fullScreen = !this.fullScreen;
    140. this.tabbarStyle = this.fullScreen
    141. ? {
    142. position: 'fixed',
    143. height: '100%',
    144. width: '100%',
    145. top: 0
    146. }
    147. : { height: '400px' };
    148. }
    149. changePosition(event) {
    150. event.preventDefault();
    151. this.topFlag = !this.topFlag;
    152. }
    153. tabBarTabOnPress(pressParam: any) {
    154. console.log('onPress Params: ', pressParam);
    155. this.selectedIndex = pressParam.index;
    156. }
    157. }

    TabBar 标签栏 - 图1

    API

    TabBar

    属性说明类型默认值
    activeTab当前激活Tab索引number0
    barTintColortabbar 背景色Stringwhite
    tintColor选中的字体颜色String#108ee9
    unselectedTintColor未选中的字体颜色String'#888'
    hidden是否隐藏Booleanfalse
    tabBarPositiontabbar 位置'top'|'bottom''bottom'
    prerenderingSiblingsNumber预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tabnumber-1
    onPressbar 点击触发(index: number, title: string, key: string) => voidfalse

    TabBarItem

    属性说明类型默认值
    badge徽标数Number \ String
    dot是否在右上角显示小红点(在设置badge的情况下失效)Booleanfalse
    icon默认展示图片见 demo
    selectedIcon选中后的展示图片见 demo
    title标题文字String
    key唯一标识String