---
title: Tabs 选项卡
description: 用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。
isComponent: true
usage: true
spline: navigation
author: swimly
---

## 基本用法

选项卡组件可通过 2 中方式来定义，第一种为使用标签`l-tabs`，`l-tab-panel`，第二种通过给`l-tabs`设置 options 属性来定义，
通过`v-model`或者`defaultValue`来定义当前选中。

> 提示：虽然第二种也支持自定义 panel 的内容，但必须开启 jsx，所以一般情况都推荐使用第一种方式。

- 标签方式：通过`l-tabs`作为容器包裹多个`l-tab-panel`，在其内部可随意定义当前项的内容。

- 属性方式：通过定义`l-tabs`上的`list`属性来定义一组选项卡，数据格式请参
  考[`TypeTabPanelProps`](https://git.longrise.cn:6285/ldesign/blob/main/src/components/tabs/type.ts)中的定义。

{{ base }}

## 自定义图标

通过定义`l-tab-panel`上的`label`属性，可定义当前选项卡的标签内容，不仅仅时图标，可以随意修改其内容。

{{ icon }}

## 不同主题

通过`theme`可定义不同主题的选项卡，支持线条和卡片形式，可选：`card`，`normal`，默认为`normal`线条模式。

{{ card }}

## 不同尺寸

通过`size`可定义不同大小的选项卡，可选：`medium`，`large`，默认为`medium`。

{{ size }}

## 不同位置

通过`placement`可定义选项卡标题栏的位置，可选：`top`，`right`，`bottom`，`left`，默认情况为：`top`。

{{ position }}

## 可编辑

通过设置`l-tabs`上的`addable`属性让选项卡可添加，通过设置`l-tab-panel`上的`removable`属性可让当前选项卡可删除。

{{ editable }}

## 超出滑动

针对选项卡数量较多的情况，不用单独设置任何属性，当超出容器宽度会自动横向滚动。

{{ scroll }}

## 禁用

通过给`l-tab-panel`设置`disabled`属性赖禁用某一个选项卡，也可以设置`l-tabs`上的`disabled`属性来全局设置当前选项卡的禁用
状态。

{{ disabled }}
