You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/tabs/demo/index.vue

77 lines
1.8 KiB

<script>
import Basic from './basic'
import CardTop from './card-top'
import Card from './card'
import CustomAddTrigger from './custom-add-trigger'
import Disabled from './disabled'
import EditableCard from './editable-card'
import Extra from './extra'
import Icon from './icon'
import Position from './position'
import Size from './size'
import Slide from './slide'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Tabs 标签页
选项卡切换组件。
## 何时使用
提供平级的区域将大块内容进行收纳和展现,保持界面整洁。
Ant Design 依次提供了三级选项卡,分别用于不同的场景。
- 卡片式的页签,提供可关闭的样式,常用于容器顶部。
- 标准线条式页签,用于容器内部的主功能切换,这是最常用的 Tabs。
- [RadioButton](/ant-design/components/radio-cn/) 可作为更次级的页签来使用。
## 代码演示`,
us: `# Tabs
Tabs make it easy to switch between different views.
### When To Use
Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page.
- [RadioButton](/ant-design/components/radio/): for secondary tabs.
## Examples `,
}
export default {
category: 'Components',
subtitle: '标签页',
type: 'Data Display',
title: 'Tabs',
cols: 1,
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<CardTop />
<Card />
<CustomAddTrigger />
<Disabled />
<EditableCard />
<Extra />
<Icon />
<Position />
<Size />
<Slide/>
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
},
}
</script>