组件演示
[{"title":"基本使用","id":"components-switch-demo-basic","tags":[],"filepath":"site/components/switch/demo/basic.md","directory":"components/switch/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/switch/demo/basic.md","filename":"basic","directory":"components/switch/demo","id":"components-switch-demo-basic","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n \"div\",\n { style: {\n padding: 10\n }\n },\n React.createElement(_uxcore.Switch, { checkedChildren: \"\\u663E\\u793A\", unCheckedChildren: \"\\u9690\\u85CF\", disabled: false })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-switch-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Switch } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">padding:</span> <span class=\"hljs-attribute\">10</span>,\n }}\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Switch</span> <span class=\"hljs-attribute\">checkedChildren</span>=<span class=\"hljs-value\">\"显示\"</span> <span class=\"hljs-attribute\">unCheckedChildren</span>=<span class=\"hljs-value\">\"隐藏\"</span> <span class=\"hljs-attribute\">disabled</span>=<span class=\"hljs-value\">{false}</span> /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>\n, document.getElementById('components-switch-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"无文字","id":"components-switch-demo-small","tags":[],"filepath":"site/components/switch/demo/small.md","directory":"components/switch/demo","filename":"small","meta":{"title":"无文字","description":"\n","order":"0","filepath":"site/components/switch/demo/small.md","filename":"small","directory":"components/switch/demo","id":"components-switch-demo-small","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n \"div\",\n {\n style: {\n padding: 10\n }\n },\n React.createElement(_uxcore.Switch, { checkedChildren: \"\", unCheckedChildren: \"\", className: \"kuma-switch-no-text\", disabled: false })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-switch-demo-small'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Switch } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">padding:</span> <span class=\"hljs-attribute\">10</span>,\n }}\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Switch</span> <span class=\"hljs-attribute\">checkedChildren</span>=<span class=\"hljs-value\">\"\"</span> <span class=\"hljs-attribute\">unCheckedChildren</span>=<span class=\"hljs-value\">\"\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-switch-no-text\"</span> <span class=\"hljs-attribute\">disabled</span>=<span class=\"hljs-value\">{false}</span> /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>, document.getElementById('components-switch-demo-small'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-switch-demo-disabled","tags":[],"filepath":"site/components/switch/demo/disabled.md","directory":"components/switch/demo","filename":"disabled","meta":{"title":"禁用","description":"\n","order":"1","filepath":"site/components/switch/demo/disabled.md","filename":"disabled","directory":"components/switch/demo","id":"components-switch-demo-disabled","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n \"div\",\n { style: {\n padding: 10\n }\n },\n React.createElement(_uxcore.Switch, {\n checkedChildren: \"\\u663E\\u793A\",\n unCheckedChildren: \"\\u9690\\u85CF\",\n disabled: true\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-switch-demo-disabled'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Switch } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">padding:</span> <span class=\"hljs-attribute\">10</span>,\n }}\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Switch</span>\n <span class=\"hljs-attribute\">checkedChildren</span>=<span class=\"hljs-value\">\"显示\"</span>\n <span class=\"hljs-attribute\">unCheckedChildren</span>=<span class=\"hljs-value\">\"隐藏\"</span>\n <span class=\"hljs-attribute\">disabled</span>\n /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>\n, document.getElementById('components-switch-demo-disabled'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"受控","id":"components-switch-demo-control","tags":[],"filepath":"site/components/switch/demo/control.md","directory":"components/switch/demo","filename":"control","meta":{"title":"受控","description":"\n","order":"2","filepath":"site/components/switch/demo/control.md","filename":"control","directory":"components/switch/demo","id":"components-switch-demo-control","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require(\"uxcore\");\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n checked: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n \"div\",\n {\n style: {\n padding: 10\n }\n },\n React.createElement(_uxcore.Switch, {\n checked: this.state.checked,\n checkedChildren: \"\\u663E\\u793A\",\n unCheckedChildren: \"\\u9690\\u85CF\",\n onChange: function onChange() {\n _this2.setState({\n checked: !_this2.state.checked\n });\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-switch-demo-control'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Switch } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n checked: <span class=\"hljs-literal\">false</span>,\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">padding:</span> <span class=\"hljs-attribute\">10</span>,\n }}\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Switch</span>\n <span class=\"hljs-attribute\">checked</span>=<span class=\"hljs-value\">{this.state.checked}</span>\n <span class=\"hljs-attribute\">checkedChildren</span>=<span class=\"hljs-value\">\"显示\"</span>\n <span class=\"hljs-attribute\">unCheckedChildren</span>=<span class=\"hljs-value\">\"隐藏\"</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{()</span> =></span> {\n this.setState({\n checked: !this.state.checked,\n });\n }}\n />\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>\n, document.getElementById('components-switch-demo-control'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"加载状态","id":"components-switch-demo-loading","tags":[],"filepath":"site/components/switch/demo/loading.md","directory":"components/switch/demo","filename":"loading","meta":{"title":"加载状态","description":"\n","order":"3","filepath":"site/components/switch/demo/loading.md","filename":"loading","directory":"components/switch/demo","id":"components-switch-demo-loading","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n checked: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n {\n style: {\n padding: 10\n }\n },\n React.createElement(_uxcore.Switch, {\n loading: this.state.loading,\n checked: this.state.checked,\n onChange: function onChange(checked) {\n _this2.setState({\n loading: true\n });\n setTimeout(function () {\n _this2.setState({\n checked: checked,\n loading: false\n });\n }, 2000);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-switch-demo-loading'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Switch } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n checked: <span class=\"hljs-literal\">false</span>,\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">padding:</span> <span class=\"hljs-attribute\">10</span>,\n }}\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Switch</span>\n <span class=\"hljs-attribute\">loading</span>=<span class=\"hljs-value\">{this.state.loading}</span>\n <span class=\"hljs-attribute\">checked</span>=<span class=\"hljs-value\">{this.state.checked}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{(checked)</span> =></span> {\n this.setState({\n loading: true,\n });\n setTimeout(() => {\n this.setState({\n checked,\n loading: false,\n });\n }, 2000);\n }}\n />\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>, document.getElementById('components-switch-demo-loading'));</span></code></pre></div>"},"status":"public","toc":""}]
import { Switch } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div style={{
padding: 10,
}}
>
<Switch checkedChildren="显示" unCheckedChildren="隐藏" disabled={false} />
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-switch-demo-basic'));import { Switch } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div
style={{
padding: 10,
}}
>
<Switch checkedChildren="" unCheckedChildren="" className="kuma-switch-no-text" disabled={false} />
</div>
);
}
}
ReactDOM.render(
<Demo />, document.getElementById('components-switch-demo-small'));import { Switch } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div style={{
padding: 10,
}}
>
<Switch
checkedChildren="显示"
unCheckedChildren="隐藏"
disabled
/>
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-switch-demo-disabled'));import { Switch } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
}
render() {
return (
<div
style={{
padding: 10,
}}
>
<Switch
checked={this.state.checked}
checkedChildren="显示"
unCheckedChildren="隐藏"
onChange={() => {
this.setState({
checked: !this.state.checked,
});
}}
/>
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-switch-demo-control'));import { Switch } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
}
render() {
return (
<div
style={{
padding: 10,
}}
>
<Switch
loading={this.state.loading}
checked={this.state.checked}
onChange={(checked) => {
this.setState({
loading: true,
});
setTimeout(() => {
this.setState({
checked,
loading: false,
});
}, 2000);
}}
/>
</div>
);
}
}
ReactDOM.render(
<Demo />, document.getElementById('components-switch-demo-loading'));Props
| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
|---|---|---|---|---|
| prefixCls | string | optional | 'kuma-switch' | 类名前缀 |
| className | string | optional | - | 额外类名 |
| checked | boolean | optional | false | 是否被选中 |
| defaultChecked | boolean | optional | false | 非受限模式 |
| onChange | Function(checked) | required | 变化时发生 | |
| checkedChildren | string | optional | - | 选中时的文案 |
| unCheckedChildren | string | optional | - | 未选中时的文案 |
