• Tabs标签页
    • 规则
  • 代码演示
  • API
    • Tabs
    • TabPane

    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 [useOnPan]="true"
    7.           [swipeable]="true"
    8.           [activeTab]="index"
    9.           [page]="3"
    10.           [tabBarActiveTextColor]="'#1890ff'"
    11.           (onChange)="onChange($event)"
    12.           (onTabClick)="onTabClick($event)"
    13.     >
    14.       <TabPane [title]="titleTemplate"
    15.       >
    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.       >
    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.       <TabPane [title]="titleTemplate2">
    37.         <ng-template #titleTemplate2>
    38.           <Badge [dot]="true">
    39.             <div>Third Tab</div>
    40.           </Badge>
    41.         </ng-template>
    42.         <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
    43.           Content of third tab
    44.         </div>
    45.       </TabPane>
    46.     </Tabs>
    47.     <WhiteSpace></WhiteSpace>
    48.     <Tabs [activeTab]="index"
    49.           [page]="3"
    50.           [tabBarPosition]="'bottom'"
    51.           (onChange)="onChange($event)"
    52.           (onTabClick)="onTabClick($event)"
    53.     >
    54.       <TabPane [title]="'First Tab'">
    55.         <div style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;">
    56.           Content of first tab
    57.         </div>
    58.       </TabPane>
    59.       <TabPane [title]="'Second Tab'">
    60.         <div style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;">
    61.           Content of second tab
    62.         </div>
    63.       </TabPane>
    64.       <TabPane [title]="'Third Tab'">
    65.         <div style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;">
    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 DemoTabsBasicComponent {
    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. }

    无动画

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

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

    固定高度

    固定外部容器高度

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

    动态创建

    TabPane被动态创建

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

    垂直样式

    tabDirection为vertical

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

    TabTitle固定尺寸

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

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

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

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

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

    Tabs 标签页 - 图1

    API

    Tabs

    属性说明类型默认值必选
    activeTab当前激活Tab索引number0true
    tabBarPositionTabBar位置'top' | 'bottom' | 'left' | 'right'topfalse
    pageTab分页尺寸number5false
    swipeable是否可以滑动内容切换booleantruefalse
    useOnPan使用跟手滚动booleantruefalse
    animated是否开启切换动画booleantruefalse
    onChangetab变化时触发(index: number) => voidfalse
    onTabClicktab 被点击的回调(index: number) => voidfalse
    distanceToChangeTab滑动切换阈值(宽度比例)number0.3false
    prerenderingSiblingsNumber预加载两侧Tab数量, -1: 加载所有的tab内容, 0: 仅加载当前tab内容, n: 预加载两侧n个Tabnumber-1false
    tabDirectionTab方向'horizontal' | 'vertical'horizontalfalse
    tabBarUnderlineStyletabBar下划线样式objectfalse
    tabBarBackgroundColortabBar背景色stringfalse
    tabBarActiveTextColortabBar激活Tab文字颜色stringfalse
    tabBarInactiveTextColortabBar非激活Tab文字颜色stringfalse
    tabBarTextStyletabBar文字样式objectfalse
    renderTabBar替换TabBar的TabTemplateRefnullfalse

    TabPane

    属性说明类型默认值必选
    titletab面板的标题string | TemplateReftrue