380.mdx

import { FormsModule } from '@angular/forms' import { Canvas, Meta, Story } from '@storybook/addon-docs' import { moduleMetadata } from '@storybook/angular'

import { ActiveTestComponent } from './active-test.component' import { LazyTestComponent } from './lazy-test.component'

import { ButtonModule, IconModule, FormModule, RadioModule, TabSize, TabType, TabsModule, CardModule, } from '@alauda/ui'

<Meta title="Tabs" decorators={[ moduleMetadata({ imports: [ ButtonModule, IconModule, FormsModule, FormModule, RadioModule, TabsModule, CardModule, ], declarations: [ActiveTestComponent, LazyTestComponent], }), ]} />

Tabs

移植自 Angular Material, 增加了风格（卡片/线条）和尺寸（大/中/小）选项和 lazy 模式。

基础用法

{{ template: /* HTML */ ` Content 1 Content 2 Content 3 `, props: { tab: 'a', }, }}

Card

{{ template: /* HTML */ ` Content 1 Content 2 Content 3 `, props: { type: TabType.Card, }, }}

Size

{{ template: /* HTML */ ` 尺寸 大 中 小 Content 1 Content 2 Content 3 `, props: { size: TabSize.Medium, }, }}

自定义 Label

{{ template: /* HTML */ ` aa2 Custom Label Content 1 Content 2 Custom Label Content 3 `, props: { tabs: Array.from({ length: 3 }).fill(), }, }}

添加删除

通过自定义 Group Header 实现

{{ template: /* HTML */ ` content {{ i }} `, props: { tabs: [1, 2, 3], add(num = 1) { this.tabs = this.tabs.concat( Array.from({ length: num }) .fill() .map((_, i) => this.tabs[this.tabs.length - 1] + i + 1), ) }, remove(index) { this.tabs.splice(index, 1) }, }, }}

禁用

{{ template: /* HTML */ ` Content 1 Content 2 Content 3 Content 4 `, props: { tabs: Array.from({ length: 10 }).fill(), }, }}

Lazy 模式

依赖 *auiTabContent，与默认模式按需加载每次切换 Tab 都会销毁重新创建相比，lazy 启用时在按需加载组件的同时会缓存已加载的 Tab 内容。

{{ template: /* HTML */ ` 启用 是 否 Content 1 Content 2 Content 3 `, props: { tabs: Array.from({ length: 10 }).fill(), lazy: true, }, }}

Tab 嵌套

{{ template: /* HTML */ ` 启用 Lazy 是 否 Content 1 Content 2-1 Content 2-2 `, props: { lazy: true, }, }}

自定义 Title

{{ template: /* HTML */ ` Title Content 1 Content 2 Content 3 Content 4 `, }}

TabGroupComponent Inputs

名称	类型	默认值	描述
type	TabType	TabType.Line	样式主题
size	TabSize	TabSize.Medium	尺寸
tab	string	-	选中 Tab 的名称
selectedIndex	number	-	选中 Tab 的索引
lazy	boolean	false	懒加载模式

TabGroupComponent Outputs

interface TabChangeEvent {
  index: number
  tab: TabComponent
}

名称	类型	描述
tabChange	string	Tab 切换时发射 Tab 的名称
selectedIndexChange	number	Tab 切换时发射 Tab 的索引
selectedTabChange	TabChangeEvent	Tab 切换时发射 TabChangeEvent
focusChange	TabChangeEvent	Tab focus 切换时发射

TabComponent Inputs

名称	类型	默认值	说明
name	string	-	tab 的名称
label	string	-	文字 label
closeable	boolean	false	是否显示关闭按键
disabled	boolean	false	是否禁用此 tab

TabComponent Outputs

名称	类型	描述
close	void	关闭按键被点击时发射

Directives

名称	作用范围	描述
auiTabHeaderAddon	TabGroupComponent	自定义 Group Header
auiTabLabel	TabComponent	自定义 Tab Label
auiTabContent	TabComponent	Tab 内容区域，lazy 模式必用