@aliretail/react-materials-components
Version:
97 lines (92 loc) • 2.6 kB
Markdown
---
title: CheckboxGroup
order: 101
---
| 拓展字段 | 类型 | 默认值 | 备注 |
| :---------- | :------- | :----- | :------------------------------------------------------- |
| limitStrLen | `number` | - | 截断多长的内容的 label 展示值，然后 hover 展示全 tips 的 |
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { CheckboxGroup, SchemaForm, SchemaMarkupField: Field, createFormActions } = FormComponents;
const App = () => {
return (
<SchemaForm
components={{
CheckboxGroup,
}}
defaultValue={{
readOnly: ['2'],
isPreview: ['1', '2'],
}}
onChange={console.log}
>
<Field
x-component="CheckboxGroup"
x-component-props={{
limitStrLen: 4,
}}
title="Simple Checkbox"
name="Checkbox"
enum={[
'苹果是绿色的',
'香蕉是红色的',
'草莓是黑色的',
'樱桃是白色的',
'苹果是绿色的1',
'香蕉是红色的1',
'草莓是黑色的1',
'樱桃是白色的1',
'苹果是绿色的2',
'香蕉是红色的2',
'草莓是黑色的2',
'樱桃是白色的2',
'苹果是绿色的3',
'香蕉是红色的3',
'草莓是黑色的3',
'樱桃是白色的3',
]}
/>
<Field
x-component="CheckboxGroup"
title="CheckboxGroup"
name="CheckboxGroup"
enum={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' },
]}
/>
<Field
x-component="CheckboxGroup"
title="readOnly"
name="readOnly"
readOnly
enum={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' },
]}
/>
<Field
x-component="CheckboxGroup"
title="isPreview"
name="isPreview"
x-component-props={{
isPreview: true,
}}
enum={[
{ label: 'One', value: '1' },
{ label: 'Two', value: '2' },
{ label: 'Three', value: '3' },
{ label: 'Four', value: '4' },
]}
/>
</SchemaForm>
);
};
ReactDOM.render(<App />, mountNode);
```