组件演示

[{"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<p>传统意义上的按钮组</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { ButtonGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>一级按钮<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Left<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Middle<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Right<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>二级按钮<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Left<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Middle<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Right<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Left<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Middle<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Right<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>, document.getElementById('components-button-group-demo-basic'));</span></code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-tag\">h2</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">8px</span> <span class=\"hljs-number\">0</span></span></span>;\n}</span></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<p>按钮组中每个按钮分隔存在,允许超过一定个数时折叠。<br>表格的操作列使用的就是这种形式。</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { ButtonGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(全部展开、Button 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{5}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(部分收起、Button 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{3}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(全部收起、Button 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{1}</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"medium\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(部分收起、Button 型、不同 Button Type)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{4}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>, document.getElementById('components-button-group-demo-separated'));</span></code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-tag\">h2</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">8px</span> <span class=\"hljs-number\">0</span></span></span>;\n}</span></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<p>按钮组中每个链接分隔存在,允许超过一定个数时折叠。</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { ButtonGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(全部展开、Link 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">actionType</span>=<span class=\"hljs-value\">\"link\"</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{5}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(部分收起、Link 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">actionType</span>=<span class=\"hljs-value\">\"link\"</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{3}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>分隔形态(全部收起、Link 型)<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ButtonGroup</span> <span class=\"hljs-attribute\">separated</span> <span class=\"hljs-attribute\">actionType</span>=<span class=\"hljs-value\">\"link\"</span> <span class=\"hljs-attribute\">maxLength</span>=<span class=\"hljs-value\">{1}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>One<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Two<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Three<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Four<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>Five<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">ButtonGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>, document.getElementById('components-button-group-demo-link'));</span></code></pre></div><style type=\"text/css\">h2 {\n margin: 8px 0;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-tag\">h2</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">8px</span> <span class=\"hljs-number\">0</span></span></span>;\n}</span></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;
}

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)