uxcore.js - React UI Component Set

组件演示

[{"title":"标准型","id":"components-tabs-demo-open","tags":[],"filepath":"site/components/tabs/demo/open.md","directory":"components/tabs/demo","filename":"open","meta":{"title":"标准型","description":"\n开放型样式\n","order":"0","filepath":"site/components/tabs/demo/open.md","filename":"open","directory":"components/tabs/demo","id":"components-tabs-demo-open","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nReactDOM.render(React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: \"2\", type: \"open\" },\n React.createElement(\n TabPane,\n { tab: \"tab 1\", key: \"1\" },\n \"\\u9009\\u9879\\u5361\\u4E00\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 2\", key: \"2\" },\n \"\\u9009\\u9879\\u5361\\u4E8C\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 3\", key: \"3\" },\n \"\\u9009\\u9879\\u5361\\u4E09\"\n )\n), document.getElementById('components-tabs-demo-open'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nReactDOM.render(\n <Tabs defaultActiveKey=\"2\" type=\"open\">\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n </Tabs>\n, document.getElementById('components-tabs-demo-open'));</code></pre></div>"},"status":"public","toc":""},{"title":"卡片式","id":"components-tabs-demo-basic","tags":[],"filepath":"site/components/tabs/demo/basic.md","directory":"components/tabs/demo","filename":"basic","meta":{"title":"卡片式","description":"\n","order":"1","filepath":"site/components/tabs/demo/basic.md","filename":"basic","directory":"components/tabs/demo","id":"components-tabs-demo-basic","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nReactDOM.render(React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: \"2\" },\n React.createElement(\n TabPane,\n { tab: \"tab 1\", key: \"1\" },\n \"\\u9009\\u9879\\u5361\\u4E00\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 2\", key: \"2\" },\n \"\\u9009\\u9879\\u5361\\u4E8C\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 3\", key: \"3\" },\n \"\\u9009\\u9879\\u5361\\u4E09\"\n )\n), document.getElementById('components-tabs-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nReactDOM.render(\n <Tabs defaultActiveKey=\"2\">\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n </Tabs>\n, document.getElementById('components-tabs-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"小尺寸","id":"components-tabs-demo-small","tags":[],"filepath":"site/components/tabs/demo/small.md","directory":"components/tabs/demo","filename":"small","meta":{"title":"小尺寸","description":"\n小（局部）tab\n","order":"2","filepath":"site/components/tabs/demo/small.md","filename":"small","directory":"components/tabs/demo","id":"components-tabs-demo-small","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nReactDOM.render(React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: \"2\", type: \"small\" },\n React.createElement(\n TabPane,\n { tab: \"tab 1\", key: \"1\" },\n \"\\u9009\\u9879\\u5361\\u4E00\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 2\", key: \"2\" },\n \"\\u9009\\u9879\\u5361\\u4E8C\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 3\", key: \"3\" },\n \"\\u9009\\u9879\\u5361\\u4E09\"\n )\n), document.getElementById('components-tabs-demo-small'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nReactDOM.render(\n <Tabs defaultActiveKey=\"2\" type=\"small\">\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n </Tabs>\n, document.getElementById('components-tabs-demo-small'));</code></pre></div>"},"status":"public","toc":""},{"title":"胶囊型","id":"components-tabs-demo-brick","tags":[],"filepath":"site/components/tabs/demo/brick.md","directory":"components/tabs/demo","filename":"brick","meta":{"title":"胶囊型","description":"\nBRICK\n","order":"4","filepath":"site/components/tabs/demo/brick.md","filename":"brick","directory":"components/tabs/demo","id":"components-tabs-demo-brick","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nReactDOM.render(React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: \"2\", type: \"brick\" },\n React.createElement(\n TabPane,\n { tab: \"tab 1\", key: \"1\" },\n \"\\u9009\\u9879\\u5361\\u4E00\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 2\", key: \"2\" },\n \"\\u9009\\u9879\\u5361\\u4E8C\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 3\", key: \"3\" },\n \"\\u9009\\u9879\\u5361\\u4E09\"\n )\n), document.getElementById('components-tabs-demo-brick'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nReactDOM.render(\n <Tabs defaultActiveKey=\"2\" type=\"brick\">\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n </Tabs>\n, document.getElementById('components-tabs-demo-brick'));</code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-tabs-demo-disabled","tags":[],"filepath":"site/components/tabs/demo/disabled.md","directory":"components/tabs/demo","filename":"disabled","meta":{"title":"禁用","description":"\n禁用某一项。\n","order":"5","filepath":"site/components/tabs/demo/disabled.md","filename":"disabled","directory":"components/tabs/demo","id":"components-tabs-demo-disabled","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nfunction callback(key) {}\n\nReactDOM.render(React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: \"1\", onChange: callback },\n React.createElement(\n TabPane,\n { tab: \"tab 1\", key: \"1\" },\n \"\\u9009\\u9879\\u5361\\u4E00\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 2\", disabled: true, key: \"2\" },\n \"\\u9009\\u9879\\u5361\\u4E8C\"\n ),\n React.createElement(\n TabPane,\n { tab: \"tab 3\", key: \"3\" },\n \"\\u9009\\u9879\\u5361\\u4E09\"\n )\n), document.getElementById('components-tabs-demo-disabled'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nfunction callback(key) {}\n\nReactDOM.render(\n <Tabs defaultActiveKey=\"1\" onChange={callback}>\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" disabled key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n </Tabs>\n, document.getElementById('components-tabs-demo-disabled'));</code></pre></div>"},"status":"public","toc":""},{"title":"溢出","id":"components-tabs-demo-overflow","tags":[],"filepath":"site/components/tabs/demo/overflow.md","directory":"components/tabs/demo","filename":"overflow","meta":{"title":"溢出","description":"\n开放型样式\n","order":"6","filepath":"site/components/tabs/demo/overflow.md","filename":"overflow","directory":"components/tabs/demo","id":"components-tabs-demo-overflow","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar TabPane = _uxcore.Tabs.TabPane;\n\nReactDOM.render(React.createElement(\n 'div',\n { style: { width: '600px' } },\n React.createElement(\n _uxcore.Tabs,\n { defaultActiveKey: '2', type: 'open' },\n React.createElement(\n TabPane,\n { tab: 'tab 1', key: '1' },\n '\\u9009\\u9879\\u5361\\u4E00'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 2', key: '2' },\n '\\u9009\\u9879\\u5361\\u4E8C'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 3', key: '3' },\n '\\u9009\\u9879\\u5361\\u4E09'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 4', key: '4' },\n '\\u9009\\u9879\\u5361\\u56DB'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 5', key: '5' },\n '\\u9009\\u9879\\u5361\\u4E94'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 6', key: '6' },\n '\\u9009\\u9879\\u5361\\u516D'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 7', key: '7' },\n '\\u9009\\u9879\\u5361\\u4E03'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 8', key: '8' },\n '\\u9009\\u9879\\u5361\\u516B'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 9', key: '9' },\n '\\u9009\\u9879\\u5361\\u4E5D'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 10', key: '10' },\n '\\u9009\\u9879\\u5361\\u5341'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 11', key: '11' },\n '\\u9009\\u9879\\u5361\\u5341\\u4E00'\n ),\n React.createElement(\n TabPane,\n { tab: 'tab 12', key: '12' },\n '\\u9009\\u9879\\u5361\\u5341\\u4E8C'\n )\n )\n), document.getElementById('components-tabs-demo-overflow'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tabs } from 'uxcore';\nconst TabPane = Tabs.TabPane;\n\nReactDOM.render(\n <div style={{ width: '600px' }}>\n <Tabs defaultActiveKey=\"2\" type=\"open\">\n <TabPane tab=\"tab 1\" key=\"1\">选项卡一</TabPane>\n <TabPane tab=\"tab 2\" key=\"2\">选项卡二</TabPane>\n <TabPane tab=\"tab 3\" key=\"3\">选项卡三</TabPane>\n <TabPane tab=\"tab 4\" key=\"4\">选项卡四</TabPane>\n <TabPane tab=\"tab 5\" key=\"5\">选项卡五</TabPane>\n <TabPane tab=\"tab 6\" key=\"6\">选项卡六</TabPane>\n <TabPane tab=\"tab 7\" key=\"7\">选项卡七</TabPane>\n <TabPane tab=\"tab 8\" key=\"8\">选项卡八</TabPane>\n <TabPane tab=\"tab 9\" key=\"9\">选项卡九</TabPane>\n <TabPane tab=\"tab 10\" key=\"10\">选项卡十</TabPane>\n <TabPane tab=\"tab 11\" key=\"11\">选项卡十一</TabPane>\n <TabPane tab=\"tab 12\" key=\"12\">选项卡十二</TabPane>\n </Tabs>\n </div>\n, document.getElementById('components-tabs-demo-overflow'));</code></pre></div>"},"status":"public","toc":""}]

