mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

site: redirect old docs

Browse Source
This commit is contained in:
Wei Zhu 2018-01-08 14:49:52 +08:00
parent 4e743ea051
commit 8d24100b23
17 changed files with 75 additions and 1026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/pattern/advanced-search.en-US.md
View File

@ -3,51 +3,6 @@ order: 6
title: Advanced Search
---
With Advanced Search, users can narrow down the range of complex lists / tables.
---
## Conventions
### Interaction
<img class="preview-img" align="right" alt="Interactive examples" description="While in a stowed state, a user clicks Advanced Search to expand search options; if the user has previously entered a query, it's a best practice to transfer the corresponding value to the input box." src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
Conventionally used with deep tables, suitable for search conditions as well as searching for a number of unknown values ​​within a range.
Advanced search is generally used by intermediate / expert users, typically by clicking advanced search. If you are displaying complex data, you can expand advanced search by default.
<br>
<img class="preview-img" align="right" alt="Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.' src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
When advanced search is hidden, you should display the search criteria and values when a value is entered.
### Arrangement
<img class="preview-img" align="right" alt="Arrangement Example" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
The order of the search criteria should be the same as the order of the titles in the table, and frequently used search conditions can be placed at the top.
### Specifications
<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
- Landscape layout
Try not to place more than three columns of input boxes on one line. All Labels and input boxes should fall on the grid.
- Vertical layout
Use `16px` for vertical margins.
## Field Type
### Interaction
<img class="preview-img" align="right" alt="Interactive Example" src = "https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
Field types usually appear at the bottom of the main search box. This is suitable when search conditions and values ​​are relatively small in the display.
`````__react
window.location.href = '/docs/spec/overview';
`````

51
docs/pattern/advanced-search.zh-CN.md
View File

@ -3,51 +3,6 @@ order: 6
title: 高级搜索
---
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
---
## 常规型
### 交互
<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
<br>
<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
### 排列规则
<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
### 规格
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
- 横向排版
在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
- 纵向排版
使用 `16px` 作为间距。
## 字段型
### 交互
<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
`````__react
window.location.href = '/docs/spec/overview-cn';
`````

50
docs/pattern/complex-table.en-US.md
View File

@ -3,50 +3,6 @@ order: 5
title: Complex Table
---
Table is widely used to show complicated structued data.
---
## Showcase
### Multiple Columns
<img class="preview-img" align="right" alt="Multiple Columns Demo" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
Load more data or switch left/right by pressing buttons.
<br>
<img class="preview-img" align="right" alt="Custom Columns Demo" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
Allow user to choose columns they want.
<br>
<img class="preview-img" align="right" alt="Horizontal Scroll Demo" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
Fixed header，view more by scroll horizontally.
### With Icon
<img class="preview-img" align="right" alt="Table with Icon Demo" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
Emphasis with icon, use to show trend.
### With Chart
<img class="preview-img" align="right" alt="Table with Chart Demo" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
Emphasis with chart, use to show trend.
### Two Dimension
<img class="preview-img" align="right" alt="Two Dimensional Table Demo" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
A title vertically and horizontally each.
### Mini-table
<img class="preview-img" align="right" alt="Mini-table Demo" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
Suitable for card and pop-ups where space is limited
`````__react
window.location.href = '/docs/spec/overview';
`````

50
docs/pattern/complex-table.zh-CN.md
View File

@ -3,50 +3,6 @@ order: 5
title: 表格：复杂数据
---
表格也用于展示复杂和高度结构化数据。
---
## 案例
### 多列数据
<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
通过按钮，可实现更多列数据的加载以及左右切换。
<br>
<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
提供用户自定义列的功能，方便用户查看需要的列。
<br>
<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
固定表头列，通过横向滚动条来查看剩余内容。
### 带图标的表格
<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
通过图标强化信息的传递，适用在表达数据变化趋势。
### 带图表的表格
<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
通过图表来强化信息的传递，适用在表达数据变化趋势。
### 二维表格
<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
横向和纵向各一个标题来展现数据。
### 小表格
<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
适用在卡片、弹出框等空间较小的场景中。
`````__react
window.location.href = '/docs/spec/overview-cn';
`````

162
docs/pattern/form.en-US.md
View File

