Tabs标签页

用于让用户在不同的视图中进行切换。

规则

  • 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
  • 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

代码演示

基本用法

最简单的用法。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-basic',
  5.   template: `
  6.     <Tabs
  7.       [page]="3"
  8.       [useOnPan]="true"
  9.       [swipeable]="true"
  10.       [activeTab]="index"
  11.       [tabBarActiveTextColor]="'#1890ff'"
  12.       (onChange)="onChange($event)"
  13.       (onTabClick)="onTabClick($event)"
  14.     >
  15.       <TabPane [title]="titleTemplate">
  16.         <ng-template #titleTemplate>
  17.           <Badge [text]="3">
  18.             <div>First Tab</div>
  19.           </Badge>
  20.         </ng-template>
  21.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  22.           Content of first tab
  23.         </div>
  24.       </TabPane>
  25.       <TabPane [title]="titleTemplate1">
  26.         <ng-template #titleTemplate1>
  27.           <Badge [text]="'今日(20)'">
  28.             <div>Second Tab</div>
  29.           </Badge>
  30.         </ng-template>
  31.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  32.           Content of second tab
  33.         </div>
  34.       </TabPane>
  35.       <TabPane [title]="titleTemplate2">
  36.         <ng-template #titleTemplate2>
  37.           <Badge [dot]="true">
  38.             <div>Third Tab</div>
  39.           </Badge>
  40.         </ng-template>
  41.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  42.           Content of third tab
  43.         </div>
  44.       </TabPane>
  45.     </Tabs>
  46.     <WhiteSpace></WhiteSpace>
  47.     <Tabs
  48.       [page]="3"
  49.       [activeTab]="index"
  50.       [tabBarPosition]="'bottom'"
  51.       (onChange)="onChange($event)"
  52.       (onTabClick)="onTabClick($event)"
  53.     >
  54.       <TabPane [title]="'First Tab'">
  55.         <div
  56.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  57.         >
  58.           Content of first tab
  59.         </div>
  60.       </TabPane>
  61.       <TabPane [title]="'Second Tab'">
  62.         <div
  63.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  64.         >
  65.           Content of second tab
  66.         </div>
  67.       </TabPane>
  68.       <TabPane [title]="'Third Tab'">
  69.         <div
  70.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  71.         >
  72.           Content of third tab
  73.         </div>
  74.       </TabPane>
  75.     </Tabs>
  76.   `,
  77.   styles: [
  78.     `
  79.       /deep/ .am-badge {
  80.         text-align: right;
  81.       }
  82.     `
  83.   ]
  84. })
  85. export class DemoTabsBasicComponent {
  86.   flag = true;
  87.   index = 1;
  89.   onChange(item) {
  90.     console.log('onChange', item);
  91.   }
  93.   onTabClick(item) {
  94.     console.log('onTabClick', item);
  95.   }
  97.   selectCard(e) {
  98.     console.log(' ', JSON.stringify(e));
  99.   }
  101.   changeIndex() {
  102.     this.index = 0;
  103.   }
  104. }

无动画

切换Tab标签页不带动画效果

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-noanim',
  5.   template: `
  6.     <Tabs
  7.       [page]="3"
  8.       [animated]="false"
  9.       [useOnPan]="false"
  10.       [activeTab]="index"
  11.       (onChange)="onChange($event)"
  12.       (onTabClick)="onTabClick($event)"
  13.     >
  14.       <TabPane [title]="'First Tab'">
  15.         <div
  16.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  17.         >
  18.           Content of first tab
  19.         </div>
  20.       </TabPane>
  21.       <TabPane [title]="'Second Tab'">
  22.         <div
  23.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  24.         >
  25.           Content of second tab
  26.         </div>
  27.       </TabPane>
  28.       <TabPane [title]="'Third Tab'">
  29.         <div
  30.           style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  31.         >
  32.           Content of third tab
  33.         </div>
  34.       </TabPane>
  35.     </Tabs>
  36.   `,
  37.   styles: [
  38.     `
  39.       /deep/ .am-badge {
  40.         text-align: right;
  41.       }
  42.     `
  43.   ]
  44. })
  45. export class DemoTabsNoanimComponent {
  46.   index = 0;
  48.   onChange(item) {
  49.     console.log('onChange', item);
  50.   }
  52.   onTabClick(item) {
  53.     console.log('onTabClick', item);
  54.   }
  55. }

