mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
docs: update documentation format
This commit is contained in:
Benjy Cui
parent
03d09b66e8
commit
d5a6932c15
@ -1,8 +1,9 @@
|
||||
# 更新日志
|
||||
|
||||
- order: 4
|
||||
|
||||
---
|
||||
order: 4
|
||||
chinese: 更新日志
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 0.12.13
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Affix
|
||||
|
||||
- category: Components
|
||||
- chinese: 固钉
|
||||
- type: 其它
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 固钉
|
||||
type: 其它
|
||||
english: Affix
|
||||
---
|
||||
|
||||
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Alert
|
||||
|
||||
- category: Components
|
||||
- chinese: 警告提示
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 警告提示
|
||||
type: 展示
|
||||
english: Alert
|
||||
---
|
||||
|
||||
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Badge
|
||||
|
||||
- category: Components
|
||||
- chinese: 徽标数
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 徽标数
|
||||
type: 展示
|
||||
english: Badge
|
||||
---
|
||||
|
||||
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Breadcrumb
|
||||
|
||||
- category: Components
|
||||
- chinese: 面包屑
|
||||
- type: 导航
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 面包屑
|
||||
type: 导航
|
||||
english: Breadcrumb
|
||||
---
|
||||
|
||||
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Button
|
||||
|
||||
- category: Components
|
||||
- chinese: 按钮
|
||||
- type: 基本
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 按钮
|
||||
type: 基本
|
||||
english: Button
|
||||
---
|
||||
|
||||
|
||||
|
||||
按钮用于开始一个即时操作。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Calendar
|
||||
|
||||
- category: Components
|
||||
- type: 展示
|
||||
- chinese: 日历
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
type: 展示
|
||||
chinese: 日历
|
||||
cols: 1
|
||||
english: Calendar
|
||||
---
|
||||
|
||||
|
||||
|
||||
按照日历形式展示数据的容器。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Card
|
||||
|
||||
- category: Components
|
||||
- chinese: 卡片
|
||||
- type: 展示
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 卡片
|
||||
type: 展示
|
||||
cols: 1
|
||||
english: Card
|
||||
---
|
||||
|
||||
|
||||
|
||||
通用卡片容器。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Carousel
|
||||
|
||||
- category: Components
|
||||
- chinese: 走马灯
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 走马灯
|
||||
type: 展示
|
||||
english: Carousel
|
||||
---
|
||||
|
||||
|
||||
|
||||
旋转木马，一组轮播的区域。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Cascader
|
||||
|
||||
- category: Components
|
||||
- chinese: 级联选择
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 级联选择
|
||||
type: 表单
|
||||
english: Cascader
|
||||
---
|
||||
|
||||
|
||||
|
||||
级联选择框。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Checkbox
|
||||
|
||||
- category: Components
|
||||
- chinese: 多选框
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 多选框
|
||||
type: 表单
|
||||
english: Checkbox
|
||||
---
|
||||
|
||||
|
||||
|
||||
多选框。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Collapse
|
||||
|
||||
- category: Components
|
||||
- chinese: 折叠面板
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 折叠面板
|
||||
type: 展示
|
||||
english: Collapse
|
||||
---
|
||||
|
||||
|
||||
|
||||
可以折叠/展开的内容区域。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# DatePicker
|
||||
|
||||
- category: Components
|
||||
- chinese: 日期选择框
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 日期选择框
|
||||
type: 表单
|
||||
english: DatePicker
|
||||
---
|
||||
|
||||
|
||||
|
||||
输入或选择日期的控件。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Dropdown
|
||||
|
||||
- category: Components
|
||||
- chinese: 下拉菜单
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 下拉菜单
|
||||
type: 展示
|
||||
english: Dropdown
|
||||
---
|
||||
|
||||
|
||||
|
||||
向下弹出的列表。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Form
|
||||
|
||||
- category: Components
|
||||
- chinese: 表单
|
||||
- type: 表单
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 表单
|
||||
type: 表单
|
||||
cols: 1
|
||||
english: Form
|
||||
---
|
||||
|
||||
|
||||
|
||||
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Icon
|
||||
|
||||
- category: Components
|
||||
- chinese: 图标
|
||||
- type: 基本
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 图标
|
||||
type: 基本
|
||||
english: Icon
|
||||
---
|
||||
|
||||
|
||||
|
||||
有含义的矢量图形，每一个图标打倒一个敌人。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# InputNumber
|
||||
|
||||
- category: Components
|
||||
- chinese: 数字输入框
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 数字输入框
|
||||
type: 表单
|
||||
english: InputNumber
|
||||
---
|
||||
|
||||
|
||||
|
||||
通过鼠标或键盘，输入范围内的数值。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Layout
|
||||
|
||||
- category: Components
|
||||
- chinese: 布局
|
||||
- type: 基本
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 布局
|
||||
type: 基本
|
||||
cols: 1
|
||||
english: Layout
|
||||
---
|
||||
|
||||
|
||||
|
||||
24 栅格系统。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# LocaleProvider
|
||||
|
||||
- category: Components
|
||||
- chinese: 国际化
|
||||
- cols: 1
|
||||
- type: 其它
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 国际化
|
||||
cols: 1
|
||||
type: 其它
|
||||
english: LocaleProvider
|
||||
---
|
||||
|
||||
|
||||
|
||||
为组件内建文案提供统一的国际化支持。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Menu
|
||||
|
||||
- category: Components
|
||||
- chinese: 导航菜单
|
||||
- cols: 1
|
||||
- type: 导航
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 导航菜单
|
||||
cols: 1
|
||||
type: 导航
|
||||
english: Menu
|
||||
---
|
||||
|
||||
|
||||
|
||||
为页面和功能提供导航的菜单列表。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Message
|
||||
|
||||
- category: Components
|
||||
- chinese: 全局提示
|
||||
- type: 展示
|
||||
- noinstant: true
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 全局提示
|
||||
type: 展示
|
||||
noinstant: true
|
||||
english: Message
|
||||
---
|
||||
|
||||
|
||||
|
||||
全局展示操作反馈信息。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Modal
|
||||
|
||||
- type: 展示
|
||||
- category: Components
|
||||
- chinese: 对话框
|
||||
|
||||
---
|
||||
type: 展示
|
||||
category: Components
|
||||
chinese: 对话框
|
||||
english: Modal
|
||||
---
|
||||
|
||||
|
||||
|
||||
模态对话框。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Notification
|
||||
|
||||
- category: Components
|
||||
- chinese: 通知提醒框
|
||||
- type: 展示
|
||||
- noinstant: true
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 通知提醒框
|
||||
type: 展示
|
||||
noinstant: true
|
||||
english: Notification
|
||||
---
|
||||
|
||||
|
||||
|
||||
全局展示通知提醒信息。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Pagination
|
||||
|
||||
- category: Components
|
||||
- chinese: 分页
|
||||
- type: 导航
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 分页
|
||||
type: 导航
|
||||
english: Pagination
|
||||
---
|
||||
|
||||
|
||||
|
||||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Popconfirm
|
||||
|
||||
- category: Components
|
||||
- chinese: 气泡确认框
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 气泡确认框
|
||||
type: 展示
|
||||
english: Popconfirm
|
||||
---
|
||||
|
||||
|
||||
|
||||
点击元素，弹出气泡式的确认框。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Popover
|
||||
|
||||
- category: Components
|
||||
- chinese: 气泡卡片
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 气泡卡片
|
||||
type: 展示
|
||||
english: Popover
|
||||
---
|
||||
|
||||
|
||||
|
||||
点击/鼠标移入元素，弹出气泡式的卡片浮层。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Progress
|
||||
|
||||
- category: Components
|
||||
- chinese: 进度条
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 进度条
|
||||
type: 展示
|
||||
english: Progress
|
||||
---
|
||||
|
||||
|
||||
|
||||
展示操作的当前进度。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# QueueAnim
|
||||
|
||||
- category: Components
|
||||
- chinese: 进出场动画
|
||||
- type: 其它
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 进出场动画
|
||||
type: 其它
|
||||
english: QueueAnim
|
||||
---
|
||||
|
||||
|
||||
|
||||
通过简单的配置对一组元素添加串行的进场动画效果。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Radio
|
||||
|
||||
- category: Components
|
||||
- chinese: 单选框
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 单选框
|
||||
type: 表单
|
||||
english: Radio
|
||||
---
|
||||
|
||||
|
||||
|
||||
单选框。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Rate
|
||||
|
||||
- category: Components
|
||||
- chinese: 评分
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 评分
|
||||
type: 表单
|
||||
english: Rate
|
||||
---
|
||||
|
||||
|
||||
|
||||
评分组件。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Select
|
||||
|
||||
- category: Components
|
||||
- chinese: 选择器
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 选择器
|
||||
type: 表单
|
||||
english: Select
|
||||
---
|
||||
|
||||
|
||||
|
||||
类似 Select2 的选择器。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Slider
|
||||
|
||||
- category: Components
|
||||
- chinese: 滑动输入条
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 滑动输入条
|
||||
type: 表单
|
||||
english: Slider
|
||||
---
|
||||
|
||||
|
||||
|
||||
滑动型输入器，展示当前值和可选范围。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Spin
|
||||
|
||||
- category: Components
|
||||
- chinese: 加载中
|
||||
- type: 其它
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 加载中
|
||||
type: 其它
|
||||
english: Spin
|
||||
---
|
||||
|
||||
|
||||
|
||||
用于页面和区块的加载中状态。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Steps
|
||||
|
||||
- category: Components
|
||||
- chinese: 步骤条
|
||||
- type: 导航
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 步骤条
|
||||
type: 导航
|
||||
cols: 1
|
||||
english: Steps
|
||||
---
|
||||
|
||||
|
||||
|
||||
引导用户按照流程完成任务的导航条。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Switch
|
||||
|
||||
- category: Components
|
||||
- chinese: 开关
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 开关
|
||||
type: 表单
|
||||
english: Switch
|
||||
---
|
||||
|
||||
|
||||
|
||||
开关选择器。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Table
|
||||
|
||||
- category: Components
|
||||
- chinese: 表格
|
||||
- cols: 1
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 表格
|
||||
cols: 1
|
||||
type: 展示
|
||||
english: Table
|
||||
---
|
||||
|
||||
|
||||
|
||||
展示行列数据。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Tabs
|
||||
|
||||
- category: Components
|
||||
- chinese: 标签页
|
||||
- type: 导航
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 标签页
|
||||
type: 导航
|
||||
english: Tabs
|
||||
---
|
||||
|
||||
|
||||
|
||||
选项卡切换组件。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Tag
|
||||
|
||||
- category: Components
|
||||
- chinese: 标签
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 标签
|
||||
type: 展示
|
||||
english: Tag
|
||||
---
|
||||
|
||||
|
||||
|
||||
进行标记和分类的小标签。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# TimePicker
|
||||
|
||||
- category: Components
|
||||
- chinese: 时间选择框
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 时间选择框
|
||||
type: 表单
|
||||
english: TimePicker
|
||||
---
|
||||
|
||||
|
||||
|
||||
输入或选择时间的控件。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Timeline
|
||||
|
||||
- category: Components
|
||||
- chinese: 时间轴
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 时间轴
|
||||
type: 展示
|
||||
english: Timeline
|
||||
---
|
||||
|
||||
|
||||
|
||||
垂直展示的时间流信息。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Tooltip
|
||||
|
||||
- category: Components
|
||||
- chinese: 文字提示
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 文字提示
|
||||
type: 展示
|
||||
english: Tooltip
|
||||
---
|
||||
|
||||
|
||||
|
||||
简单的文字提示气泡框。
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
# Transfer
|
||||
|
||||
- category: Components
|
||||
- chinese: 穿梭框
|
||||
- type: 表单
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 穿梭框
|
||||
type: 表单
|
||||
cols: 1
|
||||
english: Transfer
|
||||
---
|
||||
|
||||
|
||||
|
||||
双栏穿梭选择框。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# TreeSelect
|
||||
|
||||
- category: Components
|
||||
- chinese: 树选择
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 树选择
|
||||
type: 表单
|
||||
english: TreeSelect
|
||||
---
|
||||
|
||||
|
||||
|
||||
树型选择控件。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Tree
|
||||
|
||||
- category: Components
|
||||
- chinese: 树形控件
|
||||
- type: 展示
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 树形控件
|
||||
type: 展示
|
||||
english: Tree
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 何时使用
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Upload
|
||||
|
||||
- category: Components
|
||||
- chinese: 上传
|
||||
- type: 表单
|
||||
|
||||
---
|
||||
category: Components
|
||||
chinese: 上传
|
||||
type: 表单
|
||||
english: Upload
|
||||
---
|
||||
|
||||
|
||||
|
||||
文件选择上传和拖拽上传控件。
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# Advanced Search
|
||||
|
||||
- order: 6
|
||||
- chinese: 高级搜索
|
||||
---
|
||||
order: 6
|
||||
chinese: 高级搜索
|
||||
english: Advanced Search
|
||||
---
|
||||
|
||||
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# Classic
|
||||
|
||||
- order: 0
|
||||
- disabled: true
|
||||
- chinese: 典型页面
|
||||
|
||||
---
|
||||
order: 0
|
||||
disabled: true
|
||||
chinese: 典型页面
|
||||
english: Classic
|
||||
---
|
||||
|
||||
|
||||
|
||||
敬请期待。
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# Complex Table
|
||||
|
||||
- order: 5
|
||||
- chinese: 表格：复杂数据
|
||||
---
|
||||
order: 5
|
||||
chinese: 表格：复杂数据
|
||||
english: Complex Table
|
||||
---
|
||||
|
||||
表格也用于展示复杂和高度结构化数据。
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# Form
|
||||
|
||||
- order: 2
|
||||
- chinese: 表单
|
||||
---
|
||||
order: 2
|
||||
chinese: 表单
|
||||
english: Form
|
||||
---
|
||||
|
||||
作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# List
|
||||
|
||||
- order: 3
|
||||
- chinese: 列表
|
||||
---
|
||||
order: 3
|
||||
chinese: 列表
|
||||
english: List
|
||||
---
|
||||
|
||||
列表是非常常见的界面元素，有多种使用场景：
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# Navigation
|
||||
|
||||
- order: 1
|
||||
- chinese: 导航
|
||||
---
|
||||
order: 1
|
||||
chinese: 导航
|
||||
english: Navigation
|
||||
---
|
||||
|
||||
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# Table
|
||||
|
||||
- order: 4
|
||||
- chinese: 表格
|
||||
---
|
||||
order: 4
|
||||
chinese: 表格
|
||||
english: Table
|
||||
---
|
||||
|
||||
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# Business
|
||||
|
||||
- order: 1
|
||||
- disabled: true
|
||||
- chinese: 业务组件
|
||||
|
||||
---
|
||||
order: 1
|
||||
disabled: true
|
||||
chinese: 业务组件
|
||||
english: Business
|
||||
---
|
||||
|
||||
|
||||
|
||||
占位。
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# Cases
|
||||
|
||||
- order: 0
|
||||
- chinese: 实践案例
|
||||
|
||||
---
|
||||
order: 0
|
||||
chinese: 实践案例
|
||||
english: Cases
|
||||
---
|
||||
|
||||
|
||||
|
||||
Ant Design 是面向中台的 UI 设计语言。
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# 快速上手
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
english: 快速上手
|
||||
---
|
||||
|
||||
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 安装
|
||||
|
||||
- order: 2
|
||||
|
||||
---
|
||||
order: 2
|
||||
english: 安装
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 使用 npm 安装
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# Ant Design of React
|
||||
|
||||
- order: 0
|
||||
---
|
||||
order: 0
|
||||
english: Ant Design of React
|
||||
---
|
||||
|
||||
这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 升级指南
|
||||
|
||||
- order: 3
|
||||
|
||||
---
|
||||
order: 3
|
||||
english: 升级指南
|
||||
---
|
||||
|
||||
|
||||
|
||||
此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 [Changelog](/changelog)。
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# Download
|
||||
|
||||
- order: 0
|
||||
- chinese: 资源下载
|
||||
|
||||
---
|
||||
order: 0
|
||||
chinese: 资源下载
|
||||
english: Download
|
||||
---
|
||||
|
||||
|
||||
|
||||
这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# GitHub
|
||||
|
||||
- order: 2
|
||||
- link: //github.com/ant-design/ant-design
|
||||
|
||||
---
|
||||
order: 2
|
||||
link: //github.com/ant-design/ant-design
|
||||
english: GitHub
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# Reference
|
||||
|
||||
- order: 1
|
||||
- chinese: 文献素材
|
||||
|
||||
---
|
||||
order: 1
|
||||
chinese: 文献素材
|
||||
english: Reference
|
||||
---
|
||||
|
||||
|
||||
|
||||
在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 对齐
|
||||
|
||||
- category: 十大原则
|
||||
- order: 2
|
||||
- subtitle: Alignment
|
||||
---
|
||||
category: 十大原则
|
||||
order: 2
|
||||
subtitle: Alignment
|
||||
english: 对齐
|
||||
---
|
||||
|
||||
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Colors
|
||||
|
||||
- category: 设计基础
|
||||
- order: 2
|
||||
- chinese: 色彩
|
||||
|
||||
---
|
||||
category: 设计基础
|
||||
order: 2
|
||||
chinese: 色彩
|
||||
english: Colors
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 有意义的色彩
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 对比
|
||||
|
||||
- category: 十大原则
|
||||
- order: 3
|
||||
- subtitle: Contrast
|
||||
---
|
||||
category: 十大原则
|
||||
order: 3
|
||||
subtitle: Contrast
|
||||
english: 对比
|
||||
---
|
||||
|
||||
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 直截了当
|
||||
|
||||
- category: 十大原则
|
||||
- order: 5
|
||||
- subtitle: Make it Direct
|
||||
---
|
||||
category: 十大原则
|
||||
order: 5
|
||||
subtitle: Make it Direct
|
||||
english: 直截了当
|
||||
---
|
||||
|
||||
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# 三大特性
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
english: 三大特性
|
||||
---
|
||||
|
||||
与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
# 字体
|
||||
|
||||
- category: 设计基础
|
||||
- order: 0
|
||||
---
|
||||
category: 设计基础
|
||||
order: 0
|
||||
english: 字体
|
||||
---
|
||||
|
||||
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
# Ant Design
|
||||
|
||||
- order: 0
|
||||
---
|
||||
order: 0
|
||||
english: Ant Design
|
||||
---
|
||||
|
||||
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
|
||||
<img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 提供邀请
|
||||
|
||||
- category: 十大原则
|
||||
- order: 8
|
||||
- subtitle: Provide Invitation
|
||||
---
|
||||
category: 十大原则
|
||||
order: 8
|
||||
subtitle: Provide Invitation
|
||||
english: 提供邀请
|
||||
---
|
||||
|
||||
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# Layout
|
||||
|
||||
- template: component
|
||||
- category: 设计基础
|
||||
- order: 4
|
||||
- cols: 1
|
||||
- chinese: 常用布局
|
||||
|
||||
---
|
||||
template: component
|
||||
category: 设计基础
|
||||
order: 4
|
||||
cols: 1
|
||||
chinese: 常用布局
|
||||
english: Layout
|
||||
---
|
||||
|
||||
|
||||
|
||||
布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 简化交互
|
||||
|
||||
- category: 十大原则
|
||||
- order: 6
|
||||
- subtitle: Keep it Lightweight
|
||||
---
|
||||
category: 十大原则
|
||||
order: 6
|
||||
subtitle: Keep it Lightweight
|
||||
english: 简化交互
|
||||
---
|
||||
|
||||
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# Motion
|
||||
|
||||
- category: 设计基础
|
||||
- order: 5
|
||||
- chinese: 组件动画
|
||||
|
||||
---
|
||||
category: 设计基础
|
||||
order: 5
|
||||
chinese: 组件动画
|
||||
english: Motion
|
||||
---
|
||||
|
||||
|
||||
|
||||
依据『巧用过渡』的设计原则，Ant Design 提供了一些预设的组件动画和缓动函数。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 引言
|
||||
|
||||
- category: 十大原则
|
||||
- order: 0
|
||||
- subtitle: Introduction
|
||||
---
|
||||
category: 十大原则
|
||||
order: 0
|
||||
subtitle: Introduction
|
||||
english: 引言
|
||||
---
|
||||
|
||||
『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 亲密性
|
||||
|
||||
- category: 十大原则
|
||||
- order: 1
|
||||
- subtitle: Proximity
|
||||
---
|
||||
category: 十大原则
|
||||
order: 1
|
||||
subtitle: Proximity
|
||||
english: 亲密性
|
||||
---
|
||||
|
||||
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 即时反应
|
||||
|
||||
- category: 十大原则
|
||||
- order: 10
|
||||
- subtitle: React Immediately
|
||||
---
|
||||
category: 十大原则
|
||||
order: 10
|
||||
subtitle: React Immediately
|
||||
english: 即时反应
|
||||
---
|
||||
|
||||
『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 重复
|
||||
|
||||
- category: 十大原则
|
||||
- order: 4
|
||||
- subtitle: Repetition
|
||||
---
|
||||
category: 十大原则
|
||||
order: 4
|
||||
subtitle: Repetition
|
||||
english: 重复
|
||||
---
|
||||
|
||||
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 足不出户
|
||||
|
||||
- category: 十大原则
|
||||
- order: 6
|
||||
- subtitle: Stay on the Page
|
||||
---
|
||||
category: 十大原则
|
||||
order: 6
|
||||
subtitle: Stay on the Page
|
||||
english: 足不出户
|
||||
---
|
||||
|
||||
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# 巧用过渡
|
||||
|
||||
- category: 十大原则
|
||||
- order: 9
|
||||
- subtitle: Use Transition
|
||||
---
|
||||
category: 十大原则
|
||||
order: 9
|
||||
subtitle: Use Transition
|
||||
english: 巧用过渡
|
||||
---
|
||||
|
||||
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
# Typography
|
||||
|
||||
- category: 设计基础
|
||||
- order: 1
|
||||
- chinese: 排版
|
||||
---
|
||||
category: 设计基础
|
||||
order: 1
|
||||
chinese: 排版
|
||||
english: Typography
|
||||
---
|
||||
|
||||
良好的排版规范能大大提升用户的视觉体验。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user