@ -3,162 +3,6 @@ order: 2
title: Form
---
As an important interface to obtain user input, forms play the important role of matching answers to questions.
When designing a form, it's recommended to:
1. Make sure users know what is required to enter and why.
Use sample language as `label` for ordinary users and professional terms for experts. If sensitive information (for example ID card number, mobile phone number) is required, explain why.
2. Provide rich context to help users complete the form.
Using "proper default value", "structured format", "tooltip" and "reminder" are practical for describing such context.
3. Be error-sensitive and fault-tolerant.
Be error-sensitive means giving feedback to users quickly through a variety of validation rules of user input. If the validation starts only after a form is submitted, it would be too late. Being fault-tolerant means it should be allowed to use different kinds of formats as well as syntax. For example, if a user types in some spaces into a phone number input box, the system should delete those spaces automatically instead of telling the user to correct them.
4. Don't ask unnecessary questions.
---
## Content
<img class="preview-img" align="right" alt="Example of a form" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
A form usually consists of 4 parts:
1. Label
2. Input box
3. Validation feedback
4. Action
> Note: `*` indicates that the input is required.
## Interactions
### Gap filling input
<img class="preview-img" align="right" alt="Example of gap filling input" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
Gap filling input usually appears in a descriptive context to help users understand the current situation and provide information correctly.
### Combined input
<img class="preview-img" align="right" alt="Example of combined input" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
When two input boxes have strong correlation, they can be combined together so as to save some space.
### Alignment
<img class="preview-img" align="right" alt="Example of alignment" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
When designing a form, button groups should be aligned to the left of the input boxes.
### Disabled main button
When there are just a few (less than 3) input boxes in a form, "submit" button or other main buttons should be disabled if a user has not yet filled in all required input boxes. However, when there are too many input boxes (more than 5), do not disable those main buttons.
<br>
<img class="preview-img" align="right" alt="main button is disabled when there are not enough characters" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
<img class="preview-img" align="right" alt="main button is enabled when there are enough characters" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
When there are just a few input boxes, users can see feedback once they type in something and thus the rule is easy to understand.
<br>
<img class="preview-img" align="right" alt="Don't use disabled main button" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
When there are many input boxes (especially when required input boxes are altogether with optional ones), the logic of feedback can be very complicated. Thus, disabling main buttons may cause confusion.
### Structured format
<img class="preview-img" align="right" alt="Example of structured format" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
The structured format can be used if users are familiar with the input content and the system doesn't accept any deviation from the desired format.
### Tooltip & reminder
<img class="preview-img inline" align="right" alt="Example of tooltip" description="when an input box is focused, the tooltip will appear until the input box loses focus again" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
<img class="preview-img inline" align="right" alt="Example of reminder" description="when an input box is focused, the reminder will appear until a user types in at least one character" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
Use a tooltip if a brief input label may cause confusion while you still want to keep the label text to be short.
Use a reminder if you want users to pay attention to the format or purpose of an input box. A reminder will disappear once there is something typed in the input box, so it should be used only when users are familiar with the content.
### Password input box
<img class="preview-img" align="right" alt="Example of password input box" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
Password input box provides real time feedback on password strength and validity. It's quite applicable to a registration page.
### Validation
<img class="preview-img inline" align="right" description="Validation in real time" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
<img class="preview-img inline" align="right" description="Validation after losing focus" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
<img class="preview-img" align="right" description="When a 'submit' button is clicked, the system will deal with user inputs and display feedback (the number of errors and the types of errors) on the page." src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
Use different validation rules and a variety of feedback to help users correct errors before they click on a "submit" button.
### Character counting box
<img class="preview-img" align="right" alt="Example of word counting" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
A character counting box can show the current number of characters and checks if this number exceeds the limit.
## Format
### Margin
<img class="preview-img" align="right" alt="Example of margin between inputs" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
A typical example of using margin between inputs.
### Width
<img class="preview-img good" align="right" alt="Good" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png">
<img class="preview-img bad" align="right" alt="Bad" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png">
If the maximum length of an input content is known, it's recommended to define the input width according to the maximum length.
<br>
### Alignment
There are both advantages and disadvantages for any particular alignment. Thus, you need to be clear about your purposes (if you want to speed up or slow down a user) and the limitations (screen width restrictions, problems of localization, etc.) before choosing one of those alignments.
<br>
<img class="preview-img" align="right" alt="Right alignment (recommended)" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
Right alignment (recommended)
- Advantage: saves vertical space.
- Disadvantages: reduces readability; reduces flexibility of the input length
- When to use: you want to save more vertical space and speed up users for filling a form.
<br>
<img class="preview-img" align="right" alt="Top alignment" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
Top alignment
- Advantages: high readability; high flexibility of the label length.
- Disadvantages: takes a lot of vertical space.
- When to use: you want users to finish filling the form quickly.
<br>
<img class="preview-img" align="right" alt="Left alignment" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
Left alignment
- Advantages: easy to read and saves vertical space.
- Disadvantages: slows down users and reduces flexibility for the input length.
- When to use: you want to slow down users so that they can take more considerations when filling a form.
`````__react
window.location.href = '/docs/spec/overview';
`````

