@cainiaofe/cn-ui-m
Version:
53 lines (52 loc) • 2.54 kB
JavaScript
import * as React from 'react';
import { CnButton, CnCheckbox, CnCheckboxGroup, CnDemoPage, } from "../../..";
export var 多选框组 = function () {
var _a = React.useState(['1', '3', '4']), groupValue = _a[0], setGroupValue = _a[1];
var _b = React.useState(['apple']), fruits = _b[0], setFruits = _b[1];
var onValueChange = function (value) {
console.log(value);
setGroupValue(value);
};
return (React.createElement(CnDemoPage, { title: "\u591A\u9009\u6846\u7EC4" },
React.createElement("div", null,
React.createElement("h2", null, "\u591A\u9009\u6846\u7EC4"),
React.createElement("div", null,
React.createElement(CnCheckbox, { indeterminate: groupValue.length > 0 && groupValue.length < 5, checked: groupValue.length === 5, onChange: function (value) {
setGroupValue(value ? ['1', '2', '3', '4', '5'] : []);
} }, "\u5168\u9009"),
React.createElement(CnCheckboxGroup, { value: groupValue, dataSource: [
{
label: '选项 1',
value: '1',
},
{
label: '选项 2',
value: '2',
},
{
label: '选项 3',
value: '3',
},
{
label: '选项 4',
value: '4',
},
{
label: '选项 5',
value: '5',
},
], onChange: function (v) {
onValueChange(v);
} })),
React.createElement("div", null,
"\u5F53\u524D\u503C: ",
groupValue.join(' ') || '空')),
React.createElement("div", null,
React.createElement("h2", null, "\u53D7\u63A7"),
React.createElement(CnCheckboxGroup, { value: fruits, direction: "hoz", dataSource: ['apple', 'banana', 'cherry'] }),
React.createElement("div", null,
React.createElement(CnButton, { type: "secondary", onClick: function () {
setFruits(['banana', 'cherry']);
} }, "\u9009\u4E2D [banana,cherry]")))));
};
export default { title: 'demo/CnCheckbox' };