68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script>
|
|
import Basic from './basic';
|
|
import Changer from './changer';
|
|
import Controlled from './controlled';
|
|
import CustomChanger from './custom-changer';
|
|
import ItemRender from './itemRender';
|
|
import Jump from './jump';
|
|
import Mini from './mini';
|
|
import More from './more';
|
|
import Simple from './simple';
|
|
import Total from './total';
|
|
import CN from '../index.zh-CN.md';
|
|
import US from '../index.en-US.md';
|
|
|
|
const md = {
|
|
cn: `# Pagination 分页
|
|
|
|
采用分页的形式分隔长列表，每次只加载一个页面。
|
|
|
|
## 何时使用
|
|
|
|
- 当加载/渲染所有数据将花费很多时间时；
|
|
- 可切换页码浏览数据。
|
|
|
|
## 代码演示`,
|
|
|
|
us: `# Pagination
|
|
|
|
A long list can be divided into several pages by 'Pagination', and only one page will be loaded at a time.
|
|
|
|
## When To Use
|
|
|
|
- When it will take a long time to load/render all items.
|
|
- If you want to browse the data by navigating through pages.
|
|
## Examples `,
|
|
};
|
|
export default {
|
|
category: 'Components',
|
|
subtitle: '分页',
|
|
type: 'Navigation',
|
|
title: 'Pagination',
|
|
cols: 1,
|
|
render () {
|
|
return (
|
|
<div>
|
|
<md cn={md.cn} us={md.us}/>
|
|
<Basic />
|
|
<More />
|
|
<Changer />
|
|
<CustomChanger />
|
|
<Jump />
|
|
<Mini />
|
|
<Simple />
|
|
<Controlled />
|
|
<Total />
|
|
<ItemRender />
|
|
<api>
|
|
<template slot='cn'>
|
|
<CN/>
|
|
</template>
|
|
<US/>
|
|
</api>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
</script>
|