Skip to content

Commit

Permalink
chore: resolve conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
novlan1 committed Aug 22, 2023
2 parents e1ede3b + 8fa937b commit 12fe712
Show file tree
Hide file tree
Showing 129 changed files with 1,722 additions and 887 deletions.
179 changes: 179 additions & 0 deletions docs/miniprogram/design/icon.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@


### 栅格规范
以16*16px 的尺寸作为图标绘制的统一栅格尺寸

![202111111](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111111.png)

绘制时应尽量对齐像素点,最大程度上保证图标的清晰度。

![202111112](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111112.png)

在处理一些对称图形时居中处理,不应为了对齐栅格而打破画面平衡

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111115.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111114.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

### 画布与辅助线
T-Design 图标的设计上实际画布应控制在栅格中心14*14px的区域,周围留有1px的出血。
在一些特殊情况下如 icon 过长或者有突出的边角等,允许内容适当延展,以确保图标视觉重量上的统一

![202111116](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111116.png)

在制作时应尽量根据辅助线进行绘制以保持各图标间视觉重量的统一

![202111113](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111113.png)

根据绘制对象的形象特征去选择辅助线,在必要时,可以将内容扩展到辅助线之外

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111119.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111118.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

在绘制一些具有指向性的图标时,建议在其指引的方向多预留 0.25px 的空间,以便平衡画面

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111111.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111110.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111113.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111112.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

### 线条
绘制时建议使用1px宽度的笔画

![202111117](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111117.png)

在特殊情况下如复合图形,由于该类图标结构更为复杂,线条的粗细可以适当调整

![2021111114](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111114.png)

在处理长线线条的长度时建议使用 2 的倍数,这样更易进行对称处理。而短线上建议使用 3 个像素

![2021111115](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111115.png)

线段末端直角处理,但在表现一些文字类图形或带有三维空间的透视图形时应与栅格相切

![2021111116](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111116.png)

### 圆角
保持1px的外圆角,内角无圆角

![2021111117](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111117.png)

在处理“箭头”等具有方向性的标记时,在其顶端应采用 0.5px 的圆角,以便于突出其指向性

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111119.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111118.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

### 角度
线条如需倾斜最好与栅格内 45° 辅助线相平行,或使用 15° 的倍数

![2021111120](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111120.png)

不仅要注意图形部分的夹角,也要特别关注一些负形的夹角度数

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111122.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111121.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>
</div>

### 断口
需起到平衡视觉重量的作用 (最大宽度 ≤ 2px 且为 0.5px 的倍数)

![2021111123](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111123.png)

### 繁简度
在确保高识别度的情况下,寻求内部结构以及外部轮廓上的最简

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111125.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111124.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111127.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111126.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>

### 弧线
弧线处理优先遵循正圆/正圆局部拼接

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111129.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111128.png" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
</div>
</div>



33 changes: 19 additions & 14 deletions docs/mobile/api_v2/action-sheet.en-US.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
---
title: ActionSheet 动作面板
description: 由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。
title: ActionSheet
description: A specific type of modal popup triggered by a user action that presents a set of two or more options relevant to the current context.
spline: base
isComponent: true
toc: false
---

### 列表型
### List Type

列表选项为左右两端的列表;
选项为纯文字;
对于警示操作(如不可逆的破坏性操作),建议将更改操作放在最后并用红色标识。
列表型根据选择项内容的差异,可以有以下不同的样式
The list option is a list at the left and right ends;

Options are plain text;

For warning operations (such as irreversible destructive operations), it is recommended to put the change operation at the end and mark it in red.

The list type can have the following different styles according to the content of the selected items

{{ list }}

### 宫格型
### Grid Type

The panel runs through from left to right, and uses a grid structure of 3 or 4 columns according to the number of operations to make the menu content as full as possible.

Menu options are presented in the form of icons plus text.

面板左右贯通,根据操作数量使用 3 列或 4 列的宫格结构,尽量使菜单内容饱满。
菜单选项使用图标加文字的形式呈现。
菜单项的数量超过 8 个时,可作翻页处理。
When the number of menu items exceeds 8, it can be turned over.

{{ grid }}

### 宫格型-多页
### Grid Multiple

{{ grid-multiple }}

### 组件状态
### Component Status

{{ status }}

### 组件样式
### Component Style

{{ align }}
10 changes: 5 additions & 5 deletions docs/mobile/api_v2/badge.en-US.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
title: Badge 徽标
description: 用于告知用户,该区域的状态变化或者待处理任务的数量。
title: Badge
description: The Badge is used to notify the user of a state change in the area or the number of pending tasks.
spline: base
isComponent: true
toc: false
---

### 组件类型
### Badge Type

{{ base }}

### 组件样式
### Badge Style

{{ theme }}

### 组件尺寸
### Badge Size

{{ size }}
2 changes: 1 addition & 1 deletion docs/mobile/api_v2/button.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ The ghost button reverses the color of the button's content and makes the backgr

#### Banner Button

通栏按钮在宽度上充满其所在的父容器(无 padding margin 值)。该按钮常见于移动端和一些表单场景中。
The Block button fills its parent container in width (no padding and margin values). This button is commonly used in mobile and some form scenarios.

{{ block }}

Expand Down
18 changes: 9 additions & 9 deletions docs/mobile/api_v2/calendar.en-US.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
title: Calendar 日历
description: 按照日历形式展示数据或日期的容器。
title: Calendar
description: Container for displaying data or dates in a calendar format.
isComponent: true
usage: { title: '', description: '' }
spline: data
---

### 单个选择日期
### Select Single Date

{{ base }}

### 多个选择日期
### Select Multiple Date

{{ multiple }}

### 区间选择日期
### Select Date Range

{{ range }}

### 自定义文案
### Custom Text

{{ custom-text }}

### 自定义按钮
### Custom Button

{{ custom-button }}

### 自定义日期区间
### Custom Date Range

{{ custom-range }}
{{ custom-range }}
18 changes: 9 additions & 9 deletions docs/mobile/api_v2/cascader.en-US.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
title: Cascader 级联选择器
description: 用于多层级数据选择,主要为树形结构,可展示更多的数据。
title: Cascader
description: Cascader is used for multi-level data selection, mainly in a tree structure, which can display more data.
spline: base
isComponent: true
toc: false
---

## 代码演示
## Examples

### 基础用法
### Basic

{{ base }}

### 选项卡风格
### Tab Style

{{ theme-tab }}

### 进阶
### Advanced

#### 带初始值
#### Default value

{{ with-value }}

#### 自定义 keys
#### Customizing Data Field Aliases

{{ keys }}

#### 使用次级标题
#### Use Sub Title

{{ with-title }}
16 changes: 8 additions & 8 deletions docs/mobile/api_v2/cell.en-US.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
title: Cell 单元格
description: 用于各个类别行的信息展示。
title: Cell
description: Information display for each category row.
spline: base
isComponent: true
toc: false
---

### 组件类型
### Component type

#### 单行单元格
#### Single

{{ single }}

#### 多行单元格
#### Multiple

{{ multiple }}

### 样式
### Style

#### 卡片单元格
#### Card

{{ group }}
{{ group }}
Loading

0 comments on commit 12fe712

Please sign in to comment.