固定高度

固定外部容器高度

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-fixedheight',
  5.   template: `
  6.     <Tabs
  7.       style="height: 200px;"
  8.       [page]="3"
  9.       [activeTab]="index"
  10.       (onChange)="onChange($event)"
  11.       (onTabClick)="onTabClick($event)"
  12.     >
  13.       <TabPane [title]="'First Tab'">
  14.         <div
  15.           style="display: flex; align-items: center; justify-content: center; height: 250px; background-color: rgb(255, 255, 255);"
  16.         >
  17.           Content of first tab
  18.         </div>
  19.       </TabPane>
  20.       <TabPane [title]="'Second Tab'">
  21.         <div
  22.           style="display: flex; align-items: center; justify-content: center; height: 250px; background-color: rgb(255, 255, 255);"
  23.         >
  24.           Content of second tab
  25.         </div>
  26.       </TabPane>
  27.       <TabPane [title]="'Third Tab'">
  28.         <div
  29.           style="display: flex; align-items: center; justify-content: center; height: 250px; background-color: rgb(255, 255, 255);"
  30.         >
  31.           Content of third tab
  32.         </div>
  33.       </TabPane>
  34.     </Tabs>
  35.   `
  36. })
  37. export class DemoTabsFixedheightComponent {
  38.   index = 0;
  40.   onChange(item) {
  41.     console.log('onChange', item);
  42.   }
  44.   onTabClick(item) {
  45.     console.log('onTabClick', item);
  46.   }
  47. }

动态创建

TabPane被动态创建

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-dynamic',
  5.   template: `
  6.     <Tabs
  7.       [page]="5"
  8.       [useOnPan]="true"
  9.       [swipeable]="true"
  10.       [activeTab]="activeTabIndex"
  11.       [tabBarActiveTextColor]="'#1890ff'"
  12.       (onChange)="onChange($event)"
  13.       (onTabClick)="onTabClick($event)"
  14.     >
  15.       <TabPane *ngFor="let tabListItem of tabList; let i = index" [title]="tabListItem.title">
  16.         <div
  17.           style="display: block; padding: 40px; text-align: center; align-items: center;justify-content: center;height: 150px;background-color: #fff"
  18.         >
  19.           <div>{{ tabListItem.content }}</div>
  20.           <div Button [type]="'primary'" (onClick)="onClick()">Add Pane +</div>
  21.         </div>
  22.       </TabPane>
  23.     </Tabs>
  24.   `,
  25.   styles: [
  26.     `
  27.       /deep/ .am-badge {
  28.         text-align: right;
  29.       }
  30.     `
  31.   ]
  32. })
  33. export class DemoTabsDynamicComponent {
  34.   flag = true;
  35.   activeTabIndex = 0;
  37.   tabList: any[] = [
  38.     {
  39.       title: '1st Tab',
  40.       content: '1st Tab Content'
  41.     },
  42.     {
  43.       title: '2nd Tab',
  44.       content: '2nd Tab Content'
  45.     },
  46.     {
  47.       title: '3rd Tab',
  48.       content: '3rd Tab Content'
  49.     }
  50.   ];
  52.   onChange(item) {
  53.     console.log('onChange', item);
  54.   }
  56.   onTabClick(item) {
  57.     console.log('onTabClick', item);
  58.   }
  60.   selectCard(e) {
  61.     console.log(' ', JSON.stringify(e));
  62.   }
  64.   changeIndex() {
  65.     this.activeTabIndex = 0;
  66.   }
  68.   onClick() {
  69.     this.tabList.push({
  70.       title: '' + (this.tabList.length + 1) + 'th Tab',
  71.       content: '' + (this.tabList.length + 1) + 'th Tab Content'
  72.     });
  73.   }
  74. }

