@alicloud/console-components
Version:
Alibaba Cloud React Components
35 lines (34 loc) • 1.21 kB
JavaScript
/**
* title: "带描述的多选框"
* description: "使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的children添加描述"
*/
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
var List = [
{
label: '文本信息',
value: 'A',
},
{
label: '文本信息',
value: 'B',
},
{
label: '文本信息',
value: 'C',
disabled: true,
},
];
var itemStyle = {
marginLeft: '24px',
color: '#808080',
display: 'inline-block',
lineHeight: '16px',
};
export default (function () {
var _a = useState([]), checkedList = _a[0], setCheckedList = _a[1];
return (React.createElement(Checkbox.Group, { value: checkedList, direction: "ver", onChange: setCheckedList }, List.map(function (item) { return (React.createElement(Checkbox, { value: item.value, disabled: item.disabled },
item.label,
React.createElement("br", null),
React.createElement("span", { style: itemStyle }, "\u5BF9\u4E8E\u9009\u9879\u7684\u63CF\u8FF0/\u89E3\u91CA\u6587\u6848\uFF0C\u5BF9\u4E8E\u9009\u9879\u7684\u63CF\u8FF0/\u89E3\u91CA\u6587\u6848"))); })));
});