Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 c821b2cf 编写于 作者: A afc163
浏览文件
操作

update new document

上级 02075784
隐藏空白更改
内联 并排
Showing with 423 addition and 64 deletion
docs/pattern/advanced-search.md
浏览文件 @ c821b2cf
......@@ -5,4 +5,53 @@
---
占位。
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
## 常规型
### 交互
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
“高级搜索”功能一般开放给中间用户／专家用户使用，一般通过点击“高级搜索”触发；如果非常高频使用，可以默认展开“高级搜索”。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。
### 排列规则
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
### 规格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
- 横向排版
在一行不要放置3列以上的输入框；标签和输入框应该落在栅格上。
- 纵向排版
使用16px作为间距。
## 字段型
### 交互
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
## 案例
高级搜索和表格配合使用的案例。
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
docs/pattern/complex-table.md
浏览文件 @ c821b2cf
# 数据表格
# 复杂数据表格
- category: 5
- order: 5
---
占位。
表格也用于展示复杂和高度结构化数据。
## 案例
### 多列数据
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
通过按钮，可实现更多列数据的加载以及左右切换。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
提供用户自定义列的功能，方便用户查看需要的列。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
固定表头列，通过横向滚动条来查看剩余内容。
### 带图标的表格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
通过图标强化信息的传递，适用在表达数据变化趋势。
### 带图表的表格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
通过图表来强化信息的传递，适用在表达数据变化趋势。
### 二维表格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
横向和纵向各一个标题来展现数据。
### 小表格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
适用在卡片、弹出框等空间较小的场景中。
docs/pattern/navigation.md
浏览文件 @ c821b2cf
......@@ -23,7 +23,6 @@
导航的结构由以下几部分组成。
1. 产品 Logo 和名称。
2. 业务类目。
3. 登陆工具。
......@@ -32,9 +31,11 @@
> 注：
> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时；
> 2. 面包屑可以分为这几类：
> - 路径型：路径型面包屑是一个动态显示用户到达页面经过的途径。
> - 位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置。
> - 属性型：属性型面包屑给出的当前页面的分类信息。
> - 路径型：是一个动态显示用户到达页面经过的途径。
> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
> - 属性型：属性型给出当前页面的分类信息。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
......@@ -58,13 +59,10 @@
3. 登陆工具。
4. 面包屑（可选）。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
不同类目层级。
docs/pattern/table.md
浏览文件 @ c821b2cf
......@@ -5,4 +5,175 @@
---
占位。
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
## 内容
通常表格的组成元素以及相关元素会有，这几部分组成。
1. 按钮组。
2. 搜索条件。
3. 筛选。
4. 排序。
5. 状态点。
6. 单行操作。
7. 分页器／无限加载（可选）。
### 筛选
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
### 状态点
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
一般用四种颜色来表明系统的不同状态。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
当一个表格中出现两项需要强化的状态时，可以弱化其中一项，通过文字颜色的变化来进行强化。
### 更多操作
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
### 跳转至详情
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
- 优点：节省空间；
- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
在操作中增加一列『查看』，点击后进行跳转至详情。
- 优点：可发现性高；点击范围固定，不受影响；
- 缺点：比较占空间。
<br>
结论：可根据业务系统中表格的实际情况，统一使用一种类型。
## 交互
### 显示非常长的表格
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
分页器：以分段的形式加载表格，将是否需要加载其他项的选择权交给用户。
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
### 全选数据
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
### 跨页选数据
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
### 固定按钮组
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
### 某一项内容过长
某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
### 模块编辑
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
### 直接编辑
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
适用在易编辑性高于易读性时。
### 悬浮层编辑
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
## 规格
### 行高
<img class="preview-img" align="right" alt="标准" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
提供了多种规格的行高，适用在页面、弹出框等场景中。
### 列宽
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
1. 表头不换行；
2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
### 对齐方式
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
数值右对齐，其余左对齐。
## 案例
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
- 基础表格
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
- 合并单元格
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
- 可内嵌表格
<br>
<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
- 编辑表格
docs/practice/cases.md
浏览文件 @ c821b2cf
......@@ -5,14 +5,56 @@
---
<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
Ant Design 是面向中后台的 UI 设计语言。
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。
## 精选案例
## 最佳实践
---
待补充。
### 金融云
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
<a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a>
---
### OceanBase Cloud Platform
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
---
### 服务宝体验平台
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/qmnuCdZGZFXrcRP.png">
体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。
---
### AntV
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lOFDPejqANtHXmj.png">
AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。
<style>
.markdown hr {
width: 112%;
}
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
}
</style>
docs/resource/download.md
浏览文件 @ c821b2cf
......@@ -7,52 +7,75 @@
这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
### 交互部件库
<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="download-link">
<img src="https://os.alipayobjects.com/rmsportal/sJkbErZhOdoiRia.svg" width="30" style="position: relative; top: -2px;">
Axure Widgets
<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="resource-card">
<img src="https://os.alipayobjects.com/rmsportal/bAfRYPEppiuUQjR.png">
<span class="resource-card-content">
<span class="resource-card-title">Axure Components</span>
<span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
</span>
</a>
### 组件视觉稿
<a target="_blank" href="" class="download-link disabled">
<img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
Sketch
<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="resource-card">
<img src="https://os.alipayobjects.com/rmsportal/UEpOFKUQTZaUfnW.png">
<span class="resource-card-content">
<span class="resource-card-title">Web Font</span>
<span class="resource-card-description">网络字体图标的本地文件包</span>
</span>
</a>
### 图标
<a target="_blank" href="" class="download-link disabled">
<img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
AI
<a target="_blank" class="resource-card disabled">
<img src="https://os.alipayobjects.com/rmsportal/QCKTwaWQLEOXtgL.png">
<span class="resource-card-content">
<span class="resource-card-title">Axure Box</span>
<span class="resource-card-description">强大的 Ant Design 组件拼装方式</span>
</span>
</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="download-link">
<img src="https://os.alipayobjects.com/rmsportal/ytqOwOOWgYrDPfT.svg" width="32">
Web font
<a target="_blank" class="resource-card disabled">
<img src="https://os.alipayobjects.com/rmsportal/bAfRYPEppiuUQjR.png">
<span class="resource-card-content">
<span class="resource-card-title">Sketch Components</span>
<span class="resource-card-description">Ant Design 组件的 Sketch 视觉稿</span>
</span>
</a>
<style>
.download-link {
width: 220px;
.resource-card {
width: 350px;
height: 130px;
border: 1px solid #e9e9e9;
background: #fafafa;
border-radius: 6px;
line-height: 130px;
text-align: center;
font-size: 14px;
border-radius: 12px;
font-size: 12px;
color: #777;
display: inline-block;
margin-right: 16px;
text-transform: uppercase;
margin: 20px 40px 20px 0;
vertical-align: middle;
}
.download-link.disabled {
.resource-card.disabled {
opacity: 0.45;
pointer-events: none;
}
.download-link img {
margin-right: 8px;
opacity: 0.
.resource-card img {
display: inline-block;
vertical-align: middle;
width: 50px;
margin: 0 20px 0 24px;
}
.resource-card-content {
display: inline-block;
vertical-align: middle;
height: 130px;
padding-top: 36px;
}
.resource-card-title {
display: block;
font-size: 16px;
color: #666;
}
.resource-card-description {
display: block;
color: #999;
}
</style>
docs/resource/github.md 0 → 100644
浏览文件 @ c821b2cf
# GitHub
- order: 3
- category: 3
- link: https://github.com/ant-design/ant-design
---
docs/resource/reference.md
浏览文件 @ c821b2cf
# 相关书籍
# 文献素材
- order: 1
- category: 1
- disabled: true
---
......
scripts/demo.js
浏览文件 @ c821b2cf
......@@ -174,8 +174,11 @@ var PriviewImg = React.createClass({
</div>
<div className="preview-image-description">{this.props.alt}</div>
<Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
<img src={this.props.src} />
<div className="image-modal-container">
<img src={this.props.src} />
</div>
<div className="preview-image-description">{this.props.alt}</div>
<a className="outside-link" href={this.props.src} target="_blank">查看原图</a>
</Modal>
</div>
);
......@@ -194,7 +197,10 @@ InstantClickChangeFns.push(function() {
alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
);
});
const mountNode = $('<div class="preview-image-boxes"></div>');
let mountNode = $('<div class="preview-image-boxes"></div>');
if (boxLength === 1) {
mountNode = $('<div class="preview-image-boxes" style="width: ' + box.find('.preview-img').eq(0).attr('width') + 'px"></div>');
}
box.replaceWith(mountNode);
ReactDOM.render(<span>{priviewImgs}</span>, mountNode[0]);
});
......
scripts/home.js
浏览文件 @ c821b2cf
......@@ -59,8 +59,8 @@ ReactDOM.render((
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
<h1 key="h1">实例/优秀的设计实践</h1>
<p key="p" style={{maxWidth: 310}}>近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。</p>
<h1 key="h1">最佳实践</h1>
<p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
type="right"/></Button></div>
</QueueAnim>
......@@ -71,8 +71,8 @@ ReactDOM.render((
ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
<h1 key="h1">设计模式库</h1>
<p key="p" style={{maxWidth: 260}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
<h1 key="h1">设计模式</h1>
<p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
</div>
......@@ -88,7 +88,7 @@ ReactDOM.render((
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
style={{transform: 'translateX(-100px)', opacity: 0}}/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
<h1 key="h1">几十个基础设计组件</h1>
<h1 key="h1">数十个基础设计组件</h1>
<p key="p" style={{maxWidth: 280}}>丰富而且灵活的基础组件，为业务产品提供强有力的设计支持。</p>
<div key="button"><Button type="primary" size="large"
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
......@@ -102,7 +102,7 @@ ReactDOM.render((
<ScrollOverPack className="content-wrapper">
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
<h1 key="h1">微小·确定·幸福</h1>
<p key="p">这是一套致力于提升“用户”和“设计者”使用体验的中后台设计语言。</p>
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
</QueueAnim>
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
style={{transform: 'translateY(50px)', opacity: 0}}/>
......
site/static/style.css
浏览文件 @ c821b2cf
......@@ -111,7 +111,7 @@ a.logo {
}
#autoComplete {
margin-top: -2px;
margin-top: -3px;
width: 200px;
}
......@@ -533,6 +533,7 @@ footer ul li > a {
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p,
......@@ -687,11 +688,12 @@ footer ul li > a {
}
.toc {
float: right;
position: absolute;
font-size: 12px;
background: #fff;
padding-top: 12px;
margin-right: -16px;
right: 24px;
overflow: hidden;
}
.toc.sticky {
......@@ -1312,14 +1314,31 @@ a.entry-link:hover .anticon-smile {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.outside-link:after {
content: '\e669';
font-family: 'anticon';
margin-left: 5px;
font-size: 12px;
}
.image-modal {
text-align: center;
}
.image-modal-container {
padding: 8px 8px 32px 8px;
}
.image-modal .ant-modal-header {
display: none;
}
.image-modal .outside-link {
position: absolute;
right: 16px;
bottom: 16px;
}
.image-modal img {
max-width: 100%;
}
site/templates/aside.html
浏览文件 @ c821b2cf
......@@ -5,7 +5,9 @@
{%- if category.pages.length === 1 %}
{%- for item in category.pages|splitComponentsByType(category.name) %}
<li class="{%- if item.title === post.title %}current{%- endif %}">
<a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
<a href="{%- if item.meta.link %}{{item.meta.link}}{%- else %}{{permalink_url(item)}}{%- endif %}"
{%- if item.meta.link %}target="_blank"{%- endif %}
class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
{{item.title}}
<span class="chinese">{{item.meta.chinese}}</span>
</a>
......
site/templates/home.html
浏览文件 @ c821b2cf
......@@ -18,6 +18,7 @@
padding: 0;
overflow: unset;
display: inline;
min-height: 600px;
}
#home-page,
......@@ -25,10 +26,6 @@
height: 100%;
}
.index-page {
min-height: 600px;
}
header {
position: fixed;
z-index: 999;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或