element-plus/docs/en-US/component/tabs.md
jeremywu c6bed151a5
epic(website): refactor website (#3426)
* feat(website): init viteperss (#3162)

* init vitepress

* Finish homepage

* relayout page

* partial finish

* update

* update use lang

* remove font weight; change font size

* docs: optimize docs folder structure

* reorganize project

* fix ssr issue

* fix build issues

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>

* feat(website) integrate with crowdin (#3218)

- Introduce Crowdin CLI
- Add script for fetching Crowdin token from env
- Add script for local development

* fix formatting

* update codeblocks (#3249)

* feat(docs): update website preview script

- Update azure preview build script
- Eliminate dead links

* bootstrap docs

* fix homepage layout issue

* fix formating

* Finish ToC and codepen integration

* reorganized files and fix issue that causes demo unavailable after build

* feat(docs): migration documentations (#3283)

* feat(docs): migration documentations

- Move documentations to docs/

* remove unused files

* docs: [popconfirm] migrate document (#3285)

* feat(docs): migrate documentation from space.md to upload.md (#3292)

- Upload documentations acorrodingly

* docs: [date-picker] migrate document  (#3289)

* docs: [date-picker] migrate document

* fix: typo

* docs: [slider] migrate document (#3287)

* docs: migrate documents (#3290)

* docs: migrate-datetime-picker

* docs: migrate descriptions

* docs: migrate dialog

* docs: migrate divider

* docs: migrate drawer

* docs: migrate drapdown

* docs: fix drapdown

* docs: migrate empty

* docs: migrate form

* docs: add scoped for style

* docs: simplify toRefs

* chore: update doc (#3297)

* chore: update doc

* chore: update doc

* chore: update doc

* feat(docs): migrate documentations from infinite-scroll to page-header (#3303)

- Update docs accordingly
- Update CodePen icon to match style
- Update component name to match others

* docs: migrate documentions (#3293)

migrate list:
* image
* popover
* scrollbar
* radio
* rate
* skeleton
* select
* select-v2
* reault
* progress
* pagination

* chore: update doc (#3305)

Co-authored-by: 0song <0song@gmail.com>

* Fix broken pipeline

* chore: update demo plugin

* website perfection

* fix hydration bug

* docs: update guide (#3342)

* WIP docs

* docs: update docs

* add dark mode

* make dev fetch components from local instead of node_modules

Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

* fix(docs): fix codepen code example issue (#3380)

* fix(docs): fix codepen code example issue

- Add lang="ts" for all example files
- Fix codepen import error

* revert changes in resource.vue

* feat(docs): complete crowdin integration (#3408)

* Update mds for preparing the integration script

* deprecate old website

* update sponsors and even handler for resize

* update build script for preview

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* fix preview-build error

* update deploy script and some bugs

* Fix existing issue

* chore(project): add dev preview workflow

* chore(project): rename dev to staging

* update the size of toc

* update staging-preview script

* update preview scripts

* enable website build for preview

* fix build error

* final commitment for update the details

* remove azure pipeline

* move docs ignores into docs and update date

Co-authored-by: Kevin <sxzz@sxzz.moe>
Co-authored-by: zouhang <zouhang@didiglobal.com>
Co-authored-by: msidolphin <msidolphin@outlook.com>
Co-authored-by: Aex <spryti@qq.com>
Co-authored-by: 0song <82012629+0song@users.noreply.github.com>
Co-authored-by: 0song <0song@gmail.com>
2021-09-17 00:18:50 +08:00

5.9 KiB

Tabs

Divide data collections which are related yet belong to different types.

Basic usage

Basic and concise tabs.

:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the value attribute.

tabs/basic

:::

Card Style

Tabs styled as cards.

:::demo Set type to card can get a card-styled tab.

tabs/card-style

:::

Border card

Border card tabs.

:::demo Set type to border-card.

tabs/border-card

:::

Tab position

You can use tab-position attribute to set the tab's position.

:::demo You can choose from four directions: tabPosition="left|right|top|bottom"

tabs/tab-position

:::

Custom Tab

You can use named slot to customize the tab label content.

:::demo

tabs/custom-tab

:::

Add & close tab

Only card type Tabs support addable & closeable.

:::demo

tabs/dynamic-tabs

:::

Customized trigger button of new tab

:::demo

tabs/customized-trigger

:::

Tabs Attributes

Attribute Description Type Accepted Values Default
model-value / v-model binding value, name of the selected tab string name of first tab
type type of Tab string card/border-card
closable whether Tab is closable boolean false
addable whether Tab is addable boolean false
editable whether Tab is addable and closable boolean false
tab-position position of tabs string top/right/bottom/left top
stretch whether width of tab automatically fits its container boolean - false
before-leave hook function before switching tab. If false is returned or a Promise is returned and then is rejected, switching will be prevented Function(activeName, oldActiveName)

Tabs Events

Event Name Description Parameters
tab-click triggers when a tab is clicked clicked tab
tab-remove triggers when tab-remove button is clicked name of the removed tab
tab-add triggers when tab-add button is clicked
edit triggers when tab-add button or tab-remove is clicked (targetName, action)

Tab-pane Attributes

Attribute Description Type Accepted Values Default
label title of the tab string
disabled whether Tab is disabled boolean false
name identifier corresponding to the name of Tabs, representing the alias of the tab-pane string ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1'
closable whether Tab is closable boolean false
lazy whether Tab is lazily rendered boolean false

Tab-pane Slots

Name Description
- Tab-pane's content
label Tab-pane's label