标准型

开放型样式

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="2" type="open">
    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-open'));

卡片式

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="2">
    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-basic'));

小尺寸

小（局部）tab

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="2" type="small">
    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-small'));

胶囊型

BRICK

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="2" type="brick">
    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-brick'));

禁用

禁用某一项。

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

function callback(key) {}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
    <TabPane tab="tab 2" disabled key="2">选项卡二</TabPane>
    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-disabled'));

溢出

开放型样式

import { Tabs } from 'uxcore';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <div style={{ width: '600px' }}>
    <Tabs defaultActiveKey="2" type="open">
      <TabPane tab="tab 1" key="1">选项卡一</TabPane>
      <TabPane tab="tab 2" key="2">选项卡二</TabPane>
      <TabPane tab="tab 3" key="3">选项卡三</TabPane>
      <TabPane tab="tab 4" key="4">选项卡四</TabPane>
      <TabPane tab="tab 5" key="5">选项卡五</TabPane>
      <TabPane tab="tab 6" key="6">选项卡六</TabPane>
      <TabPane tab="tab 7" key="7">选项卡七</TabPane>
      <TabPane tab="tab 8" key="8">选项卡八</TabPane>
      <TabPane tab="tab 9" key="9">选项卡九</TabPane>
      <TabPane tab="tab 10" key="10">选项卡十</TabPane>
      <TabPane tab="tab 11" key="11">选项卡十一</TabPane>
      <TabPane tab="tab 12" key="12">选项卡十二</TabPane>
    </Tabs>
  </div>
, document.getElementById('components-tabs-demo-overflow'));

const Tabs = require('uxcore-tabs');
const TabPane = Tabs.TabPane;

const callback = function (key) {

};

ReactDOM.render(
  (
    <Tabs defaultActiveKey="2" onChange={callback}>
      <TabPane tab="tab 1" key="1">first</TabPane>
      <TabPane tab="tab 2" key="2">second</TabPane>
      <TabPane tab="tab 3" key="3">third</TabPane>
    </Tabs>
  ),
  document.getElementById('t2'));

API

Tabs

name	type	default	description
activeKey	String		current active tabPanel's key
defaultActiveKey	String	first active tabPanel's key	initial active tabPanel's key if activeKey is absent
onChange	Function	(key)	called when tabPanel is changed
onTabClick	Function	(key)	called when tab is clicked
destroyInactiveTabPane	Boolean	false	whether destroy inactive tabpane when change tab
type	string	large	`large` `small` `filter` `brick`

TabPane

name	type	default	description
key	Object		corresponding to activeKey
tab	String		current tab's title corresponding to current tabPane