@include 'common'

## 何时使用

TAB 让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，是全局功能的主要展示和切换区域，一个 TAB 标记一个核心功能，TAB 之间可以快速点击切换。该窗口包含 2 个以上的选项卡，所有选项卡可以排列在一行中，即使该用户界面被本地化后也是如此。提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

Fusion 提供了三级选项卡，分别用于不同的场景。

普通选项卡，引领整页面的内容，起导航的作用。
文本型选项卡。
包裹型选项卡，在页面结构中，只是局部展示，需要和其他内容结合出现。
胶囊型选项卡。

## 如何使用

如果您不想开启动效，可以通过设置 animation 属性值为 false 来关闭。

## 代码演示

# 简单用法

使用 Tab 最简单的例子。
@include 'demo1'

# 形态

根据使用场景及触发控件的类型，可以通过 shape 属性配置选项卡的类型，主要包括：

pure 普通选项卡（默认）
wrapped 包裹型选项卡
text 文本型选项卡
capsule 胶囊型选项卡
@include 'demo2'

# 小号尺寸

pure和text只有小号尺寸，一般用于弹出框等较狭窄的容器内。wrapped有medium和large尺寸
@include 'demo3'

# 按需加载和自动卸载

默认情况 Tab 不会提前渲染好所有的内容，而是根据 Tab 的激活情况依次进行渲染。

可以设置 lazyLoad={false} 一次渲染所有 TabItem 内容。
可以设置 unmountInactiveTabs 在切换选项卡时自动卸载其他 TabItem。
@include 'demo4'

# 位置

包裹型选项卡支持通过 tabPosition 属性设置选项卡的位置，支持 top | right | bottom | left 四个方向。
@include 'demo5'

# 超出时滑动

当 Tab 标签非常多时，组件会自动增加滑动支持(可以左右、上下滑动)。可以用过 excessMode 属性切换滑动模式，该属性仅在 tabPosition 为 top 或者 bottom 时生效。
@include 'demo6'

# 可关闭选项卡

可关闭选项卡，可以通过在 Tab.Item 上设置 closeable 属性设置该选项卡是否可关闭。
@include 'demo7'

# 触发类型

Tab 支持 click 切换和 hover 切换两种触发类型，默认为 click 触发，您可以使用 triggerType 属性修改默认的触发类型。
@include 'demo8'

# 禁用

可以通过 disabled 属性禁用某一个选型卡。
@include 'demo9'

# 自定义样式

在 Tab 已有样式的基础上，可以通过 contentStyle, contentClassName 等属性自由的进行样式自定义。
@include 'demo10'

# 自定义选项卡

Tab 支持使用 tabRender 属性返回自定义组件作为选项卡内容，注意该属性接收函数作为属性值。
@include 'demo11'

# 附加额外内容

通过 extra 属性添加附加内容，请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。
@include 'demo12'

# 可编辑的 Tab

Tab 允许开发者在上层进行自由的行为控制，例如用户可以基于 Tab 开发一个标题部分双击可编辑的 Tab ， 此时用户只要传入自定义组件给 TabPane 即可，Tab 可以将底层事件对象传递给用户的自定义组件。
@include 'demo13'

# 在 Grid 中使用 Tab

当 Tab 位于 Grid 组件的布局中时，由于 Grid 默认使用 flex 布局方式，当选项卡数量过多时，会导致内层元素撑起整个 flex 容器，此时需要给容器添加自定义样式 overflow: hidden。
@include 'demo14'

# 选项卡嵌套

可以将不同类型的选项卡进行嵌套
@include 'demo15'

# 禁止键盘事件

通过 disabledKeyboard=true 禁止 Tab 聚焦时的键盘 ↑,↓,← ,→ 切换
@include 'demo16'