diff --git a/docs/pattern/form.md b/docs/pattern/form.md index a2248bacf3..2112b164de 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -40,39 +40,39 @@ ### 填空 -图片的描述语句 +图片的描述语句 在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。 ### 组合输入框 -图片的描述语句 +图片的描述语句 当两个输入框关联性很强时，可以前后拼接，减少页面空间。 ### 对齐方式 -图片的描述语句 +图片的描述语句 在页面设计表单时，按钮组必须和输入框左对齐。 ### 禁用主按钮 -图片的描述语句 -图片的描述语句 +图片的描述语句 +图片的描述语句 当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。 ### 结构化的格式 -图片的描述语句 +图片的描述语句 用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。 ### 输入提示 & 输入提醒 -图片的描述语句 -图片的描述语句 +图片的描述语句 +图片的描述语句 输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。 @@ -80,25 +80,25 @@ ### 密码加强计 -图片的描述语句 +图片的描述语句 提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。 ### 校验 -图片的描述语句 -图片的描述语句 +图片的描述语句 +图片的描述语句 -图片的描述语句 +图片的描述语句 -图片的描述语句 +图片的描述语句 通过不同的“校验”规则和形式进行反馈，避免用户在点击提交后才刚刚开始“校验”，让用户提前纠正错误。 ### 字数校验框 -图片的描述语句 +图片的描述语句 用于统计当前输入长度，以及是否超过系统阈值。 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 6a3e2ee2da..8c4c45ff80 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -5,7 +5,6 @@ --- - 列表是非常常见的界面元素，有多种使用场景： - 获取概览 @@ -18,81 +17,81 @@ ### 显示详情信息 -图片的描述语句 +图片的描述语句 气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
-图片的描述语句 +图片的描述语句 列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
-图片的描述语句 +图片的描述语句 弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
-图片的描述语句 +图片的描述语句 双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
-图片的描述语句 +图片的描述语句 单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。 ### 显示更多文本 -图片的描述语句 +图片的描述语句 宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
-图片的描述语句 +图片的描述语句 对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。 ### 显示图片 -图片的描述语句 +图片的描述语句 走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
-图片的描述语句 +图片的描述语句 缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。 ### 显示长列表 -图片的描述语句 +图片的描述语句 分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
-图片的描述语句 +图片的描述语句 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 ### 显示分类或者层级的列表 -图片的描述语句 -图片的描述语句 +图片的描述语句 +图片的描述语句 两层结构。
-图片的描述语句 -图片的描述语句 +图片的描述语句 +图片的描述语句 多层结构。 @@ -100,18 +99,18 @@ ## 案例 -图片的描述语句 +图片的描述语句 功能可有批操作，升序降序，分页，单条操作。
-图片的描述语句 +图片的描述语句 列表各项的合并、详情展开。
-图片的描述语句 +图片的描述语句 卡片网格。 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index ea798cc9a8..f330443501 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -59,6 +59,8 @@ 3. 登陆工具。 4. 面包屑（可选）。 +
+ diff --git a/docs/practice/cases.md b/docs/practice/cases.md index d205be91d7..7ace801f33 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -5,8 +5,6 @@ --- - - Ant Design 是面向中后台的 UI 设计语言。 从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。 @@ -17,7 +15,7 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 - + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 diff --git a/docs/resource/download.md b/docs/resource/download.md index 6edcb7b8f3..78f78dd8c2 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -29,10 +29,10 @@ - + - Sketch Components - Ant Design 组件的 Sketch 视觉稿 + Ant Cool + 一个机智的设计资源共享工具 diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md index d044e4da96..06764f0ad2 100644 --- a/docs/spec/layout/demo/aside.md +++ b/docs/spec/layout/demo/aside.md @@ -61,7 +61,7 @@ ReactDOM.render( -, document.getElementById('spec-layout-demo-aside')); +, mountNode); ```` ````css diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md index 8c7911535f..9675c8fd7f 100644 --- a/docs/spec/layout/demo/ceiling.md +++ b/docs/spec/layout/demo/ceiling.md @@ -32,7 +32,7 @@ ReactDOM.render( -, document.getElementById('spec-layout-demo-ceiling')); +, mountNode); ```` ````css diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md index 1dbea1dae8..b779b093c8 100644 --- a/docs/spec/layout/demo/top-aside.md +++ b/docs/spec/layout/demo/top-aside.md @@ -77,7 +77,7 @@ ReactDOM.render( -, document.getElementById('spec-layout-demo-top-aside')); +, mountNode); ```` ````css diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md index 90a58be2b9..a2d6163b48 100644 --- a/docs/spec/layout/demo/top.md +++ b/docs/spec/layout/demo/top.md @@ -54,7 +54,7 @@ ReactDOM.render( -, document.getElementById('spec-layout-demo-top')); +, mountNode); ```` ````css diff --git a/scripts/demo.js b/scripts/demo.js index 397eb560ee..f2e73a01a2 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -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 ( -
+
Sample Picture
@@ -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( - ); }); let mountNode = $('
'); - if (boxLength === 1) { - mountNode = $('
'); + if (priviewImgNodes.length === 1) { + let width = priviewImgNodes.eq(0).attr('width') || ''; + if (width && width.indexOf('%') < 0) { + width += 'px'; + } + mountNode = $('
'); } box.replaceWith(mountNode); ReactDOM.render({priviewImgs}, mountNode[0]); diff --git a/site/static/style.css b/site/static/style.css index 21baa1ecac..fae37924b6 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -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; }