80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
|
<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 CustomTabBar from './custom-tab-bar';
|
|||
|
|
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} />
|
|||
|
|
<demo-sort cols={1}>
|
|||
|
|
<Basic />
|
|||
|
|
<Disabled />
|
|||
|
|
<Icon />
|
|||
|
|
<Slide />
|
|||
|
|
<Extra />
|
|||
|
|
<Size />
|
|||
|
|
<Position />
|
|||
|
|
<Card />
|
|||
|
|
<EditableCard />
|
|||
|
|
<CardTop />
|
|||
|
|
<CustomAddTrigger />
|
|||
|
|
</demo-sort>
|
|||
|
|
<api>
|
|||
|
|
<template slot="cn">
|
|||
|
|
<CN />
|
|||
|
|
</template>
|
|||
|
|
<US />
|
|||
|
|
</api>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|