Skip to content

Commit 0660acf

Browse files
chenshuai2144chenshuai2144
committed
feat(demos): Enhance card and table demos with detailed descriptions and user experience improvements
1 parent fb6e55c commit 0660acf

File tree

103 files changed

+11149
-1776
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+11149
-1776
lines changed

‎demos/card/CheckCard/avatar.tsx

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,63 @@ import { CheckCard } from '@ant-design/pro-components';
33
import { Avatar } from 'antd';
44

55
export default () => (
6-
<CheckCard
7-
title="示例标题"
8-
avatar={
9-
<Avatar
10-
style={{ backgroundColor: '#7265e6' }}
11-
icon={<UserOutlined />}
12-
size="large"
13-
/>
14-
}
15-
/>
6+
<>
7+
<CheckCard
8+
title="示例标题"
9+
avatar={
10+
<Avatar
11+
style={{ backgroundColor: '#7265e6' }}
12+
icon={<UserOutlined />}
13+
size="large"
14+
/>
15+
}
16+
/>
17+
18+
<div
19+
style={{
20+
marginTop: '20px',
21+
padding: '20px',
22+
backgroundColor: '#f5f5f5',
23+
borderRadius: '6px',
24+
}}
25+
>
26+
<h4>CheckCard Avatar Props 说明：</h4>
27+
<ul>
28+
<li>
29+
<strong>avatar</strong>: 卡片头像，可以是图片 URL 字符串或 React 节点
30+
</li>
31+
<li>
32+
<strong>title</strong>: 卡片标题
33+
</li>
34+
</ul>
35+
<h4>Avatar 组件 Props：</h4>
36+
<ul>
37+
<li>
38+
<strong>style</strong>: 头像样式对象，可以设置背景色等
39+
</li>
40+
<li>
41+
<strong>icon</strong>: 头像图标，可以是 Ant Design 图标组件
42+
</li>
43+
<li>
44+
<strong>size</strong>: 头像尺寸，可选值：'large' | 'default' | 'small'
45+
</li>
46+
<li>
47+
<strong>src</strong>: 头像图片地址（字符串形式）
48+
</li>
49+
</ul>
50+
<h4>Avatar 使用方式：</h4>
51+
<ul>
52+
<li>
53+
<strong>字符串</strong>: 直接传入图片 URL，如
54+
avatar="https://example.com/image.jpg"
55+
</li>
56+
<li>
57+
<strong>组件</strong>: 传入 Avatar 组件，可以自定义样式和图标
58+
</li>
59+
<li>
60+
<strong>图标</strong>: 使用 Ant Design 图标作为头像内容
61+
</li>
62+
</ul>
63+
</div>
64+
</>
1665
);

‎demos/card/CheckCard/basic.tsx

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,59 @@
22
import { CheckCard } from '@ant-design/pro-components';
33

44
export default () => (
5-
<CheckCard
6-
avatar="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
7-
title="示例一"
8-
description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。"
9-
onChange={(checked) => {
10-
console.log('checked', checked);
11-
}}
12-
defaultChecked
13-
onClick={() => {
14-
console.log('clicked');
15-
}}
16-
/>
5+
<>
6+
<CheckCard
7+
avatar="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
8+
title="示例一"
9+
description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。"
10+
onChange={(checked) => {
11+
console.log('checked', checked);
12+
}}
13+
defaultChecked
14+
onClick={() => {
15+
console.log('clicked');
16+
}}
17+
/>
18+
19+
<div
20+
style={{
21+
marginTop: '20px',
22+
padding: '20px',
23+
backgroundColor: '#f5f5f5',
24+
borderRadius: '6px',
25+
}}
26+
>
27+
<h4>CheckCard Props 说明：</h4>
28+
<ul>
29+
<li>
30+
<strong>avatar</strong>: 卡片头像，可以是图片 URL 或 React 节点
31+
</li>
32+
<li>
33+
<strong>title</strong>: 卡片标题，可以是字符串或 React 节点
34+
</li>
35+
<li>
36+
<strong>description</strong>: 卡片描述信息，可以是字符串或 React 节点
37+
</li>
38+
<li>
39+
<strong>onChange</strong>: 选中状态改变时的回调函数，参数为
40+
checked（布尔值）
41+
</li>
42+
<li>
43+
<strong>defaultChecked</strong>: 默认是否选中，布尔值
44+
</li>
45+
<li>
46+
<strong>onClick</strong>: 点击卡片时的回调函数
47+
</li>
48+
<li>
49+
<strong>checked</strong>: 受控的选中状态，布尔值
50+
</li>
51+
<li>
52+
<strong>disabled</strong>: 是否禁用，布尔值
53+
</li>
54+
<li>
55+
<strong>size</strong>: 卡片尺寸，可选值：'default' | 'small' | 'large'
56+
</li>
57+
</ul>
58+
</div>
59+
</>
1760
);

