Skip to content

Commit f712014

Browse files
author
liyuan-meng
committed
合并 Checkbox 和 ComplexCheckbox demo
1 parent eba0ad6 commit f712014

6 files changed

Lines changed: 104 additions & 88 deletions

File tree

src/components/complex-checkbox/demos/basic.md renamed to src/components/checkbox/complexDemos/basic.md

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function ComplexCheckboxDemo() {
1919
);
2020
return (
2121
<div>
22-
<div style={{ marginBottom: 24 }}>基础+说明</div>
22+
<h5>基础+说明</h5>
2323
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
2424
<ComplexCheckbox
2525
title="标题"
@@ -42,7 +42,7 @@ export default function ComplexCheckboxDemo() {
4242
disabled
4343
/>
4444
</Checkbox.Group>
45-
<div style={{ marginBottom: 24, marginTop: 40 }}>基础+头像</div>
45+
<h5>基础+头像</h5>
4646
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
4747
<ComplexCheckbox
4848
title="标题"
@@ -65,7 +65,7 @@ export default function ComplexCheckboxDemo() {
6565
disabled
6666
/>
6767
</Checkbox.Group>
68-
<div style={{ marginBottom: 24, marginTop: 40 }}>基础+头像+说明</div>
68+
<h5>基础+头像+说明</h5>
6969
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
7070
<ComplexCheckbox
7171
title="标题"
@@ -92,56 +92,6 @@ export default function ComplexCheckboxDemo() {
9292
defaultChecked
9393
/>
9494
</Checkbox.Group>
95-
<div style={{ marginBottom: 24, marginTop: 40 }}>基础卡片</div>
96-
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
97-
<ComplexCheckbox
98-
title="标题"
99-
type="card"
100-
/>
101-
<ComplexCheckbox
102-
title="标题"
103-
defaultChecked
104-
type="card"
105-
/>
106-
<ComplexCheckbox
107-
title="标题"
108-
disabled
109-
type="card"
110-
/>
111-
<ComplexCheckbox
112-
title="标题"
113-
type="card"
114-
defaultChecked
115-
disabled
116-
/>
117-
</Checkbox.Group>
118-
<div style={{ marginBottom: 24, marginTop: 40 }}>基础卡片+说明</div>
119-
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
120-
<ComplexCheckbox
121-
title="标题"
122-
type="card"
123-
content={checkCon}
124-
/>
125-
<ComplexCheckbox
126-
title="标题"
127-
type="card"
128-
content={checkCon}
129-
defaultChecked
130-
/>
131-
<ComplexCheckbox
132-
title="标题"
133-
type="card"
134-
content={checkCon}
135-
disabled
136-
/>
137-
<ComplexCheckbox
138-
title="标题"
139-
type="card"
140-
content={checkCon}
141-
defaultChecked
142-
disabled
143-
/>
144-
</Checkbox.Group>
14595
</div>
14696
);
14797
}

‎src/components/checkbox/complexDemos/card.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
order: 1
3+
title: ComplexCheckboxbox
4+
desc: 默认样式
5+
---
6+
7+
```jsx
8+
import React, { useState, useEffect } from 'react';
9+
import { ComplexCheckbox, Checkbox, Button } from 'cloud-react';
10+
11+
export default function ComplexCheckboxDemo() {
12+
const [disabled, setDisabled] = useState(false);
13+
const [imgSrc] = useState('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png')
14+
const checkCon = (
15+
<>
16+
<p>路漫漫其修远兮，吾将上下而求索</p>
17+
<p>长太息以掩涕兮，哀民生之多艰</p>
18+
</>
19+
);
20+
return (
21+
<div>
22+
<h5>基础卡片</h5>
23+
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
24+
<ComplexCheckbox
25+
title="标题"
26+
type="card"
27+
/>
28+
<ComplexCheckbox
29+
title="标题"
30+
defaultChecked
31+
type="card"
32+
/>
33+
<ComplexCheckbox
34+
title="标题"
35+
disabled
36+
type="card"
37+
/>
38+
<ComplexCheckbox
39+
title="标题"
40+
type="card"
41+
defaultChecked
42+
disabled
43+
/>
44+
</Checkbox.Group>
45+
<h5>基础卡片+说明</h5>
46+
<Checkbox.Group layout="h" style={{ rowGap: 20 }}>
47+
<ComplexCheckbox
48+
title="标题"
49+
type="card"
50+
content={checkCon}
51+
/>
52+
<ComplexCheckbox
53+
title="标题"
54+
type="card"
55+
content={checkCon}
56+
defaultChecked
57+
/>
58+
<ComplexCheckbox
59+
title="标题"
60+
type="card"
61+
content={checkCon}
62+
disabled
63+
/>
64+
<ComplexCheckbox
65+
title="标题"
66+
type="card"
67+
content={checkCon}
68+
defaultChecked
69+
disabled
70+
/>
71+
</Checkbox.Group>
72+
</div>
73+
);
74+
}
75+
```

‎src/components/checkbox/demos/group.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function RadioDemo() {
3939

4040
return (
4141
<div>
42-
<h3>纵向布局-最多可选两项</h3>
42+
<h5>纵向布局-最多可选两项</h5>
4343
<div style={{ display: 'inline-flex', flexDirection: 'column', gap: 16 }}>
4444
<Checkbox checked={checked} indeterminate={indeterminate} onChange={handleCheckAll}>
4545
check all
@@ -51,7 +51,7 @@ export default function RadioDemo() {
5151
</Checkbox.Group>
5252
</div>
5353

54-
<h3>横向布局</h3>
54+
<h5>横向布局</h5>
5555
<div style={{ display: 'inline-flex', gap: 16 }}>
5656
<Checkbox checked={checked} indeterminate={indeterminate} onChange={handleCheckAll}>
5757
check all

‎src/components/checkbox/demos/layout.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function RadioDemo() {
2525
];
2626
return (
2727
<div>
28-
<h3>纵向布局</h3>
28+
<h5>纵向布局</h5>
2929
<Checkbox.Group layout={'v'} style={{ gap: 16 }}>
3030
<Checkbox value={1} defaultChecked={true}>
3131
item 1
@@ -36,7 +36,7 @@ export default function RadioDemo() {
3636
</Checkbox>
3737
<Checkbox value={4}>item 4</Checkbox>
3838
</Checkbox.Group>
39-
<h3>横向布局</h3>
39+
<h5>横向布局</h5>
4040
<Checkbox.Group layout={'h'}>
4141
{list.map(item => (
4242
<Checkbox key={item.value} {...item}>

‎src/components/checkbox/index.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,36 @@ group:
3737
| layout | 定义 checkbox 横向布局(h: 横向布局; v: 竖向布局) | string | 'h' |
3838
| onChange | 变化时回调函数 | Function(e:Event) | -- |
3939

40+
#### ComplexCheckbox
41+
42+
| 属性 | 说明 | 类型 | 默认值 |
43+
| -------------- | ----------------------- | ----------------- | ------ |
44+
| content | 内容 | string ｜ number | '' |
45+
| title | 标题 | string | '' |
46+
| imgSrc | 图片 | string | '' |
47+
| textOverflowEllipsis | content 超长显示 ... | boolean | false |
48+
| contentStyle | content 样式，设置 textOverflowEllipsis 为 true 的时候，需要设置 content 的宽度 | object | {} |
49+
| type | 显示类型 | "card"\| "default" | "default" |
50+
4051
### 代码演示
4152

53+
### 基础 Checkbox
4254
<embed src="@components/checkbox/demos/basic-checkbox.md" />
4355

56+
### 受控 Checkbox
4457
<embed src="@components/checkbox/demos/controlled.md" />
4558

59+
### 复杂 CheckboxGroup
4660
<embed src="@components/checkbox/demos/group.md" />
4761

62+
### 布局
4863
<embed src="@components/checkbox/demos/layout.md" />
4964

65+
### 限制勾选数量
5066
<embed src="@components/checkbox/demos/max.md" />
67+
68+
### 复杂 Checkbox
69+
<embed src="@components/checkbox/complexDemos/basic.md" />
70+
71+
### 卡片式 Checkbox
72+
<embed src="@components/checkbox/complexDemos/card.md" />

‎src/components/complex-checkbox/index.md‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)