垂直样式

tabDirection为vertical

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-vertical',
  5.   template: `
  6.     <Tabs
  7.       style="height: 200px;"
  8.       [page]="3"
  9.       [activeTab]="index"
  10.       [tabBarPosition]="'left'"
  11.       [tabDirection]="'vertical'"
  12.       (onChange)="onChange($event)"
  13.       (onTabClick)="onTabClick($event)"
  14.     >
  15.       <TabPane [title]="'First Tab'">
  16.         <div
  17.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  18.         >
  19.           Content of first tab
  20.         </div>
  21.       </TabPane>
  22.       <TabPane [title]="'Second Tab'">
  23.         <div
  24.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  25.         >
  26.           Content of second tab
  27.         </div>
  28.       </TabPane>
  29.       <TabPane [title]="'Third Tab'">
  30.         <div
  31.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  32.         >
  33.           Content of third tab
  34.         </div>
  35.       </TabPane>
  36.     </Tabs>
  37.   `,
  38.   styles: [
  39.     `
  40.       /deep/ .am-badge {
  41.         text-align: right;
  42.       }
  43.     `
  44.   ]
  45. })
  46. export class DemoTabsVerticalComponent {
  47.   index = 0;
  49.   onChange(item) {
  50.     console.log('onChange', item);
  51.   }
  53.   onTabClick(item) {
  54.     console.log('onTabClick', item);
  55.   }
  56. }

TabTitle固定尺寸

为TabTitle设置尺寸(单位：px)。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-fixedtabtitlesize',
  5.   template: `
  6.     <Tabs
  7.       [page]="3"
  8.       [useOnPan]="true"
  9.       [swipeable]="true"
  10.       [activeTab]="index"
  11.       [tabTitleSize]="100"
  12.       [tabBarActiveTextColor]="'#1890ff'"
  13.       (onChange)="onChange($event)"
  14.       (onTabClick)="onTabClick($event)"
  15.     >
  16.       <TabPane [title]="titleTemplate">
  17.         <ng-template #titleTemplate>
  18.           <Badge [text]="3">
  19.             <div>First Tab</div>
  20.           </Badge>
  21.         </ng-template>
  22.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  23.           Content of first tab
  24.         </div>
  25.       </TabPane>
  26.       <TabPane [title]="titleTemplate1">
  27.         <ng-template #titleTemplate1>
  28.           <Badge [text]="'今日(20)'">
  29.             <div>Second Tab</div>
  30.           </Badge>
  31.         </ng-template>
  32.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  33.           Content of second tab
  34.         </div>
  35.       </TabPane>
  36.     </Tabs>
  37.     <WhiteSpace></WhiteSpace>
  38.     <Tabs
  39.       style="height: 200px;"
  40.       [page]="3"
  41.       [activeTab]="index"
  42.       [tabTitleSize]="40"
  43.       [tabBarPosition]="'left'"
  44.       [tabDirection]="'vertical'"
  45.       (onChange)="onChange($event)"
  46.       (onTabClick)="onTabClick($event)"
  47.     >
  48.       <TabPane [title]="'First Tab'">
  49.         <div
  50.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  51.         >
  52.           Content of first tab
  53.         </div>
  54.       </TabPane>
  55.       <TabPane [title]="'Second Tab'">
  56.         <div
  57.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  58.         >
  59.           Content of second tab
  60.         </div>
  61.       </TabPane>
  62.       <TabPane [title]="'Third Tab'">
  63.         <div
  64.           style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
  65.         >
  66.           Content of third tab
  67.         </div>
  68.       </TabPane>
  69.     </Tabs>
  70.   `,
  71.   styles: [
  72.     `
  73.       /deep/ .am-badge {
  74.         text-align: right;
  75.       }
  76.     `
  77.   ]
  78. })
  79. export class DemoTabsFixedtabtitlesizeComponent {
  80.   flag = true;
  81.   index = 1;
  83.   onChange(item) {
  84.     console.log('onChange', item);
  85.   }
  87.   onTabClick(item) {
  88.     console.log('onTabClick', item);
  89.   }
  91.   selectCard(e) {
  92.     console.log(' ', JSON.stringify(e));
  93.   }
  95.   changeIndex() {
  96.     this.index = 0;
  97.   }
  98. }

