Tabs标签页

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

基本用法

最简单的用法。

无动画

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

@Component({
  selector: 'demo-tabs-noanim',
  template: `
    <Tabs
      [page]="3"
      [animated]="false"
      [useOnPan]="false"
      [activeTab]="index"
      (onChange)="onChange($event)"
      (onTabClick)="onTabClick($event)"
    >
      <TabPane [title]="'First Tab'">
        <div
          style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
          Content of first tab
        </div>
      </TabPane>
      <TabPane [title]="'Second Tab'">
        <div
          style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
          Content of second tab
        </div>
      </TabPane>
      <TabPane [title]="'Third Tab'">
        <div
          style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
          Content of third tab
        </div>
      </TabPane>
    </Tabs>
  `,
  styles: [
    `
      /deep/ .am-badge {
        text-align: right;
      }
    `
  ]
})
export class DemoTabsNoanimComponent {
  index = 0;
  onChange(item) {
    console.log('onChange', item);
  }
  onTabClick(item) {
    console.log('onTabClick', item);
  }
}

固定外部容器高度

动态创建

TabPane被动态创建

import { Component } from '@angular/core';
@Component({
  selector: 'demo-tabs-dynamic',
  template: `
    <Tabs
      [page]="5"
      [useOnPan]="true"
      [swipeable]="true"
      [activeTab]="activeTabIndex"
      [tabBarActiveTextColor]="'#1890ff'"
      (onChange)="onChange($event)"
      (onTabClick)="onTabClick($event)"
    >
      <TabPane *ngFor="let tabListItem of tabList; let i = index" [title]="tabListItem.title">
          style="display: block; padding: 40px; text-align: center; align-items: center;justify-content: center;height: 150px;background-color: #fff"
        >
          <div>{{ tabListItem.content }}</div>
          <div Button [type]="'primary'" (onClick)="onClick()">Add Pane +</div>
        </div>
      </TabPane>
    </Tabs>
  `,
  styles: [
    `
      /deep/ .am-badge {
        text-align: right;
      }
    `
  ]
})
export class DemoTabsDynamicComponent {
  flag = true;
  activeTabIndex = 0;
  tabList: any[] = [
    {
      title: '1st Tab',
      content: '1st Tab Content'
    },
    {
      title: '2nd Tab',
      content: '2nd Tab Content'
    },
    {
      title: '3rd Tab',
      content: '3rd Tab Content'
    }
  ];
  onChange(item) {
    console.log('onChange', item);
  }
  onTabClick(item) {
    console.log('onTabClick', item);
  }
  selectCard(e) {
    console.log(' ', JSON.stringify(e));
  }
  changeIndex() {
    this.activeTabIndex = 0;
  }
  onClick() {
    this.tabList.push({
      title: '' + (this.tabList.length + 1) + 'th Tab',
      content: '' + (this.tabList.length + 1) + 'th Tab Content'
    });
  }
}

垂直样式

TabTitle固定尺寸

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

import { Component } from '@angular/core';
@Component({
  selector: 'demo-tabs-fixedtabtitlesize',
  template: `
    <Tabs
      [page]="3"
      [useOnPan]="true"
      [swipeable]="true"
      [activeTab]="index"
      [tabTitleSize]="100"
      [tabBarActiveTextColor]="'#1890ff'"
      (onChange)="onChange($event)"
      (onTabClick)="onTabClick($event)"
    >
      <TabPane [title]="titleTemplate">
        <ng-template #titleTemplate>
          <Badge [text]="3">
            <div>First Tab</div>
        </ng-template>
        <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
          Content of first tab
        </div>
      </TabPane>
      <TabPane [title]="titleTemplate1">
        <ng-template #titleTemplate1>
          <Badge [text]="'今日(20)'">
            <div>Second Tab</div>
          </Badge>
        </ng-template>
        <div style="display: flex; align-items: center;justify-content: center;height: 150px;background-color: #fff">
          Content of second tab
        </div>
      </TabPane>
    </Tabs>
    <WhiteSpace></WhiteSpace>
    <Tabs
      style="height: 200px;"
      [page]="3"
      [activeTab]="index"
      [tabTitleSize]="40"
      [tabBarPosition]="'left'"
      [tabDirection]="'vertical'"
      (onChange)="onChange($event)"
      (onTabClick)="onTabClick($event)"
    >
      <TabPane [title]="'First Tab'">
        <div
          style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
        </div>
      </TabPane>
      <TabPane [title]="'Second Tab'">
        <div
          style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
          Content of second tab
        </div>
      </TabPane>
      <TabPane [title]="'Third Tab'">
        <div
          style="display: flex; height: 200px; width: 100%; background-color: white;align-items: center;justify-content: center;"
        >
          Content of third tab
        </div>
      </TabPane>
    </Tabs>
  `,
  styles: [
    `
      /deep/ .am-badge {
        text-align: right;
      }
    `
  ]
})
export class DemoTabsFixedtabtitlesizeComponent {
  flag = true;
  index = 1;
  onChange(item) {
    console.log('onChange', item);
  }
  onTabClick(item) {
    console.log('onTabClick', item);
  }
  selectCard(e) {
    console.log(' ', JSON.stringify(e));
  }
  changeIndex() {
    this.index = 0;
  }

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

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

API