Skip to content

Commit eba0ad6

Browse files
author
liyuan-meng
committed
合并 Radio 和 ComplexRadio demo
1 parent 9436309 commit eba0ad6

7 files changed

Lines changed: 209 additions & 135 deletions

File tree

‎src/components/complex-radio/demos/basic.md‎

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

‎src/components/complex-radio/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function ComplexRadio(props) {
1515
content,
1616
textOverflowEllipsis,
1717
contentStyle,
18+
titleStyle,
1819
type,
1920
borderRadiusSize,
2021
...otherProps
@@ -39,7 +40,7 @@ export default function ComplexRadio(props) {
3940
>
4041
{imgSrc && <img alt="header" src={imgSrc} />}
4142
<div>
42-
{title && <p className={`${classSelector}-title`}>{title}</p>}
43+
{title && <p className={`${classSelector}-title`} style={titleStyle}>{title}</p>}
4344
{content
4445
&& (textOverflowEllipsis ? (
4546
<Tooltip content={content}>
@@ -66,6 +67,7 @@ ComplexRadio.propTypes = {
6667
title: PropTypes.string,
6768
textOverflowEllipsis: PropTypes.bool,
6869
contentStyle: PropTypes.object,
70+
titleStyle: PropTypes.object,
6971
type: PropTypes.string,
7072
disabled: PropTypes.bool,
7173
checked: PropTypes.bool,
@@ -81,6 +83,7 @@ ComplexRadio.defaultProps = {
8183
title: '',
8284
textOverflowEllipsis: false,
8385
contentStyle: {},
86+
titleStyle: {},
8487
type: 'default',
8588
disabled: false,
8689
checked: false,

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

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

‎src/components/radio/complexDemos/basic.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
order: 1 title: ComplexRadio desc: 默认样式
3+
---
4+
5+
```jsx
6+
import React, { useState, useEffect } from 'react';
7+
import { ComplexRadio, Radio, Button } from 'cloud-react';
8+
9+
export default function ComplexRadioDemo() {
10+
const [value, setValue] = useState();
11+
12+
const onChange = (value) => {
13+
console.log('AAAA', value);
14+
setValue(value);
15+
};
16+
17+
return (
18+
<div>
19+
<div>
20+
<h5>标题+头像</h5>
21+
<ComplexRadio
22+
titleStyle={{ minWidth: 'fit-content' }}
23+
title="单选文字"
24+
imgSrc="https://brand-guide.shuyun.com/IAM/52e939494f3b.png"
25+
value="A"
26+
/>
27+
</div>
28+
<div>
29+
<h5>标题+说明</h5>
30+
<ComplexRadio
31+
titleStyle={{ minWidth: 'fit-content' }}
32+
title="单选文字"
33+
content="说明文案"
34+
value="A"
35+
/>
36+
</div>
37+
<div>
38+
<h5>标题+说明+头像</h5>
39+
<ComplexRadio
40+
titleStyle={{ minWidth: 'fit-content' }}
41+
title="单选文字"
42+
content="说明文案"
43+
value="A"
44+
imgSrc="https://brand-guide.shuyun.com/IAM/52e939494f3b.png"
45+
/>
46+
</div>
47+
</div>
48+
);
49+
}
50+
```

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
order: 1 title: ComplexRadio desc: 默认样式
3+
---
4+
5+
```jsx
6+
import React, { useState, useEffect } from 'react';
7+
import { ComplexRadio, Radio, Button } from 'cloud-react';
8+
9+
export default function ComplexRadioDemo() {
10+
const [value, setValue] = useState();
11+
const radioList = [
12+
{ label: '单选文字', value: 'A', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
13+
{ label: '单选文字', value: 'B', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
14+
{ label: '单选文字', value: 'C', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
15+
{ label: '单选文字', value: 'D', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
16+
{ label: '单选文字', value: 'E', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' }
17+
];
18+
19+
const onChange = (value) => {
20+
console.log('AAAA', value);
21+
setValue(value);
22+
};
23+
24+
return (
25+
<div>
26+
<div>
27+
<h5>基础卡片</h5>
28+
<Radio.Group value={value} defaultValue={"E"} onChange={onChange} horizontal style={{ flexWrap: 'wrap' }}>
29+
{radioList.map((item, index) => (
30+
<ComplexRadio
31+
title={item.label}
32+
value={item.value}
33+
type="card"
34+
disabled={index > 3}
35+
/>
36+
))}
37+
</Radio.Group>
38+
</div>
39+
<div>
40+
<h5>基础卡片 + 说明</h5>
41+
<Radio.Group value={value} defaultValue={"E"} onChange={onChange} vertical>
42+
{radioList.map((item, index) => (
43+
<ComplexRadio
44+
title={item.label}
45+
content={item.content}
46+
value={item.value}
47+
type="card"
48+
disabled={index > 3}
49+
/>
50+
))}
51+
</Radio.Group>
52+
</div>
53+
</div>
54+
);
55+
}
56+
```

‎src/components/radio/complexDemos/group.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
order: 1 title: ComplexRadio desc: 默认样式
3+
---
4+
5+
```jsx
6+
import React, { useState, useEffect } from 'react';
7+
import { ComplexRadio, Radio, Button } from 'cloud-react';
8+
9+
export default function ComplexRadioDemo() {
10+
const [value, setValue] = useState();
11+
const radioList = [
12+
{ label: '单选文字', value: 'A', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
13+
{ label: '单选文字', value: 'B', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
14+
{ label: '单选文字', value: 'C', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
15+
{ label: '单选文字', value: 'D', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' },
16+
{ label: '单选文字', value: 'E', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案' }
17+
];
18+
19+
const onChange = (value) => {
20+
console.log('AAAA', value);
21+
setValue(value);
22+
};
23+
24+
return (
25+
<div style={{ display: 'flex', justifyContent: 'space-around', flexWrap: "wrap" }}>
26+
<div>
27+
<h5>标题+头像</h5>
28+
<Radio.Group vertical value={value} defaultValue={"E"} onChange={onChange}>
29+
{radioList.map((item, index) => (
30+
<ComplexRadio
31+
title={item.label}
32+
imgSrc={item.imgSrc}
33+
value={item.value}
34+
disabled={index > 3}
35+
/>
36+
))}
37+
</Radio.Group>
38+
</div>
39+
<div>
40+
<h5>标题+说明</h5>
41+
<Radio.Group vertical value={value} defaultValue={"E"} onChange={onChange}>
42+
{radioList.map((item, index) => (
43+
<ComplexRadio
44+
title={item.label}
45+
content={item.content}
46+
value={item.value}
47+
disabled={index > 3}
48+
/>
49+
))}
50+
</Radio.Group>
51+
</div>
52+
<div>
53+
<h5>标题+说明+头像</h5>
54+
<Radio.Group vertical value={value} defaultValue={"E"} onChange={onChange}>
55+
{radioList.map((item, index) => (
56+
<ComplexRadio
57+
title={item.label}
58+
content={item.content}
59+
value={item.value}
60+
imgSrc={item.imgSrc}
61+
disabled={index > 3}
62+
/>
63+
))}
64+
</Radio.Group>
65+
</div>
66+
</div>
67+
);
68+
}
69+
```

‎src/components/radio/index.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,43 @@ group:
3535
| disabled | 是否禁用 | boolean | false |
3636
| desc | 单选提示 | string 或 React.node | null |
3737

38-
### 代码演示
38+
### API ComplexRadio
3939

40+
| 属性 | 说明 | 类型 | 默认值 |
41+
| -------------- | ----------------------- | ----------------- | ------ |
42+
| content | 内容 | string ｜ number | '' |
43+
| title | 标题 | string | '' |
44+
| imgSrc | 图片 | string | '' |
45+
| checked | 选中 | boolean | false |
46+
| disabled | 禁用 | boolean | false |
47+
| type | 显示类型 | "card" | "default" | "default"|
48+
| value | 当前 radio 对应的值 | any | -- |
49+
| textOverflowEllipsis | content 超长显示 ... | boolean | false |
50+
| contentStyle | content 样式，设置 textOverflowEllipsis 为 true 的时候，需要设置 content 的宽度 | object | {} |
51+
| titleStyle | title 样式 | object | {} |
52+
| borderRadiusSize | 圆角大小： `small`: 3px；`default`: 6px；`large`: 12px； | string | `default` |
53+
54+
55+
### 代码演示
56+
### 基础 Radio
4057
<embed src="@components/radio/demos/basic-radio.md" />
4158

4259
<embed src="@components/radio/demos/complex.md" />
4360

61+
### 禁用
4462
<embed src="@components/radio/demos/disabled.md" />
4563

64+
### 基础 RadioGroup
4665
<embed src="@components/radio/demos/group.md" />
4766

67+
### 布局
4868
<embed src="@components/radio/demos/layout.md" />
69+
70+
### 复杂 Radio
71+
<embed src="@components/radio/complexDemos/basic.md" />
72+
73+
### 复杂 RadioGroup
74+
<embed src="@components/radio/complexDemos/group.md" />
75+
76+
### 卡片式 Radio
77+
<embed src="@components/radio/complexDemos/card.md" />

0 commit comments

Comments
 (0)