161
docs/pattern/form.zh-CN.md
View File

@ -3,161 +3,6 @@ order: 2
title: 表单
---
作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
设计者进行表单设计时，应当注意这几点：
1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
2. 让用户能在上下文中获取信息，帮助他完成输入。
使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
3. 对错误敏感，并尽可能宽容。
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
4. 不要提出不必要的问题。
---
## 内容
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
通常表单会有四个部分组成。
1. 标签
2. 输入框
3. 校验反馈
4. 动作
> 注：`*` 表明该项为必填项。
## 交互
### 填空
<img class="preview-img" align="right" alt="填空示例" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
### 组合输入框
<img class="preview-img" align="right" alt="组合输入框示例" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
当两个输入框关联性很强时，可以前后拼接，减少页面空间。
### 对齐方式
<img class="preview-img" align="right" alt="对齐方式示例" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
在页面设计表单时，按钮组必须和输入框左对齐。
### 禁用主按钮
当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
<br>
<img class="preview-img" align="right" alt="未达字符标准时，主按钮禁用状态" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
<img class="preview-img" align="right" alt="达到字符标准时，主按钮可用状态" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
<br>
<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
### 结构化的格式
<img class="preview-img" align="right" alt="结构化的格式示例" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
### 输入提示 & 输入提醒
<img class="preview-img inline" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
<img class="preview-img inline" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
### 密码加强计
<img class="preview-img" align="right" alt="密码强度示例" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
### 校验
<img class="preview-img inline" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
<img class="preview-img inline" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
### 字数校验框
<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/JxzQIRfMCtMjuaH.png">
用于统计当前输入长度，以及是否超过系统阈值。
## 规格
### 间距
<img class="preview-img" align="right" alt="间隔示例" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
典型表单的间隔规范。
### 输入框宽度
<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png">
<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png">
当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
<br>
### 对齐方式
无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
<br>
<img class="preview-img" align="right" alt="右对齐（推荐）" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
右对齐（推荐）。
- 优点：节约垂直空间。
- 缺点：降低可读性；标签长度和输入框弹性小。
- 场景：既要减少垂直空间，又要加快填写速度。
<br>
<img class="preview-img" align="right" alt="顶部对齐" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
顶部对齐。
- 优点：有最快的浏览和处理速度；标签长度弹性大。
- 缺点：非常占垂直空间。
- 场景：希望用户快速填写表单，完成任务。
<br>
<img class="preview-img" align="right" alt="左对齐" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
左对齐。
- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
- 缺点：填写速度慢；标签长度和输入框弹性小。
- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
`````__react
window.location.href = '/docs/spec/overview-cn';
`````

97
docs/pattern/list.en-US.md
View File

