uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-button-group-demo-basic","tags":[],"filepath":"site/components/button-group/demo/basic.md","directory":"components/button-group/demo","filename":"basic","meta":{"title":"基本使用","description":"\n传统意义上的按钮组\n","order":"1","filepath":"site/components/button-group/demo/basic.md","filename":"basic","directory":"components/button-group/demo","id":"components-button-group-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n '\\u4E00\\u7EA7\\u6309\\u94AE'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { type: 'primary' },\n React.createElement(\n _uxcore.Button,\n null,\n 'Left'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Middle'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Right'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u4E8C\\u7EA7\\u6309\\u94AE'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { type: 'secondary' },\n React.createElement(\n _uxcore.Button,\n null,\n 'Left'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Middle'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Right'\n )\n ),\n React.createElement(\n 'h2',\n null,\n 'outline'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n null,\n React.createElement(\n _uxcore.Button,\n null,\n 'Left'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Middle'\n ),\n React.createElement(\n _uxcore.Button,\n null,\n 'Right'\n )\n )\n), document.getElementById('components-button-group-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { ButtonGroup } from 'uxcore';\n\nReactDOM.render(\n <div>\n <h2>一级按钮</h2>\n <ButtonGroup type=\"primary\">\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n <h2>二级按钮</h2>\n <ButtonGroup type=\"secondary\">\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n <h2>outline</h2>\n <ButtonGroup>\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n </div>, document.getElementById('components-button-group-demo-basic'));</code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\">h2 {\n margin: 8px 0;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"分隔型按钮组","id":"components-button-group-demo-separated","tags":[],"filepath":"site/components/button-group/demo/separated.md","directory":"components/button-group/demo","filename":"separated","meta":{"title":"分隔型按钮组","description":"\n按钮组中每个按钮分隔存在，允许超过一定个数时折叠。 表格的操作列使用的就是这种形式。\n","order":"2","filepath":"site/components/button-group/demo/separated.md","filename":"separated","directory":"components/button-group/demo","id":"components-button-group-demo-separated","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u5168\\u90E8\\u5C55\\u5F00\\u3001Button \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, maxLength: 5 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u90E8\\u5206\\u6536\\u8D77\\u3001Button \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, maxLength: 3 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u5168\\u90E8\\u6536\\u8D77\\u3001Button \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, maxLength: 1, size: 'medium' },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u90E8\\u5206\\u6536\\u8D77\\u3001Button \\u578B\\u3001\\u4E0D\\u540C Button Type)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, maxLength: 4 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary' },\n 'Five'\n )\n )\n), document.getElementById('components-button-group-demo-separated'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { ButtonGroup } from 'uxcore';\n\nReactDOM.render(\n <div>\n <h2>分隔形态(全部展开、Button 型)</h2>\n <ButtonGroup separated maxLength={5}>\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n <h2>分隔形态(部分收起、Button 型)</h2>\n <ButtonGroup separated maxLength={3}>\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n <h2>分隔形态(全部收起、Button 型)</h2>\n <ButtonGroup separated maxLength={1} size=\"medium\">\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n <h2>分隔形态(部分收起、Button 型、不同 Button Type)</h2>\n <ButtonGroup separated maxLength={4}>\n <Button type=\"outline\">One</Button>\n <Button type=\"secondary\">Two</Button>\n <Button type=\"secondary\">Three</Button>\n <Button type=\"secondary\">Four</Button>\n <Button type=\"secondary\">Five</Button>\n </ButtonGroup>\n </div>, document.getElementById('components-button-group-demo-separated'));</code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\">h2 {\n margin: 8px 0;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"分隔型按钮组（链接型）","id":"components-button-group-demo-link","tags":[],"filepath":"site/components/button-group/demo/link.md","directory":"components/button-group/demo","filename":"link","meta":{"title":"分隔型按钮组（链接型）","description":"\n按钮组中每个链接分隔存在，允许超过一定个数时折叠。\n","order":"3","filepath":"site/components/button-group/demo/link.md","filename":"link","directory":"components/button-group/demo","id":"components-button-group-demo-link","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u5168\\u90E8\\u5C55\\u5F00\\u3001Link \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, actionType: 'link', maxLength: 5 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u90E8\\u5206\\u6536\\u8D77\\u3001Link \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, actionType: 'link', maxLength: 3 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n ),\n React.createElement(\n 'h2',\n null,\n '\\u5206\\u9694\\u5F62\\u6001(\\u5168\\u90E8\\u6536\\u8D77\\u3001Link \\u578B)'\n ),\n React.createElement(\n _uxcore.ButtonGroup,\n { separated: true, actionType: 'link', maxLength: 1 },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'One'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Two'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Three'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Four'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'Five'\n )\n )\n), document.getElementById('components-button-group-demo-link'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { ButtonGroup } from 'uxcore';\n\nReactDOM.render(\n <div>\n <h2>分隔形态(全部展开、Link 型)</h2>\n <ButtonGroup separated actionType=\"link\" maxLength={5}>\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n <h2>分隔形态(部分收起、Link 型)</h2>\n <ButtonGroup separated actionType=\"link\" maxLength={3}>\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n <h2>分隔形态(全部收起、Link 型)</h2>\n <ButtonGroup separated actionType=\"link\" maxLength={1}>\n <Button type=\"outline\">One</Button>\n <Button type=\"outline\">Two</Button>\n <Button type=\"outline\">Three</Button>\n <Button type=\"outline\">Four</Button>\n <Button type=\"outline\">Five</Button>\n </ButtonGroup>\n </div>, document.getElementById('components-button-group-demo-link'));</code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\">h2 {\n margin: 8px 0;\n}</code></pre></div>"},"status":"public","toc":""}]

基本使用

传统意义上的按钮组

import { Button } from 'uxcore';
import { ButtonGroup } from 'uxcore';

ReactDOM.render(
  <div>
    <h2>一级按钮</h2>
    <ButtonGroup type="primary">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
    <h2>二级按钮</h2>
    <ButtonGroup type="secondary">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
    <h2>outline</h2>
    <ButtonGroup>
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </div>, document.getElementById('components-button-group-demo-basic'));

h2 {
  margin: 8px 0;
}

分隔型按钮组

按钮组中每个按钮分隔存在，允许超过一定个数时折叠。
表格的操作列使用的就是这种形式。

import { Button } from 'uxcore';
import { ButtonGroup } from 'uxcore';

ReactDOM.render(
  <div>
    <h2>分隔形态(全部展开、Button 型)</h2>
    <ButtonGroup separated maxLength={5}>
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
    <h2>分隔形态(部分收起、Button 型)</h2>
    <ButtonGroup separated maxLength={3}>
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
    <h2>分隔形态(全部收起、Button 型)</h2>
    <ButtonGroup separated maxLength={1} size="medium">
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
    <h2>分隔形态(部分收起、Button 型、不同 Button Type)</h2>
    <ButtonGroup separated maxLength={4}>
      <Button type="outline">One</Button>
      <Button type="secondary">Two</Button>
      <Button type="secondary">Three</Button>
      <Button type="secondary">Four</Button>
      <Button type="secondary">Five</Button>
    </ButtonGroup>
  </div>, document.getElementById('components-button-group-demo-separated'));

h2 {
  margin: 8px 0;
}

分隔型按钮组（链接型）

按钮组中每个链接分隔存在，允许超过一定个数时折叠。

import { Button } from 'uxcore';
import { ButtonGroup } from 'uxcore';

ReactDOM.render(
  <div>
    <h2>分隔形态(全部展开、Link 型)</h2>
    <ButtonGroup separated actionType="link" maxLength={5}>
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
    <h2>分隔形态(部分收起、Link 型)</h2>
    <ButtonGroup separated actionType="link" maxLength={3}>
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
    <h2>分隔形态(全部收起、Link 型)</h2>
    <ButtonGroup separated actionType="link" maxLength={1}>
      <Button type="outline">One</Button>
      <Button type="outline">Two</Button>
      <Button type="outline">Three</Button>
      <Button type="outline">Four</Button>
      <Button type="outline">Five</Button>
    </ButtonGroup>
  </div>, document.getElementById('components-button-group-demo-link'));

h2 {
  margin: 8px 0;
}

Props

Name	Type	Required	Default	Comments
prefixCls	String	No	kuma-button-group	类名前缀，不使用 kuma 主题时可以使用
className	String	No		额外类名
type	String	No	outline	同 Button 的 type，在 separated 为 false 的情况下，单个 button 的 type 将被这个 type 覆盖
size	String	no	medium	同 Button 的 size，ButtonGroup 下必须保证 size 统一，设置单个 Button 的 size 无效
separated	Bool	No	false	是否是分隔的形态，以下 props 仅在 separated 为 true 时起效
maxLength	Number	No	3	超过多少个 Button 时开始折叠
locale	String	No	zh-cn	国际化
actionType	String	No	button	默认形态是按钮型(button) 还是文字链接型(link)