<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>