@ -3,97 +3,6 @@ order: 3
title: List
---
Lists are very common UI elements which can be applied to various scenarios:
- Get an overview
- Browse item by item
- Find specific list item
- Sort and filter
- Rearrange, add, delete or re-categorize list items
---
## Interaction
### Display Details
<img class="preview-img" align="right" alt="Popover Example" description="When triggered by click, symmetry between activated and disabled states should be maintained, in other words, popover should be closed where it was opened. When triggered by hover, activate the popover 0.5 second after a mouse-enter event, and close the popover immediately after a mouse-leave event." src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
Popover: When a user clicks or hovers a link or piece of content, display a small amount of detailed information for the corresponding list item in a floating layer.
<br />
<img class="preview-img" align="right" alt="Embedding Example 1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
<img class="preview-img" align="right" alt="Embedding Example 2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
<img class="preview-img" align="right" alt="Embedding Example 3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
Embedding: A user can directly view detailed information in the context via a click, without opening a new page or modal.
<br />
<img class="preview-img" align="right" alt="Modal Example" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
Modal: A user can view detailed information in a modal dialog via a click. But it loses the contextual/visual tie to the clicked list item, because, unlike popover and embedding, modal is usually presented in a fixed position regardless of the position of clicked list item.
<br />
<img class="preview-img" align="right" alt="Dual-Panel Selector Example" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
Dual-Panel Selector: A user can view a large amount of detailed information in a (usually right) panel beside the list.
<br />
<img class="preview-img" align="right" alt="Full-Window Example (No New Window)" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
<img class="preview-img" align="right" alt="Full-Window Example (New Window)" description="Detailed information of clicked list item would replace the list area, user can go back to the list via breadcrumb, button or browser Back button." src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
Full-Window: A user can view a large amount of detailed information in current page. This mode loses contextual/visual tie to the clicked list item, however it is suitable for scenarios where detailed information is completely irrelevant, or screen size is small (i.e. mobile), or list and details are huge.
### Display More Text
<img class="preview-img" align="right" alt="Text Wrap Example" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
Text Wrap: Expand certain list item into multi-line text.
<br />
<img class="preview-img no-padding" align="right" alt="Grid Example" src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
Grid: Arrange list items in a grid or matrix where each item shares a similar visual weight.
### Display Images
<img class="preview-img no-padding" align="right" alt="Carousel Example" src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
Carousel: Display images in one dimension, scrolling of images can be triggered either manually by user or automatically by system.
<br />
<img class="preview-img no-padding" align="right" alt="Thumbnail Grid Example" src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
Thumbnail Grid: Display images/icons in two dimensions, this approach has strong visual effects which attracts user attention.
### Display Long List
<img class="preview-img" align="right" description="Pagination is a good choice if performance is a main concern." src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
Pagination: Load list in a sectioned way, user determines whether to load other list items.
<br />
<img class="preview-img" align="right" description="Pagination can make things clunky when there is intensive operation on listed data, especially when there is selection across pages. So infinite scrolling would be a better choice. Infinite scrolling is also suitable for presenting all data for a user (i.e. user's orders) or non-temporary data." src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
Infinite Scrolling: When user reaches the bottom of the first section, load next section via listening to scroll event or a button click.
### Display Categorized/Layered List
<img class="preview-img" align="right" alt="Two-Layer Collapse" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
<img class="preview-img" align="right" alt="Multi-Layer Collapse" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
<img class="preview-img" align="right" alt="Two-Layer Collapsible Table" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
<br />
`````__react
window.location.href = '/docs/spec/overview';
`````

97
docs/pattern/list.zh-CN.md
View File

@ -3,97 +3,6 @@ order: 3
title: 列表
---
列表是非常常见的界面元素，有多种使用场景：
- 获取概览
- 逐项浏览
- 查找特定列表项
- 排序与过滤
- 重新安排、添加、删除或重新分类列表项
---
## 交互
### 显示详情信息
<img class="preview-img" align="right" alt="气泡显示示例" description="使用『点击』触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。使用『悬停』触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
<br />
<img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
<img class="preview-img" align="right" alt="列表嵌入示例2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
<img class="preview-img" align="right" alt="列表嵌入示例3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
<br />
<img class="preview-img" align="right" alt="弹出层显示示例" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
<br />
<img class="preview-img" align="right" alt="双面板选择器示例" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
<br />
<img class="preview-img" align="right" alt="单窗口深入示例（窗口未弹出）" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
<img class="preview-img" align="right" alt="单窗口深入示例（窗口弹出）" description="用户通过点击，该列表项的详情信息会替换列表所在的显示区域；用户通过『面包屑』、按钮或者浏览器自带返回按钮，从详情返回列表。" src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
### 显示更多文本
<img class="preview-img" align="right" alt="宽行示例" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
<br />
<img class="preview-img no-padding" align="right" alt="对等网格示例" src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
### 显示图片
<img class="preview-img no-padding" align="right" alt="走马灯示例" src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
<br />
<img class="preview-img no-padding" align="right" alt="缩略图网格示例" src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
### 显示长列表
<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
<br />
<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的个人所有的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
### 显示分类或者层级的列表
<img class="preview-img" align="right" alt="两层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
<img class="preview-img" align="right" alt="多层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
<img class="preview-img" align="right" alt="两层折叠面板表格" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
<br />
`````__react
window.location.href = '/docs/spec/overview-cn';
`````

94
docs/pattern/navigation.en-US.md
View File

