Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update mobile design #1711

Merged
merged 1 commit into from
Jan 19, 2024
Merged

chore: update mobile design #1711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/miniprogram/_design/ActionSheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@
##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-1.png" />
</div>


### 常见用法
##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-2.png" />
</div>

<hr />

##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet3.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-3.png" />
</div>


Expand All @@ -38,13 +38,13 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%204-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-4.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%204-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-5.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand All @@ -54,22 +54,22 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%205-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-6.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%205-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/action-sheet/action-sheet-7.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>



### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
| 组件名 | 何时使用 |
| :-------------------------- | :------------------------------------------------------------------------------------------- |
| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
18 changes: 9 additions & 9 deletions docs/miniprogram/_design/Badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%201-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-1.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%201-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-2.png" />
</div>
</div>

Expand All @@ -26,7 +26,7 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%202.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-3.png" />
</div>
</div>

Expand All @@ -37,11 +37,11 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%203-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-4.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%203-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-5.png" />
</div>
</div>

Expand All @@ -52,13 +52,13 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%204-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-6.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%204-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/badge/badge-7.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand Down
32 changes: 16 additions & 16 deletions docs/miniprogram/_design/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-1.png" />
<em></em>
</div>
</div>
Expand All @@ -23,19 +23,19 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-2.png" />
<em></em>
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-3.png" />
<em></em>
</div>
</div>

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-3.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-4.png" />
<em></em>
</div>
</div>
Expand All @@ -46,11 +46,11 @@
##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。
<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button3-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-5.png" />
<em></em>
</div>
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button3-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-6.png" />
<em></em>
</div>
</div>
Expand All @@ -62,22 +62,22 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button4-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-7.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button4-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/button/button-8.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>



### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 |
| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
| 组件名 | 何时使用 |
| :--------------------- | :---------------------------------------------------------- |
| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 |
| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
18 changes: 9 additions & 9 deletions docs/miniprogram/_design/Calendar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%201.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-1.png" />
</div>

### 推荐/慎用
Expand All @@ -20,13 +20,13 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%202-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-2.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%202-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-3.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand All @@ -36,13 +36,13 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%202-3.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-4.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%202-4.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/calendar/calendar-5.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand Down
20 changes: 10 additions & 10 deletions docs/miniprogram/_design/Cell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%201-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-1.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%201-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-2.png" />
</div>
</div>

Expand All @@ -22,7 +22,7 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%202.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-3.png" />
</div>
</div>

Expand All @@ -32,8 +32,8 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%203.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-4.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand All @@ -43,15 +43,15 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%204.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/cell/cell-5.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>



### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。|
| 组件名 | 何时使用 |
| :------------- | :--------------------------------------------------------------- |
| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。 |
22 changes: 11 additions & 11 deletions docs/miniprogram/_design/Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-1.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-1.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-2.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-2.png" />
</div>
</div>


### 推荐/慎用示例

##### 带有详情信息的选项，建议就近展开相关内容，不建议在触发一个弹窗。

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%202-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-3.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%202-2.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-4.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>

<hr />
Expand All @@ -41,15 +41,15 @@


<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%2003-1.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/mobile-guide/check-box/check-box-5.png" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>
</div>



### 相似组件

| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| 组件名 | 何时使用 |
| :---------------- | :--------------------------------------- |
| [单选框](./radio) | 当用户需要从一组数据选择一个选项时使用。 |
Loading
Loading