ant-design-vue/components/collapse/demo/index.vue

65 lines
1.4 KiB
Vue
Raw Normal View History

2018-02-01 10:18:05 +00:00
<script>
2019-01-12 03:33:27 +00:00
import Accordion from './accordion';
import Basic from './basic';
import Borderless from './borderless';
import Custom from './custom';
import Mix from './mix';
import Noarrow from './noarrow';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
2018-02-01 10:18:05 +00:00
const md = {
cn: `# Collapse折叠面板
可以折叠/展开的内容区域
## 何时使用
- 对复杂区域进行分组和隐藏保持页面的整洁
- '手风琴' 是一种特殊的折叠面板只允许单个内容区域展开
2018-02-27 04:14:29 +00:00
2018-02-01 10:18:05 +00:00
## 代码演示`,
2019-01-08 11:00:39 +00:00
us: `# Collapse
A content area which can be collapsed and expanded.
## When To Use
2018-02-01 10:18:05 +00:00
- Can be used to group or hide complex regions to keep the page clean.
2018-03-20 13:48:01 +00:00
- 'Accordion' is a special kind of 'Collapse', which allows only one panel to be expanded at a time.
2019-01-08 11:00:39 +00:00
## Examples
2018-03-20 13:48:01 +00:00
`,
2019-01-12 03:33:27 +00:00
};
2018-02-01 10:18:05 +00:00
export default {
2018-03-20 13:48:01 +00:00
category: 'Components',
type: 'Data Display',
zhType: '数据展示',
2018-03-20 13:48:01 +00:00
title: 'Collapse',
subtitle: '折叠面板',
cols: 1,
2019-09-28 12:45:07 +00:00
render() {
2018-02-01 10:18:05 +00:00
return (
<div>
2019-09-28 12:45:07 +00:00
<md cn={md.cn} us={md.us} />
<Basic />
<br />
<Accordion />
<br />
<Mix />
<br />
<Borderless />
<br />
<Custom />
<br />
<Noarrow />
<br />
2018-02-01 10:18:05 +00:00
<api>
2019-09-28 12:45:07 +00:00
<template slot="cn">
<CN />
2018-02-01 10:18:05 +00:00
</template>
2019-09-28 12:45:07 +00:00
<US />
2018-02-01 10:18:05 +00:00
</api>
</div>
2019-01-12 03:33:27 +00:00
);
2018-02-01 10:18:05 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-02-01 10:18:05 +00:00
</script>