📌 [示例代码改造] 使用Space组件替换示例代码

[uyarn]

这个功能解决了什么问题

说明

1. 使用Space组件替换 example中组件的示例代码，减少手动写的用于纵向、横向对齐的样式代码，并尽可能保持样式不变，文档持续更新 可参考此PR - https://github.com/Tencent/tdesign-vue/pull/1309
2. 参与贡献请在此 issue 中评论领取的组件
3. 领取后请在两周内提交代码，过程中发现组件问题可以提 issue 或在 PR 中修复

组件

基础

• [x] Button @YuhangLike https://github.com/Tencent/tdesign-vue/pull/1334
• [x] Icon @Isabella327 https://github.com/Tencent/tdesign-vue/pull/1343
• [x] Link @zhangpaopao0609 https://github.com/Tencent/tdesign-vue/pull/1376

布局

• [x] Divider @Isabella327 https://github.com/Tencent/tdesign-vue/pull/1343
• [ ] Grid
• [x] Layout @vegetalbirddd https://github.com/Tencent/tdesign-vue/pull/1517
• [x] Space

导航

• [ ] Affix
• [ ] Anchor
• [x] Breadcrumb @Isabella327 https://github.com/Tencent/tdesign-vue/pull/1343
• [ ] Dropdown
• [ ] Pagination
• [x] Steps @sechi747 https://github.com/Tencent/tdesign-vue/pull/1394
• [x] Tabs @yangchao987 https://github.com/Tencent/tdesign-vue/pull/1471

输入

• [x] Cascader @pengYYYYY https://github.com/Tencent/tdesign-vue/pull/1457
• [x] Checkbox @Summer-Shen https://github.com/Tencent/tdesign-vue/pull/1485
• [x] ColorPicker @Summer-Shen https://github.com/Tencent/tdesign-vue/pull/1485
• [x] DatePicker @Summer-Shen https://github.com/Tencent/tdesign-vue/pull/1485
• [x] Form @Summer-Shen https://github.com/Tencent/tdesign-vue/pull/1368
• [ ] Input
• [x] InputNumber https://github.com/Tencent/tdesign-vue/pull/1284
• [ ] InputAdornment
• [x] Radio @yangchao987 https://github.com/Tencent/tdesign-vue/pull/1375
• [ ] RangeInput
• [x] Select https://github.com/Tencent/tdesign-vue/pull/1309
• [ ] SelectInput
• [ ] Slider
• [x] Switch @Isabella327 https://github.com/Tencent/tdesign-vue/pull/1343
• [x] TagInput https://github.com/Tencent/tdesign-vue/pull/1531
• [ ] Textarea
• [ ] Transfer
• [x] TimePicker https://github.com/Tencent/tdesign-vue/pull/1475
• [ ] TreeSelect
• [ ] Upload (先别认领)

数据展示

• [x] Avatar @jiazengp https://github.com/Tencent/tdesign-vue/pull/1350
• [x] Badge @sechi747 https://github.com/Tencent/tdesign-vue/pull/1381
• [ ] Calendar
• [x] Card https://github.com/Tencent/tdesign-vue/pull/1531
• [ ] Collapse
• [ ] Comment
• [ ] List
• [x] Loading @sechi747 https://github.com/Tencent/tdesign-vue/pull/1394
• [x] Progress @sechi747 https://github.com/Tencent/tdesign-vue/pull/1394
• [ ] Skeleton
• [ ] Swiper
• [ ] Table
• [ ] Tag
• [ ] Tooltip
• [x] Tree @lmmlala https://github.com/Tencent/tdesign-vue/pull/1406

消息提醒

• [x] Alert @royal-cc https://github.com/Tencent/tdesign-vue/pull/1393
• [x] Dialog @mark1307779 https://github.com/Tencent/tdesign-vue/pull/1333
• [ ] Drawer
• [x] Message @code-x2022 https://github.com/Tencent/tdesign-vue/pull/1455
• [x] Notification @sechi747 https://github.com/Tencent/tdesign-vue/pull/1394
• [ ] PopConfirm
• [x] Popup https://github.com/Tencent/tdesign-vue/pull/1380

[jiazengp]

领取 avatar @uyarn

[mark1307779]

领取dialog @uyarn

[Tomaolala]

领取button @uyarn

[Summer-Shen]

领取 Form @uyarn

[lmmlala]

@uyarn 领取 Tree

[yangchao987]

@uyarn 领取Radio

[royal-cc]

领取Alert @uyarn

[zhangpaopao0609]

领取 Link @uyarn

[yangchao987]

@uyarn 领取 tabs

[sechi747]

领取 Badge @uyarn

[sechi747]

领取 Steps, Loading, Progress, Notification @uyarn

[Summer-Shen]

再领取一下 Cascader, Checkbox, ColorPicker 和 DatePicker @uyarn

[code-x2022]

领取Message @uyarn

[uyarn]

Attention: 由于最近目录结构调整 example目录统一到各个组件内 有领取任务并在之前拉取代码的朋友请rebase下upstream代码再继续完成：）

[vegetalbirddd]

领取layout

[uyarn]

Input/SelectInput/RangeInput/TreeSelect/Collapse/Anchor/Calendar/Drawer/ List/InputAdornment/ Skeleton/Slider/ Tag/Textarea

• https://github.com/Tencent/tdesign-vue/pull/1674

[uyarn]

DEMO改造已完成 谢谢参与这个issue的contributors :)