uxcore.js - React UI Component Set

组件演示

[{"title":"显示总条数","id":"components-pagination-demo-total","tags":[],"filepath":"site/components/pagination/demo/total.md","directory":"components/pagination/demo","filename":"total","meta":{"title":"显示总条数","description":"\n更多分页。\n","order":"4","filepath":"site/components/pagination/demo/total.md","filename":"total","directory":"components/pagination/demo","id":"components-pagination-demo-total","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(React.createElement(_uxcore.Pagination, { onChange: onChange, total: 500, showTotal: true }), document.getElementById('components-pagination-demo-total'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Pagination } from 'uxcore';\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(\n <Pagination onChange={onChange} total={500} showTotal />,\n document.getElementById('components-pagination-demo-total'));</code></pre></div>"},"status":"public","toc":""},{"title":"迷你","id":"components-pagination-demo-mini","tags":[],"filepath":"site/components/pagination/demo/mini.md","directory":"components/pagination/demo","filename":"mini","meta":{"title":"迷你","description":"\n迷你版本。\n","order":"5","filepath":"site/components/pagination/demo/mini.md","filename":"mini","directory":"components/pagination/demo","id":"components-pagination-demo-mini","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(React.createElement(_uxcore.Pagination, { className: 'mini', onChange: onChange, total: 50 }), document.getElementById('components-pagination-demo-mini'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Pagination } from 'uxcore';\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(\n <Pagination className=\"mini\" onChange={onChange} total={50} />,\n document.getElementById('components-pagination-demo-mini'));</code></pre></div>"},"status":"public","toc":""},{"title":"总数未知","id":"components-pagination-demo-unknown-total","tags":[],"filepath":"site/components/pagination/demo/unknown-total.md","directory":"components/pagination/demo","filename":"unknown-total","meta":{"title":"总数未知","description":"\n基础分页。\n","order":"7","filepath":"site/components/pagination/demo/unknown-total.md","filename":"unknown-total","directory":"components/pagination/demo","id":"components-pagination-demo-unknown-total","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(React.createElement(_uxcore.Pagination, { onChange: onChange, current: 2 }), document.getElementById('components-pagination-demo-unknown-total'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Pagination } from 'uxcore';\n\nfunction onChange(page) {\n console.log(page);\n}\n\nReactDOM.render(\n <Pagination onChange={onChange} current={2} />,\n document.getElementById('components-pagination-demo-unknown-total'));</code></pre></div>"},"status":"public","toc":""}]

显示总条数

更多分页。

import { Pagination } from 'uxcore';

function onChange(page) {
  console.log(page);
}

ReactDOM.render(
  <Pagination onChange={onChange} total={500} showTotal />,
 document.getElementById('components-pagination-demo-total'));

迷你

迷你版本。

import { Pagination } from 'uxcore';

function onChange(page) {
  console.log(page);
}

ReactDOM.render(
  <Pagination className="mini" onChange={onChange} total={50} />,
 document.getElementById('components-pagination-demo-mini'));

总数未知

基础分页。

import { Pagination } from 'uxcore';

function onChange(page) {
  console.log(page);
}

ReactDOM.render(
  <Pagination onChange={onChange} current={2} />,
 document.getElementById('components-pagination-demo-unknown-total'));

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

当加载/渲染所有数据将花费很多时间时；
可切换页码浏览数据。

API

Pagination

参数	说明	类型	默认值
locale	语言(zh-cn/en-us)	string	zh-cn
current	当前页数	number	1
total	数据总数	number/jsx	0
pageSize	每页条数	number	10
onChange	页码改变的回调，参数是改变后的页码	function	noop
showTotal	是否显示共多少条	boolean	false
showQuickJumper	是否可以快速跳转至某页	bool	false
showSizeChanger	是否可以改变 pageSize	bool	false
sizeOptions	sizeChanger 显示的可选 pageSize	array	[10, 20, 30, 40]
onShowSizeChange	pageSize 变化的回调	function	noop
className	当为「mini」时，是小尺寸分页	string
simple	当添加该属性时，显示为简单分页	object	无
getSelectPopupContainer	指定下拉选择框渲染的容器	function():HTML Element	插在 body 下的一个 div