‎demos/card/CheckCard/compose.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,78 @@ export default () => (
2424
<CheckCard title="示例" />
2525
<h3>只有描述时</h3>
2626
<CheckCard description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。" />
27+
28+
<div
29+
style={{
30+
marginTop: '20px',
31+
padding: '20px',
32+
backgroundColor: '#f5f5f5',
33+
borderRadius: '6px',
34+
}}
35+
>
36+
<h4>CheckCard 属性组合说明：</h4>
37+
<ul>
38+
<li>
39+
<strong>avatar</strong>: 卡片头像，可以是图片 URL 或 React 节点
40+
</li>
41+
<li>
42+
<strong>title</strong>: 卡片标题，可以是字符串或 React 节点
43+
</li>
44+
<li>
45+
<strong>description</strong>: 卡片描述信息，可以是字符串或 React 节点
46+
</li>
47+
</ul>
48+
<h4>属性组合效果：</h4>
49+
<ul>
50+
<li>
51+
<strong>只有 avatar</strong>: 显示头像，适合图标展示
52+
</li>
53+
<li>
54+
<strong>avatar + description</strong>: 头像和描述组合，适合产品介绍
55+
</li>
56+
<li>
57+
<strong>title + description</strong>: 标题和描述组合，适合内容展示
58+
</li>
59+
<li>
60+
<strong>title + avatar</strong>: 标题和头像组合，适合品牌展示
61+
</li>
62+
<li>
63+
<strong>只有 title</strong>: 仅显示标题，适合简单标识
64+
</li>
65+
<li>
66+
<strong>只有 description</strong>: 仅显示描述，适合说明文字
67+
</li>
68+
</ul>
69+
<h4>布局特点：</h4>
70+
<ul>
71+
<li>
72+
<strong>自适应布局</strong>: 根据提供的属性自动调整布局
73+
</li>
74+
<li>
75+
<strong>内容居中</strong>: 单个属性时内容会自动居中显示
76+
</li>
77+
<li>
78+
<strong>响应式</strong>: 在不同屏幕尺寸下保持良好的显示效果
79+
</li>
80+
<li>
81+
<strong>灵活组合</strong>: 支持任意属性的组合使用
82+
</li>
83+
</ul>
84+
<h4>使用建议：</h4>
85+
<ul>
86+
<li>
87+
<strong>图标卡片</strong>: 使用只有 avatar 的组合
88+
</li>
89+
<li>
90+
<strong>产品卡片</strong>: 使用 avatar + title + description 组合
91+
</li>
92+
<li>
93+
<strong>内容卡片</strong>: 使用 title + description 组合
94+
</li>
95+
<li>
96+
<strong>品牌卡片</strong>: 使用 title + avatar 组合
97+
</li>
98+
</ul>
99+
</div>
27100
</>
28101
);

‎demos/card/CheckCard/custom.tsx

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,87 @@
11
import { CheckCard } from '@ant-design/pro-components';
22

33
export default () => (
4-
<CheckCard
5-
title="Card title"
6-
description="This is the description"
7-
style={{ width: 200, height: 200 }}
8-
/>
4+
<>
5+
<CheckCard
6+
title="Card title"
7+
description="This is the description"
8+
style={{ width: 200, height: 200 }}
9+
/>
10+
11+
<div
12+
style={{
13+
marginTop: '20px',
14+
padding: '20px',
15+
backgroundColor: '#f5f5f5',
16+
borderRadius: '6px',
17+
}}
18+
>
19+
<h4>CheckCard 自定义样式说明：</h4>
20+
<ul>
21+
<li>
22+
<strong>style</strong>: 自定义样式对象，可以覆盖默认样式
23+
</li>
24+
<li>
25+
<strong>title</strong>: 卡片标题
26+
</li>
27+
<li>
28+
<strong>description</strong>: 卡片描述信息
29+
</li>
30+
</ul>
31+
<h4>Style 属性说明：</h4>
32+
<ul>
33+
<li>
34+
<strong>width</strong>: 卡片宽度，可以是数字（像素）或字符串
35+
</li>
36+
<li>
37+
<strong>height</strong>: 卡片高度，可以是数字（像素）或字符串
38+
</li>
39+
<li>
40+
<strong>backgroundColor</strong>: 背景颜色
41+
</li>
42+
<li>
43+
<strong>border</strong>: 边框样式
44+
</li>
45+
<li>
46+
<strong>borderRadius</strong>: 圆角半径
47+
</li>
48+
<li>
49+
<strong>padding</strong>: 内边距
50+
</li>
51+
<li>
52+
<strong>margin</strong>: 外边距
53+
</li>
54+
</ul>
55+
<h4>自定义样式特点：</h4>
56+
<ul>
57+
<li>
58+
<strong>优先级</strong>: style 属性会覆盖组件的默认样式
59+
</li>
60+
<li>
61+
<strong>响应式</strong>: 可以使用媒体查询实现响应式样式
62+
</li>
63+
<li>
64+
<strong>主题适配</strong>: 可以结合 CSS 变量实现主题切换
65+
</li>
66+
<li>
67+
<strong>灵活控制</strong>: 可以精确控制卡片的尺寸和外观
68+
</li>
69+
</ul>
70+
<h4>使用建议：</h4>
71+
<ul>
72+
<li>
73+
<strong>固定尺寸</strong>: 使用 width 和 height 设置固定尺寸
74+
</li>
75+
<li>
76+
<strong>百分比布局</strong>: 使用百分比值实现响应式布局
77+
</li>
78+
<li>
79+
<strong>主题定制</strong>: 结合 CSS 变量实现主题定制
80+
</li>
81+
<li>
82+
<strong>动画效果</strong>: 可以添加 transition 等动画效果
83+
</li>
84+
</ul>
85+
</div>
86+
</>
987
);

0 commit comments

Comments
 (0)