@ -3,94 +3,6 @@ order: 1
title: Navigation
---
Broadly speaking, anything telling users where they are, where to go and how to get there can be called navigation. We abstract common navigation patterns and provide handy components to help designers and developers build a clear and smooth navigational system. When using navigation or customizing navigational structures, please pay attention to following common pitfalls:
- Provide visual and contextual cues as much as possible, to prevent users from getting lost
- Maintain consistency between form and behavior, or reduce the number of items in navigation, to decrease user's learning cost
- Minimize page transitions (i.e. reduce the number of page transitions required by a task from several to just once or twice), to ensure that the user travels only a short distance from one page to another
---
## Commonly Used Navigation Patterns
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
<tr>
<th></th>
<th>Side Navigation</th>
<th>Top Navigation</th>
</tr>
<tr>
<th>Pros</th>
<td>Hierarchy is easily extensible; Makes room for page content horizontally; Allows fixed position, so that user can navigate to intended page quickly.</td>
<td>Conforms to common human habit of browsing top-down, easy to browse and click; Content area usually stays in a fixed width (i.e. 1208px), so page layout is more stable and less sensitive to screen sizes.</td>
</tr>
<tr>
<th>Cons</th>
<td>Sensitive to screen sizes because content area usually resides in a Grid.</td>
<td>At present, most monitors are widescreen, so top navigation occupies a large area of valuable vertical space while waste a lot of horizontal space; Number and title length of menu items are limited.</td>
</tr>
<tr>
<th>Summary</th>
<td>Suitable for multi-level, operation intensive and dashboard-like web apps.</td>
<td>Suitable for landing pages and consumer facing web apps.</td>
</tr>
</Table>
We categorize common navigation patterns into side and top navigations. Either has its own pros and cons, and should be chosen accordingly.
Examples for reference [Commonly Used Layout](/docs/spec/layout#docs-spec-layout-demo-top)。
## Side Navigation
---
<img class="preview-img no-padding" align="right" alt="Structure Example" src="https://os.alipayobjects.com/rmsportal/hutiGZWQYmIspjw.png">
Navigational structure consists of following parts:
1. Product Logo and Name
2. Menu Items
3. Login
4. Breadcrumb (optional)
#### About Breadcrumb
> 1. Avoid using breadcrumbs as much as you can, especially when a page contains other navigation components sufficiently telling where users are.
> 2. Breadcrumb can be categorized as:
> - Path-Centric: dynamically showing a path of how user reaches current page
> - Position-Centric: usually fixed, showing position of current page among entire site structure
> - Property-Centric: showing categorical property of current page
<br>
<img class="preview-img no-padding" align="right" alt="1st Level Menu Items" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
<img class="preview-img no-padding" align="right" alt="2nd Level Menu Items" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
<img class="preview-img no-padding" align="right" alt="3rd or Higher Level Menu Items" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
Here we provide navigation patterns for different kinds of menu hierarchy.
## Top Navigation
---
<img class="preview-img no-padding" align="right" alt="Structure Example" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
Navigational structure consists of following parts:
1. Product Logo and Name
2. Menu Items
3. Login
4. Breadcrumb (optional)
<br>
<img class="preview-img no-padding" align="right" alt="1st Level Menu Items" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
<img class="preview-img no-padding" align="right" alt="2nd Level Menu Items" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
<img class="preview-img no-padding" align="right" alt="3rd or Higher Level Menu Items" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
Multi-level Menu Items.
`````__react
window.location.href = '/docs/spec/navigation';
`````

94
docs/pattern/navigation.zh-CN.md
View File

@ -3,94 +3,6 @@ order: 1
title: 导航
---
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
---
## 常见导航
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
<tr>
<th></th>
<th>侧栏导航</th>
<th>顶部导航</th>
</tr>
<tr>
<th>优点</th>
<td>导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。</td>
<td>人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。</td>
</tr>
<tr>
<th>缺点</th>
<td>内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。</td>
<td>目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。</td>
</tr>
<tr>
<th>总结</th>
<td>适用在操作性强、中后台管理性质的应用。</td>
<td>一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。</td>
</tr>
</Table>
我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
前端实现代码可以参考 [常用布局](/docs/spec/layout#docs-spec-layout-demo-top)。
## 侧栏导航
---
<img class="preview-img no-padding" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/hutiGZWQYmIspjw.png">
导航的结构由以下几部分组成。
1. 产品 Logo 和名称
2. 业务类目
3. 登录工具
4. 面包屑（可选）
#### 关于面包屑
> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
> 2. 面包屑可以分为这几类：
> - 路径型：是一个动态显示用户到达页面经过的途径。
> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
> - 属性型：属性型给出当前页面的分类信息。
<br>
<img class="preview-img no-padding" align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
<img class="preview-img no-padding" align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
<img class="preview-img no-padding" align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
我们定义了不同类目层级所对应的导航样式。
## 顶部导航
---
<img class="preview-img no-padding" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
导航的结构由以下几部分组成。
1. 产品 Logo 和名称
2. 业务类目
3. 登录工具
4. 面包屑（可选）
<br>
<img class="preview-img no-padding" align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
<img class="preview-img no-padding" align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
<img class="preview-img no-padding" align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
不同类目层级。
`````__react
window.location.href = '/docs/spec/navigation-cn';
`````

152
docs/pattern/table.md
View File

@ -5,152 +5,6 @@ title:
en-US: Table
---
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
---
## 内容
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
通常表格的组成元素以及相关元素会有，这几部分组成。
1. 按钮组
2. 搜索条件
3. 排序
4. 筛选
5. 状态点
6. 单行操作
7. 分页器／无限加载（可选）
### 筛选
<img class="preview-img" align="right" alt="筛选示例" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
### 状态点
<img class="preview-img" align="right" alt="状态示例" src="https://os.alipayobjects.com/rmsportal/EYmtSshUxKydwns.png">
一般用四种颜色来表明系统的不同状态。
### 更多操作
<img class="preview-img" align="right" alt="更多操作示例" description="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
### 跳转至详情
<img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">
把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
- 优点：节省空间；
- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
<br>
<img class="preview-img" align="right" alt="查看跳转示例" src="https://os.alipayobjects.com/rmsportal/zjDqNVTzSrzXaWg.png">
在操作中增加一列『查看』，点击后进行跳转至详情。
- 优点：可发现性高；点击范围固定，不受影响；
- 缺点：比较占空间。
<br>
结论：可根据业务系统中表格的实际情况，统一使用一种类型。
## 交互
### 显示长表格
参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
### 全选数据
<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
<img class="preview-img" align="right" alt="状态二：点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
<img class="preview-img" align="right" alt="状态三：点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
### 跨页选数据
<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
### 固定按钮组
<img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
<img class="preview-img" align="right" alt="底部固定示例" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
### 某一项内容过长
<img class="preview-img" align="right" alt="气泡显示示例" description="当过长信息可以被隐藏时，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
### 模块编辑
<img class="preview-img" align="right" alt="模块编辑示例" description="启动和禁用要尽可能相似（对称性交互）；保证启用和禁用切换时，页面不在水平方向不错位。" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
### 直接编辑
<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
适用在易编辑性高于易读性时。
### 悬浮层编辑
<img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
## 规格
### 行高
<img class="preview-img" align="right" alt="标准" src="https://os.alipayobjects.com/rmsportal/OXTCkOkAtaWtzNA.png">
<img class="preview-img" align="right" alt="适中" src="https://os.alipayobjects.com/rmsportal/irjamuwZFdQLYWJ.png">
<img class="preview-img" align="right" alt="紧凑" src="https://os.alipayobjects.com/rmsportal/SdlTVIAoxickNMM.png">
提供了多种规格的行高，适用在页面、弹出框等场景中。
### 列宽
<img class="preview-img bad" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TbuuZNfOTrSflVg.png" >
<img class="preview-img good" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/cSSSfNrFMioHDBJ.png">
一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
1. 表头不换行；
2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
### 对齐方式
<img class="preview-img" align="right" alt="对齐示例" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">
数值右对齐（带小数则按小数点对齐），其余左对齐。
`````__react
window.location.href = '/docs/spec/overview';
`````

7
docs/resource/download.en-US.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Download
---
`````__react
window.location.href = '/docs/spec/download';
`````

7
docs/resource/download.zh-CN.md Normal file
View File

@ -0,0 +1,7 @@
---
title: 资源下载
---
`````__react
window.location.href = '/docs/spec/download-cn';
`````

7
docs/resource/reference.en-US.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Reference
---
`````__react
window.location.href = '/docs/spec/reference';
`````

7
docs/resource/reference.zh-CN.md Normal file
View File

@ -0,0 +1,7 @@
---
title: 文献素材
---
`````__react
window.location.href = '/docs/spec/reference-cn';
`````

7
docs/spec/feature.en-US.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Features
---
`````__react
window.location.href = '/docs/spec/values';
`````

7
docs/spec/feature.zh-CN.md Normal file
View File

@ -0,0 +1,7 @@
---
title: 基本理念
---
`````__react
window.location.href = '/docs/spec/values-cn';
`````