mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
update new docs
This commit is contained in:
afc163
parent
c821b2cf03
commit
f051e8828e
@ -40,39 +40,39 @@
|
||||
|
||||
### 填空
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" good>
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" bad>
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" good>
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png" bad>
|
||||
|
||||
当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
|
||||
|
||||
### 结构化的格式
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
|
||||
|
||||
@ -80,25 +80,25 @@
|
||||
|
||||
### 密码加强计
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
用于统计当前输入长度，以及是否超过系统阈值。
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
|
||||
---
|
||||
|
||||
|
||||
列表是非常常见的界面元素，有多种使用场景：
|
||||
|
||||
- 获取概览
|
||||
@ -18,81 +17,81 @@
|
||||
|
||||
### 显示详情信息
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
|
||||
|
||||
### 显示更多文本
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
|
||||
|
||||
### 显示长列表
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
两层结构。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" 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" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
多层结构。
|
||||
|
||||
@ -100,18 +99,18 @@
|
||||
|
||||
## 案例
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
功能可有批操作，升序降序，分页，单条操作。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
列表各项的合并、详情展开。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" width="50%" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" align="right" alt="图片的描述语句" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
卡片网格。
|
||||
|
||||
@ -59,6 +59,8 @@
|
||||
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">
|
||||
|
||||
@ -5,8 +5,6 @@
|
||||
|
||||
---
|
||||
|
||||
<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
|
||||
Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。
|
||||
@ -17,7 +15,7 @@ Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
### 金融云
|
||||
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
|
||||
|
||||
|
||||
@ -29,10 +29,10 @@
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" class="resource-card disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/bAfRYPEppiuUQjR.png">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/CxXbSpIXckHOtWl.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Sketch Components</span>
|
||||
<span class="resource-card-description">Ant Design 组件的 Sketch 视觉稿</span>
|
||||
<span class="resource-card-title">Ant Cool</span>
|
||||
<span class="resource-card-description">一个机智的设计资源共享工具</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-aside'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
||||
@ -32,7 +32,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-ceiling'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
||||
@ -77,7 +77,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top-aside'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
||||
@ -54,7 +54,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
||||
@ -150,7 +150,6 @@ var PriviewImg = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
visible: false,
|
||||
boxLength: 1,
|
||||
};
|
||||
},
|
||||
showImageModal() {
|
||||
@ -164,11 +163,10 @@ var PriviewImg = React.createClass({
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const width = (100.0 / this.props.boxLength) + '%';
|
||||
const goodCls = this.props.good ? 'good' : '';
|
||||
const badCls = this.props.bad ? 'bad' : '';
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: width }}>
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} alt="Sample Picture" />
|
||||
</div>
|
||||
@ -190,16 +188,20 @@ InstantClickChangeFns.push(function() {
|
||||
previewImageBoxes.each(function(i, box) {
|
||||
box = $(box);
|
||||
const priviewImgs = [];
|
||||
const boxLength = box.find('.preview-img').length;
|
||||
box.find('.preview-img').each(function(i, img) {
|
||||
const priviewImgNodes = box.find('.preview-img');
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg boxLength={boxLength} key={i} src={img.src}
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
|
||||
alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
);
|
||||
});
|
||||
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>');
|
||||
if (priviewImgNodes.length === 1) {
|
||||
let width = priviewImgNodes.eq(0).attr('width') || '';
|
||||
if (width && width.indexOf('%') < 0) {
|
||||
width += 'px';
|
||||
}
|
||||
mountNode = $('<div class="preview-image-boxes" style="width: ' + width + '"></div>');
|
||||
}
|
||||
box.replaceWith(mountNode);
|
||||
ReactDOM.render(<span>{priviewImgs}</span>, mountNode[0]);
|
||||
|
||||
@ -522,7 +522,7 @@ footer ul li > a {
|
||||
}
|
||||
|
||||
.markdown h1 { font-size: 28px; }
|
||||
.markdown h2 { font-size: 24px; }
|
||||
.markdown h2 { font-size: 22px; }
|
||||
.markdown h3 { font-size: 18px; }
|
||||
.markdown h4 { font-size: 16px; }
|
||||
.markdown h5 { font-size: 14px; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user