自定义个数，超出界面宽度，多于5个标签

界面可见区域最多存在5个tab标签页，更多内容可以左右滑动标签页

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-tabs-multitabs',
  5.   template: `
  6.     <Tabs
  7.       [page]="3"
  8.       [activeTab]="index"
  9.       [prerenderingSiblingsNumber]="2"
  10.       (onChange)="selectCard($event)"
  11.       (onTabClick)="selectCard($event)"
  12.     >
  13.       <TabPane [title]="'1st Tab'">
  14.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  15.           Content of 1st tab
  16.         </div>
  17.       </TabPane>
  18.       <TabPane [title]="'2nd Tab'">
  19.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  20.           Content of 2nd tab
  21.         </div>
  22.       </TabPane>
  23.       <TabPane [title]="'3rd Tab'">
  24.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  25.           Content of 3rd tab
  26.         </div>
  27.       </TabPane>
  28.       <TabPane [title]="'4th Tab'">
  29.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  30.           Content of 4th tab
  31.         </div>
  32.       </TabPane>
  33.       <TabPane [title]="'5th Tab'">
  34.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  35.           Content of 5th tab
  36.         </div>
  37.       </TabPane>
  38.       <TabPane [title]="'6th Tab'">
  39.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  40.           Content of 6th tab
  41.         </div>
  42.       </TabPane>
  43.       <TabPane [title]="'7th Tab'">
  44.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  45.           Content of 7th tab
  46.         </div>
  47.       </TabPane>
  48.       <TabPane [title]="'8th Tab'">
  49.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  50.           Content of 8th tab
  51.         </div>
  52.       </TabPane>
  53.       <TabPane [title]="'9th Tab'">
  54.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
  55.           Content of 9th tab
  56.         </div>
  57.       </TabPane>
  58.     </Tabs>
  59.   `,
  60.   styles: [
  61.     `
  62.       /deep/ .am-badge {
  63.         text-align: right;
  64.       }
  65.     `
  66.   ]
  67. })
  68. export class DemoTabsMultitabsComponent {
  69.   index = 0;
  71.   onChange(item) {
  72.     console.log('onChange', item);
  73.   }
  75.   onTabClick(item) {
  76.     console.log('onTabClick', item);
  77.   }
  79.   selectCard(e) {
  80.     console.log(' ', JSON.stringify(e));
  81.   }
  82. }

Tabs标签页 - 图1

API

Tabs

参数说明类型默认值
[activeTab]当前激活Tab索引number0
[tabBarPosition]TabBar位置‘top’ | ‘bottom’ | ‘left’ | ‘right’‘top’
[page]Tab分页尺寸number5
[swipeable]是否可以滑动内容切换booleantrue
[useOnPan]使用跟手滚动booleantrue
[animated]是否开启切换动画booleantrue
[distanceToChangeTab]滑动切换阈值(宽度比例)number0.3
[prerenderingSiblingsNumber]预加载两侧Tab数量, -1: 加载所有的Tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tabnumber-1
[tabDirection]Tab方向‘horizontal’ | ‘vertical’‘horizontal’
[tabBarUnderlineStyle]TabBar下划线样式object-
[tabBarBackgroundColor]TabBar背景色string-
[tabBarActiveTextColor]TabBar激活Tab文字颜色string-
[tabBarInactiveTextColor]TabBar非激活Tab文字颜色string-
[tabBarTextStyle]TabBar文字样式object-
[renderTabBar]替换TabBar的TabTemplateRef-
(onChange)Tab变化时触发EventEmitter<{index: number}>-
(onTabClick)Tab 被点击的回调EventEmitter<{index: number}>-

TabPane

参数说明类型默认值
[title]tab面板的标题string | TemplateRef-