From 2f1312cce3c63c0e4008d3bd148d26525116ae82 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 4 Jan 2016 20:31:37 +0800 Subject: [PATCH 01/58] change layout --- pattern/advanced-search.md | 8 ++++++++ pattern/complex-table.md | 8 ++++++++ pattern/form.md | 8 ++++++++ pattern/index.md | 8 ++++++++ pattern/list.md | 8 ++++++++ pattern/navigation.md | 8 ++++++++ pattern/table.md | 8 ++++++++ practice/index.md | 8 ++++++++ site/templates/layout.html | 11 +++++++---- spec/pattern.md | 9 --------- 10 files changed, 71 insertions(+), 13 deletions(-) create mode 100644 pattern/advanced-search.md create mode 100644 pattern/complex-table.md create mode 100644 pattern/form.md create mode 100644 pattern/index.md create mode 100644 pattern/list.md create mode 100644 pattern/navigation.md create mode 100644 pattern/table.md create mode 100644 practice/index.md delete mode 100644 spec/pattern.md diff --git a/pattern/advanced-search.md b/pattern/advanced-search.md new file mode 100644 index 0000000000..ee6cc664ef --- /dev/null +++ b/pattern/advanced-search.md @@ -0,0 +1,8 @@ +# 高级搜索 + +- category: 6 +- order: 6 + +--- + +占位。 diff --git a/pattern/complex-table.md b/pattern/complex-table.md new file mode 100644 index 0000000000..e2e7b5ffa7 --- /dev/null +++ b/pattern/complex-table.md @@ -0,0 +1,8 @@ +# 数据表格 + +- category: 5 +- order: 5 + +--- + +占位。 diff --git a/pattern/form.md b/pattern/form.md new file mode 100644 index 0000000000..b5a9f69a1f --- /dev/null +++ b/pattern/form.md @@ -0,0 +1,8 @@ +# 表单 + +- category: 2 +- order: 2 + +--- + +占位。 diff --git a/pattern/index.md b/pattern/index.md new file mode 100644 index 0000000000..af541f4d92 --- /dev/null +++ b/pattern/index.md @@ -0,0 +1,8 @@ +# 设计模式 + +- category: 0 +- order: 0 + +--- + +占位。 diff --git a/pattern/list.md b/pattern/list.md new file mode 100644 index 0000000000..507b0861e9 --- /dev/null +++ b/pattern/list.md @@ -0,0 +1,8 @@ +# 列表 + +- category: 3 +- order: 3 + +--- + +占位。 diff --git a/pattern/navigation.md b/pattern/navigation.md new file mode 100644 index 0000000000..54e212cb2b --- /dev/null +++ b/pattern/navigation.md @@ -0,0 +1,8 @@ +# 导航 + +- category: 1 +- order: 1 + +--- + +占位。 diff --git a/pattern/table.md b/pattern/table.md new file mode 100644 index 0000000000..2199979a8c --- /dev/null +++ b/pattern/table.md @@ -0,0 +1,8 @@ +# 表格 + +- category: 4 +- order: 4 + +--- + +占位。 diff --git a/practice/index.md b/practice/index.md new file mode 100644 index 0000000000..6f0af86ffe --- /dev/null +++ b/practice/index.md @@ -0,0 +1,8 @@ +# 实践 + +- category: 0 +- order: 0 + +--- + +占位。 diff --git a/site/templates/layout.html b/site/templates/layout.html index 7f97491e78..9f810d32b6 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -66,15 +66,18 @@
  • 首页
    • +
  • + 实践 +
    • +
  • + 模式 +
  • - 设计 + 语言
  • React UI
    • -
  • - Github -
    • diff --git a/spec/pattern.md b/spec/pattern.md deleted file mode 100644 index 81e69b7e1e..0000000000 --- a/spec/pattern.md +++ /dev/null @@ -1,9 +0,0 @@ -# 设计模式 - -- category: 模式 -- disabled: true - ---- - -敬请期待。 - From a0ea479108c8426135bd3f4a5608291607509e1e Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 4 Jan 2016 20:52:48 +0800 Subject: [PATCH 02/58] Add doc toc --- site/templates/page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/templates/page.html b/site/templates/page.html index 68f52ec3b0..e2ccae706b 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -18,8 +18,8 @@

    {{ post.title }} {{ post.meta.chinese }}

    +
    {{ post.toc }}
    {{ post.html|add_anchor }}
    {% endblock %} - From 2be1ac90df84202c646d184364dcec55e6fb90b9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 4 Jan 2016 22:53:44 +0800 Subject: [PATCH 03/58] Add prev & next nav --- site/static/script.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/site/static/script.js b/site/static/script.js index ab7da4559e..57c700c126 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -56,6 +56,27 @@ InstantClickChangeFns.push(function() { // 移动 API 文档到演示下方 $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); + // 添加上一页下一页 + if ($('.aside-container li > a').length > 0) { + var links = $('.aside-container li > a'); + var currentLinkIndex = -1; + links.each(function(i, item) { + if ($(item).parent().hasClass('current')) { + currentLinkIndex = i; + } + }); + var prevNextNavNode = $('
    '); + var prevLink = links[currentLinkIndex - 1]; + var nextLink = links[currentLinkIndex + 1]; + if (prevLink) { + prevNextNavNode.append('' + prevLink.innerHTML + ''); + } + if (nextLink) { + prevNextNavNode.append('' + nextLink.innerHTML + ''); + } + prevNextNavNode.appendTo('.main-container'); + } + $('.nav-phone-icon').click(function() { $(this).prev().toggle(); }); From 31b472e2099d02055e7c01cc5785bd81f4f74226 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 15:27:56 +0800 Subject: [PATCH 04/58] update toc style --- site/static/script.js | 35 ++++++++++-- site/static/style.css | 112 ++++++++++++++++++++++---------------- site/templates/demos.html | 2 +- site/templates/page.html | 2 +- 4 files changed, 97 insertions(+), 54 deletions(-) diff --git a/site/static/script.js b/site/static/script.js index 57c700c126..4e24a7d440 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -42,10 +42,8 @@ InstantClickChangeFns.push(function() { }); function hashChange() { - if (location.hash.indexOf('#demo-') === 0) { - $('.demos-anchor a').removeClass('current'); - $('.demos-anchor a[href="' + location.hash + '"]').addClass('current'); - } + $('.anchor a').removeClass('current'); + $('.anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current'); } hashChange(); @@ -56,6 +54,31 @@ InstantClickChangeFns.push(function() { // 移动 API 文档到演示下方 $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); + var titles = $('.markdown :header:not(h1)'); + function onScroll() { + var doc = $(document); + var top = doc.scrollTop(), i; + if (top >= doc.height()- $(window).height() - 20) { + i = titles.length - 1; + } else { + for (i=0; i titles.length - 1) ? (title.length - 1) : i; + } + $('.anchor a').removeClass('current'); + $('.anchor a').eq(i).addClass('current'); + } + + onScroll(); + + // 滚动高亮 + $(window).on('scroll', onScroll); + // 添加上一页下一页 if ($('.aside-container li > a').length > 0) { var links = $('.aside-container li > a'); @@ -69,10 +92,10 @@ InstantClickChangeFns.push(function() { var prevLink = links[currentLinkIndex - 1]; var nextLink = links[currentLinkIndex + 1]; if (prevLink) { - prevNextNavNode.append('' + prevLink.innerHTML + ''); + prevNextNavNode.append('' + prevLink.innerHTML + ''); } if (nextLink) { - prevNextNavNode.append('' + nextLink.innerHTML + ''); + prevNextNavNode.append('' + nextLink.innerHTML + ''); } prevNextNavNode.appendTo('.main-container'); } diff --git a/site/static/style.css b/site/static/style.css index 7f83d8eb64..6f9f4830d6 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -499,6 +499,7 @@ footer ul li > a { animation: xRightMatrix .5s ease-out; background: #fff; min-height: 500px; + position: relative; } .main-container-center { @@ -656,6 +657,69 @@ footer ul li > a { margin-left: 0.5em; } +.prev-next-nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + border-top: 1px solid #e9e9e9; + font-size: 16px; +} + +.prev-next-nav > a { + padding: 0 24px; + width: 50%; + float: left; + line-height: 72px; + height: 72px; +} + +.prev-next-nav > .prev-page:before { + font-family: 'anticon'; + content: '\e601'; + font-size: 12px; + margin-right: 1em; +} + +.prev-next-nav > .next-page { + text-align: right; + float: right; +} + +.prev-next-nav > .next-page:after { + font-family: 'anticon'; + content: '\e600'; + font-size: 12px; + margin-left: 1em; +} + +.toc { + position: sticky; + top: 40px; + float: right; + font-size: 12px; +} + +.toc li > ul { + text-indent: 10px; +} + +.toc a { + padding-left: 10px; + border-left: 2px solid #eee; + display: block; + transition: all 0.3s ease; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 120px; +} + +.toc a.current { + border-color: #2db7f5; +} + /****************************动画样式*********************************/ .delay-mode { animation-fill-mode: backwards !important; @@ -2121,8 +2185,8 @@ a.entry-link:hover .anticon-smile { .demos-anchor { color: #aaa; position: fixed; - top: 120px; - right: 0; + top: 100px; + right: 32px; z-index: 100; transition: all 0.3s ease; background: #fff; @@ -2138,47 +2202,3 @@ a.entry-link:hover .anticon-smile { animation-fill-mode: forwards; opacity: 0; } - -.demos-anchor li { - list-style: decimal outside; - width: 75px; - margin-bottom: 2px; -} - -.demos-anchor a { - color: #666; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - display: inline-block; - width: 100%; -} - -.demos-anchor a > span { - position: relative; -} - -.demos-anchor a.current > span, -.demos-anchor a > span:hover { - color: #2db7f5; -} - -.demos-anchor a > span:after { - text-decoration: underline; - position: absolute; - top: auto; - bottom: -1px; - left: 0; - width: 100%; - height: 1px; - background-color: #2db7f5; - content: ''; - transition: all 0.2s; - backface-visibility: hidden; - transform: scaleX(0); -} - -.demos-anchor a > span:hover:after { - transform: scaleX(1); -} diff --git a/site/templates/demos.html b/site/templates/demos.html index 8d0a429a42..16dacdfc86 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -33,7 +33,7 @@ {%- endif %} -
      +
        {%- for item in items %} {%- set post = item.meta.filepath|parsePost %}
      • diff --git a/site/templates/page.html b/site/templates/page.html index e2ccae706b..d474f51b2c 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -16,9 +16,9 @@ {% block content %}
        +
        {{ post.toc }}

        {{ post.title }} {{ post.meta.chinese }}

        -
        {{ post.toc }}
        {{ post.html|add_anchor }}
        From ae718f8f7003415189d5d5af60a6dabc7363090e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 15:38:36 +0800 Subject: [PATCH 05/58] new home page container --- scripts/home.js | 8 ++++++++ site/static/script.js | 2 +- site/templates/home.html | 36 ++++++------------------------------ webpack.config.js | 1 + 4 files changed, 16 insertions(+), 31 deletions(-) create mode 100644 scripts/home.js diff --git a/scripts/home.js b/scripts/home.js new file mode 100644 index 0000000000..29e83b3651 --- /dev/null +++ b/scripts/home.js @@ -0,0 +1,8 @@ +const React = require('react'); +const ReactDOM = require('react-dom'); + +ReactDOM.render(( +
        + 首页坑位 +
        +), document.getElementById('home-container')); diff --git a/site/static/script.js b/site/static/script.js index 4e24a7d440..7d8b972dc6 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -68,7 +68,7 @@ InstantClickChangeFns.push(function() { } i--; i = (i < 0) ? 0 : i; - i = (i > titles.length - 1) ? (title.length - 1) : i; + i = (i > titles.length - 1) ? (titles.length - 1) : i; } $('.anchor a').removeClass('current'); $('.anchor a').eq(i).addClass('current'); diff --git a/site/templates/home.html b/site/templates/home.html index aed819ef97..56e14029fc 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -1,39 +1,15 @@ {% extends "layout.html" %} -{% block styles %} - -{% endblock %} - {% block bodyAttribute %}class="index-page"{% endblock %} {% block content %} -
        - -
        - +
        + {% endblock %} diff --git a/webpack.config.js b/webpack.config.js index 4a3a9d5cf1..1e1d2fe777 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,6 +6,7 @@ var pkg = require('./package'); var entry = {}; entry['index'] = './scripts/importCss.js'; entry['demo'] = './scripts/demo.js'; +entry['home'] = './scripts/home.js'; module.exports = { entry: entry, From f267d4fda71e47de8ca714d69d74f54eaffc374a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 17:28:49 +0800 Subject: [PATCH 06/58] change docs directories --- CHANGELOG.md | 72 ++++++++--- {pattern => docs/pattern}/advanced-search.md | 0 {pattern => docs/pattern}/complex-table.md | 0 {pattern => docs/pattern}/form.md | 0 {pattern => docs/pattern}/index.md | 0 {pattern => docs/pattern}/list.md | 0 {pattern => docs/pattern}/navigation.md | 0 {pattern => docs/pattern}/table.md | 0 {practice => docs/practice}/index.md | 0 docs/{ => react}/getting-started.md | 0 docs/{ => react}/install.md | 0 docs/{ => react}/install_en.md | 0 docs/{ => react}/introduce.md | 0 docs/{ => react}/upgrade-notes.md | 0 {spec => docs/resource}/tools.md | 0 {spec => docs/spec}/colors.md | 0 {spec => docs/spec}/easing.md | 0 {spec => docs/spec}/font.md | 0 {spec => docs/spec}/introduce.md | 0 {spec => docs/spec}/layout/demo/aside.md | 0 {spec => docs/spec}/layout/demo/ceiling.md | 0 {spec => docs/spec}/layout/demo/top-aside.md | 0 {spec => docs/spec}/layout/demo/top.md | 0 {spec => docs/spec}/layout/index.md | 0 {spec => docs/spec}/motion.md | 0 {spec => docs/spec}/page-transition.md | 0 {spec => docs/spec}/typography.md | 0 site/static/style.css | 125 ++++++++----------- site/templates/layout.html | 19 +-- site/theme.js | 20 ++- 30 files changed, 131 insertions(+), 105 deletions(-) rename {pattern => docs/pattern}/advanced-search.md (100%) rename {pattern => docs/pattern}/complex-table.md (100%) rename {pattern => docs/pattern}/form.md (100%) rename {pattern => docs/pattern}/index.md (100%) rename {pattern => docs/pattern}/list.md (100%) rename {pattern => docs/pattern}/navigation.md (100%) rename {pattern => docs/pattern}/table.md (100%) rename {practice => docs/practice}/index.md (100%) rename docs/{ => react}/getting-started.md (100%) rename docs/{ => react}/install.md (100%) rename docs/{ => react}/install_en.md (100%) rename docs/{ => react}/introduce.md (100%) rename docs/{ => react}/upgrade-notes.md (100%) rename {spec => docs/resource}/tools.md (100%) rename {spec => docs/spec}/colors.md (100%) rename {spec => docs/spec}/easing.md (100%) rename {spec => docs/spec}/font.md (100%) rename {spec => docs/spec}/introduce.md (100%) rename {spec => docs/spec}/layout/demo/aside.md (100%) rename {spec => docs/spec}/layout/demo/ceiling.md (100%) rename {spec => docs/spec}/layout/demo/top-aside.md (100%) rename {spec => docs/spec}/layout/demo/top.md (100%) rename {spec => docs/spec}/layout/index.md (100%) rename {spec => docs/spec}/motion.md (100%) rename {spec => docs/spec}/page-transition.md (100%) rename {spec => docs/spec}/typography.md (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d4f9bd04f..71a8f693d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,9 @@ --- -## 0.11.2 `2015-01-03` +## 0.11.2 + +`2015-01-03` - 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。 - 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771) @@ -18,14 +20,18 @@ - 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 - 组件和文档的样式小调整。 -## 0.11.1 `2015-12-29` +## 0.11.1 + +`2015-12-29` - 修复一个 Table 无法修改 pageSize 的问题。 - 修复一个 Table 子表格展开的对齐问题。 - 修复一个 Chrome 下部分图标左侧切边的问题。 - 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762) -## 0.11.0 `2015-12-28` +## 0.11.0 + +`2015-12-28` - **移除默认加载的样式文件，样式现在需要独立加载。** - 按钮圆角调整为 `6px`。 @@ -103,11 +109,15 @@ --- -## 0.10.5 `2016-01-04` +## 0.10.5 + +`2016-01-04` - 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793) -## 0.10.4 `2015-11-30` +## 0.10.4 + +`2015-11-30` - 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7) - 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。 @@ -115,7 +125,9 @@ - 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606) -## 0.10.3 `2015-11-26` +## 0.10.3 + +`2015-11-26` - 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593) - 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。 @@ -123,7 +135,9 @@ - 对演示和样式代码增加了 lint 检查。 -## 0.10.2 `2015-11-25` +## 0.10.2 + +`2015-11-25` - Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。 - 优化 Badge 动画效果。 @@ -134,7 +148,9 @@ - InputNumber 同时设置 `size` `className` 时会有冲突。 -## 0.10.1 `2015-11-20` +## 0.10.1 + +`2015-11-20` - 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566) - 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。 @@ -147,7 +163,9 @@ - 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。 -## 0.10.0 `2015-11-20` +## 0.10.0 + +`2015-11-20` - 全面兼容 `react@0.14.x`。 - 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。 @@ -217,12 +235,16 @@ --- -## 0.9.3 ~ 0.9.5 `2015-11-04` +## 0.9.3 ~ 0.9.5 + +`2015-11-04` * 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。 -## 0.9.2 `2015-10-26` +## 0.9.2 + +`2015-10-26` * Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76) * 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d) @@ -230,7 +252,9 @@ * 修复一些小的样式问题。 -## 0.9.1 `2015-09-26` +## 0.9.1 + +`2015-09-26` * 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317) * 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。 @@ -249,7 +273,9 @@ * 部分组件交互和视觉效果修正。 -## 0.9.0 `2015-09-14` +## 0.9.0 + +`2015-09-14` * 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。 * 优化弹出层类组件的动画效果，使其更加流畅。 @@ -288,7 +314,9 @@ * 支持和 react-router 结合使用。 -## 0.8.0 `2015-08-25` +## 0.8.0 + +`2015-08-25` 这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。 @@ -300,12 +328,16 @@ * 排查并修复 IE 和 safari 等浏览器的兼容问题。 * 大量代码重构，演示代码补充，文档更新、以及样式上的优化。 -## 0.7.3 `2015-07-30` +## 0.7.3 + +`2015-07-30` * 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。 * 更新了部分文档。 -## 0.7.2 `2015-07-27` +## 0.7.2 + +`2015-07-27` * 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。 * 重构了 message 组件。 @@ -313,14 +345,18 @@ * 部分代码切换至 ES6 模式。 * 修正了部分组件的样式和演示，优化部分动画。 -## 0.7.1 `2015-07-22` +## 0.7.1 + +`2015-07-22` * 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。 * select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。 * 修正了部分组件的样式和演示。 * 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。 -## 0.7.0 `2015-07-21` +## 0.7.0 + +`2015-07-21` * 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。 * 发布 [Ant Design 首页](http://ant.design/) 和入门文档。 diff --git a/pattern/advanced-search.md b/docs/pattern/advanced-search.md similarity index 100% rename from pattern/advanced-search.md rename to docs/pattern/advanced-search.md diff --git a/pattern/complex-table.md b/docs/pattern/complex-table.md similarity index 100% rename from pattern/complex-table.md rename to docs/pattern/complex-table.md diff --git a/pattern/form.md b/docs/pattern/form.md similarity index 100% rename from pattern/form.md rename to docs/pattern/form.md diff --git a/pattern/index.md b/docs/pattern/index.md similarity index 100% rename from pattern/index.md rename to docs/pattern/index.md diff --git a/pattern/list.md b/docs/pattern/list.md similarity index 100% rename from pattern/list.md rename to docs/pattern/list.md diff --git a/pattern/navigation.md b/docs/pattern/navigation.md similarity index 100% rename from pattern/navigation.md rename to docs/pattern/navigation.md diff --git a/pattern/table.md b/docs/pattern/table.md similarity index 100% rename from pattern/table.md rename to docs/pattern/table.md diff --git a/practice/index.md b/docs/practice/index.md similarity index 100% rename from practice/index.md rename to docs/practice/index.md diff --git a/docs/getting-started.md b/docs/react/getting-started.md similarity index 100% rename from docs/getting-started.md rename to docs/react/getting-started.md diff --git a/docs/install.md b/docs/react/install.md similarity index 100% rename from docs/install.md rename to docs/react/install.md diff --git a/docs/install_en.md b/docs/react/install_en.md similarity index 100% rename from docs/install_en.md rename to docs/react/install_en.md diff --git a/docs/introduce.md b/docs/react/introduce.md similarity index 100% rename from docs/introduce.md rename to docs/react/introduce.md diff --git a/docs/upgrade-notes.md b/docs/react/upgrade-notes.md similarity index 100% rename from docs/upgrade-notes.md rename to docs/react/upgrade-notes.md diff --git a/spec/tools.md b/docs/resource/tools.md similarity index 100% rename from spec/tools.md rename to docs/resource/tools.md diff --git a/spec/colors.md b/docs/spec/colors.md similarity index 100% rename from spec/colors.md rename to docs/spec/colors.md diff --git a/spec/easing.md b/docs/spec/easing.md similarity index 100% rename from spec/easing.md rename to docs/spec/easing.md diff --git a/spec/font.md b/docs/spec/font.md similarity index 100% rename from spec/font.md rename to docs/spec/font.md diff --git a/spec/introduce.md b/docs/spec/introduce.md similarity index 100% rename from spec/introduce.md rename to docs/spec/introduce.md diff --git a/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md similarity index 100% rename from spec/layout/demo/aside.md rename to docs/spec/layout/demo/aside.md diff --git a/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md similarity index 100% rename from spec/layout/demo/ceiling.md rename to docs/spec/layout/demo/ceiling.md diff --git a/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md similarity index 100% rename from spec/layout/demo/top-aside.md rename to docs/spec/layout/demo/top-aside.md diff --git a/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md similarity index 100% rename from spec/layout/demo/top.md rename to docs/spec/layout/demo/top.md diff --git a/spec/layout/index.md b/docs/spec/layout/index.md similarity index 100% rename from spec/layout/index.md rename to docs/spec/layout/index.md diff --git a/spec/motion.md b/docs/spec/motion.md similarity index 100% rename from spec/motion.md rename to docs/spec/motion.md diff --git a/spec/page-transition.md b/docs/spec/page-transition.md similarity index 100% rename from spec/page-transition.md rename to docs/spec/page-transition.md diff --git a/spec/typography.md b/docs/spec/typography.md similarity index 100% rename from spec/typography.md rename to docs/spec/typography.md diff --git a/site/static/style.css b/site/static/style.css index 6f9f4830d6..67c600fa36 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -14,7 +14,7 @@ body { line-height: 1.5; color: #666; font-size: 14px; - background: #fff; + background: #ECECEC; transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); overflow-x: hidden; } @@ -67,8 +67,8 @@ a:hover { header { width: 100%; background: #fff; - border-bottom: 1px solid #eee; font-size: 16px; + margin-bottom: 24px; } .fn-hide { @@ -92,7 +92,7 @@ a.logo { text-transform: uppercase; font-size: 18px; font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif; - color: #6EB4E0; + color: #2db7f5; } .logo img { @@ -204,22 +204,22 @@ a.nav-link-disabled { } .nav ul li.current a { - color: #6AC2F5; + color: #2db7f5; font-weight: 600; } .nav ul li a:hover, .nav ul li .hover { - color: #6AC2F5; + color: #2db7f5; } .nav .bar { width: 20%; height: 3px; position: absolute; - top: 0; + bottom: 0; left: 0; - background: #6AC2F5; + background: #2db7f5; display: none; transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1); } @@ -320,7 +320,7 @@ a.nav-link-disabled { .load-main-box .load-bar { width: 0%; height: 2px; - background: #6EB4E0; + background: #2db7f5; transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);; } @@ -383,40 +383,45 @@ footer ul li > a { .aside-container { width: 260px; - background: #F9F9F9; - padding-top: 10px; padding-bottom: 50px; float: left; + border-right: 1px solid #e9e9e9; } .aside-container > ul > li { overflow: hidden; + position: relative; + right: -1px; + z-index: 1; +} + +.aside-container > ul > li > ul { + margin-left: 24px; } .aside-container li h4 { font-size: 14px; font-weight: 600; - padding: 10px 0 10px 46px; + padding: 0 0 0 24px; + line-height: 40px; + height: 40px; margin: 0; - color: #5C6B77; cursor: pointer; - transition: background .5s, border .5s; - border-left: 3px solid transparent; position: relative; z-index: 1; - background: #F9F9F9; position: relative; + background: #fff; + right: 1px; } .aside-container li h4:after { position: absolute; - top: 11px; - right: 30px; + top: 0; + right: 20px; content: "\e602"; font-family: "anticon"; transform: scale(0.6); font-size: 12px; - color: #5C6B76; opacity: 0; transition: all 0.3s ease; } @@ -434,17 +439,13 @@ footer ul li > a { display: block; } -.aside-container li > ul li { - border-left: 3px solid transparent; -} - .aside-container li a { line-height: 40px; height: 40px; display: block; - padding-left: 60px; + padding-left: 24px; font-size: 14px; - color: #5C6B76; + color: #666; } .aside-container li.type-divider { @@ -453,18 +454,7 @@ footer ul li > a { transform: scale(0.9); transform-origin: 0 50%; color: #aaa; - text-shadow: 0px 1px 0px #FFF; - margin: 6px 0 6px 48px; -} - -.aside-container > ul > li > a { - padding-left: 46px; - font-size: 14px; - border-left: 3px solid transparent; -} - -.aside-container > ul > li.current > a { - border-left: 0; + margin: 6px 0 6px 24px; } .aside-container .chinese { @@ -475,31 +465,36 @@ footer ul li > a { } .aside-container li a:hover { - color: #6EB4E0; + color: #2db7f5; } .aside-container .current { - background: #fff; - border-left: 3px solid #71B5DE; - color: #71B5DE; + border-right: 2px solid #2db7f5; + color: #2db7f5; } .aside-container .current a { - color: #71B5DE; + color: #2db7f5; } .main-wrapper { - background: #f9f9f9; + background: #fff; + width: 92%; + margin: 0 auto; + border-radius: 6px; + overflow: hidden; + padding: 24px 0 0; + margin-bottom: 24px; } .main-container { + border-left: 1px solid #e9e9e9; margin-left: 260px; - padding: 30px 40px 120px; - -webkit-animation: xRightMatrix .5s ease-out; - animation: xRightMatrix .5s ease-out; + padding: 0 40px 120px; background: #fff; min-height: 500px; position: relative; + left: -1px; } .main-container-center { @@ -530,6 +525,8 @@ footer ul li > a { .markdown h1 { color: #404040; font-weight: 500; + line-height: 40px; + margin-bottom: 24px; } .markdown h2, @@ -538,7 +535,7 @@ footer ul li > a { .markdown h5, .markdown h6 { color: #404040; - margin: 1.8em 0 1em 0; + margin: 1.6em 0 1em 0; font-weight: 500; } @@ -695,9 +692,10 @@ footer ul li > a { } .toc { - position: sticky; - top: 40px; - float: right; + position: fixed; + top: 130px; + right: 4%; + margin-right: 24px; font-size: 12px; } @@ -714,6 +712,7 @@ footer ul li > a { text-overflow: ellipsis; overflow: hidden; max-width: 120px; + line-height: 20px; } .toc a.current { @@ -1692,32 +1691,8 @@ footer ul li > a { -webkit-transform: rotateX(-180deg); } } + /***************************************************************************/ -.index-page header { - transition: opacity 0.5S; - -webkit-animation: xRightMatrix .5s ease-out; - animation: xRightMatrix .5s ease-out; -} -.index-page .nav { - -webkit-animation: yTopMatrix .5s ease-out .4s backwards; - animation: yTopMatrix .5s ease-out .4s backwards; -} - -.index-page footer { - -webkit-animation: yBottomMatrix .5s ease-out .6s backwards; - animation: yBottomMatrix .5s ease-out .6s backwards; -} - -.index-page .logo { - -webkit-animation: xLeftMatrix .5s ease-out; - animation: xLeftMatrix .5s ease-out; -} - -.index-page .search { - -webkit-animation: xRightMatrix .5s ease-out .2s backwards; - animation: xRightMatrix .5s ease-out .2s backwards; -} - .api-link { font-size: 16px; vertical-align: middle; @@ -2074,7 +2049,7 @@ a.entry-link:hover .anticon-smile { } #instantclick-bar { - background: #6EB4E0; + background: #2db7f5; } #versions-select { diff --git a/site/templates/layout.html b/site/templates/layout.html index 9f810d32b6..d9a8fec099 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -66,17 +66,20 @@
      • 首页
        • -
      • - 实践 +
      • + 实践
        • -
      • - 模式 +
      • + 模式
        • -
      • - 语言 +
      • + 语言
        • -
      • - React UI +
      • + 组件 +
        • +
      • + 资源
      diff --git a/site/theme.js b/site/theme.js index 8d79664229..0ae7b69415 100644 --- a/site/theme.js +++ b/site/theme.js @@ -15,6 +15,17 @@ module.exports = function(nico) { return Posts; } + function getRootDirectory(directory) { + var rootDirectory; + var directoryArray = directory.split('/'); + if (directory.indexOf('docs/') === 0) { + rootDirectory = directoryArray[0] + '/' + directoryArray[1]; + } else { + rootDirectory = directoryArray[0]; + } + return rootDirectory; + } + exports.reader = function(post) { var filepath = post.meta.filepath.toLowerCase(); if (filepath.indexOf('components') === 0) { @@ -51,15 +62,15 @@ module.exports = function(nico) { return ret; }, get_categories: function(posts, post) { - var rootDirectory = post.directory.split('/')[0]; + var rootDirectory = getRootDirectory(post.directory); if (!rootDirectory && post.filename.indexOf('CHANGELOG') < 0) { return; } var directories = [rootDirectory]; // docs 和 components 放在同一页 - if (rootDirectory === 'docs' || rootDirectory === 'components' || + if (rootDirectory === 'docs/react' || rootDirectory === 'components' || post.filename.indexOf('CHANGELOG') >= 0) { - directories = ['docs', 'components']; + directories = ['docs/react', 'components']; } var cacheKey = directories.join('-'); var categories; @@ -68,11 +79,12 @@ module.exports = function(nico) { } else { categories = {}; _.uniq(getAllPosts(posts).forEach(function(item) { - var itemDirectory = item.directory.split('/')[0]; + var itemDirectory = getRootDirectory(item.directory); var cat = item.meta.category; if (!cat) { return; } + console.log(itemDirectory, item.directory, directories); if (directories.indexOf(itemDirectory) >= 0 || item.filename.indexOf('CHANGELOG') >= 0) { item.filename = item.filename.toLowerCase(); From c3e404f6eab85ff857232f811fa3ca99a416039e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 18:49:43 +0800 Subject: [PATCH 07/58] update page style --- docs/pattern/index.md | 3 ++- docs/practice/bussiness.md | 9 +++++++ docs/practice/{index.md => cases.md} | 2 +- docs/resource/{tools.md => download.md} | 3 ++- docs/resource/reference.md | 8 ++++++ site/static/script.js | 7 +++++ site/static/style.css | 34 ++++++++++--------------- site/templates/layout.html | 6 ++--- site/theme.js | 1 - 9 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 docs/practice/bussiness.md rename docs/practice/{index.md => cases.md} (73%) rename docs/resource/{tools.md => download.md} (98%) create mode 100644 docs/resource/reference.md diff --git a/docs/pattern/index.md b/docs/pattern/index.md index af541f4d92..35a6a74c77 100644 --- a/docs/pattern/index.md +++ b/docs/pattern/index.md @@ -1,7 +1,8 @@ -# 设计模式 +# 典型页面 - category: 0 - order: 0 +- disabled: true --- diff --git a/docs/practice/bussiness.md b/docs/practice/bussiness.md new file mode 100644 index 0000000000..26e58ecdc8 --- /dev/null +++ b/docs/practice/bussiness.md @@ -0,0 +1,9 @@ +# 业务组件 + +- category: 1 +- order: 1 +- disabled: true + +--- + +占位。 diff --git a/docs/practice/index.md b/docs/practice/cases.md similarity index 73% rename from docs/practice/index.md rename to docs/practice/cases.md index 6f0af86ffe..c49bae3690 100644 --- a/docs/practice/index.md +++ b/docs/practice/cases.md @@ -1,4 +1,4 @@ -# 实践 +# 实践案例 - category: 0 - order: 0 diff --git a/docs/resource/tools.md b/docs/resource/download.md similarity index 98% rename from docs/resource/tools.md rename to docs/resource/download.md index 70b1c0a00b..71fc33cc06 100644 --- a/docs/resource/tools.md +++ b/docs/resource/download.md @@ -1,6 +1,7 @@ # 资源下载 -- category: 资源 +- order: 0 +- category: 0 --- diff --git a/docs/resource/reference.md b/docs/resource/reference.md new file mode 100644 index 0000000000..cec7dcbce4 --- /dev/null +++ b/docs/resource/reference.md @@ -0,0 +1,8 @@ +# 相关书籍 + +- order: 1 +- category: 1 + +--- + +待补充。 diff --git a/site/static/script.js b/site/static/script.js index 7d8b972dc6..8f0d3b855e 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -93,9 +93,13 @@ InstantClickChangeFns.push(function() { var nextLink = links[currentLinkIndex + 1]; if (prevLink) { prevNextNavNode.append('' + prevLink.innerHTML + ''); + } else { + prevNextNavNode.append(''); } if (nextLink) { prevNextNavNode.append('' + nextLink.innerHTML + ''); + } else { + prevNextNavNode.append(''); } prevNextNavNode.appendTo('.main-container'); } @@ -121,6 +125,9 @@ InstantClickChangeFns.push(function() { var navFunc = { navStrArr: [], init: function() { + if (this.navBar) { + return; + } this.navBox = $(".nav"); this.navBar = this.navBox.find(".bar"); this.navList = this.navBox.find("ul li"); diff --git a/site/static/style.css b/site/static/style.css index 67c600fa36..0049efa6d7 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -214,7 +214,6 @@ a.nav-link-disabled { } .nav .bar { - width: 20%; height: 3px; position: absolute; bottom: 0; @@ -485,16 +484,15 @@ footer ul li > a { overflow: hidden; padding: 24px 0 0; margin-bottom: 24px; + position: relative; } .main-container { border-left: 1px solid #e9e9e9; - margin-left: 260px; + margin-left: 259px; padding: 0 40px 120px; background: #fff; min-height: 500px; - position: relative; - left: -1px; } .main-container-center { @@ -660,19 +658,21 @@ footer ul li > a { left: 0; width: 100%; overflow: hidden; - border-top: 1px solid #e9e9e9; font-size: 16px; + padding-left: 260px; } -.prev-next-nav > a { +.prev-next-nav > .prev-page, +.prev-next-nav > .next-page { padding: 0 24px; width: 50%; float: left; line-height: 72px; height: 72px; + border-top: 1px solid #e9e9e9; } -.prev-next-nav > .prev-page:before { +.prev-next-nav > a.prev-page:before { font-family: 'anticon'; content: '\e601'; font-size: 12px; @@ -684,7 +684,7 @@ footer ul li > a { float: right; } -.prev-next-nav > .next-page:after { +.prev-next-nav > a.next-page:after { font-family: 'anticon'; content: '\e600'; font-size: 12px; @@ -697,6 +697,8 @@ footer ul li > a { right: 4%; margin-right: 24px; font-size: 12px; + background: #fff; + z-index: 100; } .toc li > ul { @@ -2160,20 +2162,10 @@ a.entry-link:hover .anticon-smile { .demos-anchor { color: #aaa; position: fixed; - top: 100px; - right: 32px; + margin-right: 24px; + top: 128px; + right: 4%; z-index: 100; - transition: all 0.3s ease; background: #fff; - background: rgba(255,255,255,0.9); - padding: 8px 10px 8px 24px; - border-radius: 6px 0 0 6px; - margin: 0; font-size: 12px; - border-right: 0; - -webkit-animation: .5s ease-out 0.5s xRightMatrix; - animation: .5s ease-out 0.5s xRightMatrix; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - opacity: 0; } diff --git a/site/templates/layout.html b/site/templates/layout.html index d9a8fec099..5b56f34c76 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -67,10 +67,10 @@ 首页
    • - 实践 + 实践
    • - 模式 + 模式
    • 语言 @@ -79,7 +79,7 @@ 组件
    • - 资源 + 资源
    diff --git a/site/theme.js b/site/theme.js index 0ae7b69415..e8c48a3642 100644 --- a/site/theme.js +++ b/site/theme.js @@ -84,7 +84,6 @@ module.exports = function(nico) { if (!cat) { return; } - console.log(itemDirectory, item.directory, directories); if (directories.indexOf(itemDirectory) >= 0 || item.filename.indexOf('CHANGELOG') >= 0) { item.filename = item.filename.toLowerCase(); From 9985334e3c17246ab3bc7c0951c979df102fa127 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 19:47:13 +0800 Subject: [PATCH 08/58] update page style --- site/static/home.js | 303 ------------- site/static/homeLoad.js | 116 ----- site/static/script.js | 3 + site/static/style.css | 952 +--------------------------------------- site/theme.js | 2 +- 5 files changed, 10 insertions(+), 1366 deletions(-) delete mode 100644 site/static/home.js delete mode 100644 site/static/homeLoad.js diff --git a/site/static/home.js b/site/static/home.js deleted file mode 100644 index 46b7aed017..0000000000 --- a/site/static/home.js +++ /dev/null @@ -1,303 +0,0 @@ -$(function() { - var getTransform = function() { - var style = "transform", - anim = "animation", - pers = "perspective"; - var i, prefix = ['webkit', 'moz', 'ms', 'o'], - htmlStyle = $("html")[0].style; - if (!"transform" in htmlStyle) { - for (i in prefix) { - style = "-" + prefix[i] + "-transform"; - if (style in htmlStyle) break; - } - } - if (!"animation" in htmlStyle) { - for (i in prefix) { - anim = "-" + prefix[i] + "-animation"; - if (anim in htmlStyle) break; - } - } - if (!"perspective" in htmlStyle) { - for (i in prefix) { - pers = "-" + prefix[i] + "-perspective"; - if (pers in htmlStyle) break; - } - } - return [style, anim, pers] - }; - var C = createjs || {}, - T = TweenMax || {}; - var bannerAnim = { - w: 2400, - h: 1300, - p_w: 0, - p_h: 0, - stage: null, - Canvas: null, - lineData:[ - {x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}}, - {x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}}, - {x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]}, - {x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]}, - {x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]}, - {x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]}, - {x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]}, - {x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]}, - {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, - {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]}, - ], - init: function() { - var self = this; - self.box = $(".banner-box"); - self.animBox = $("#bannerAnim"); - self.imgBox = $(".banner-img"); - self.txtBox = $(".banner-entry"); - //创建canvas; - self.Canvas = $("").appendTo(self.animBox); //document.createElement('canvas'); - self.Canvas[0].width = self.w; - self.Canvas[0].height = self.h; - self.stage = new C.Stage('myC'); - - C.Ticker.setFPS(30); - C.Ticker.useRAF = true; - C.Ticker.addEventListener("tick", self.stage); - C.Touch.enable(self.stage, true); //单指触摸 - - self.bannerResize(); - $(window).bind("resize", self.bannerResize); - self.start() - }, - bannerResize: function() { - var self = bannerAnim; - self.p_w = self.box.parent().width(); - self.p_h = self.box.parent().height(); - //获取比例； - var w_s = self.p_w / self.w + 0.08, - h_s = self.p_h / self.h + 0.08; - var scale = self.scale = w_s > h_s ? w_s : h_s; - var tra = getTransform()[0]; - self.animBox.attr("style", ""); - self.imgBox.attr("style", ""); - var boxSty = { - "width": self.w, - "height": self.h - }; - - boxSty[tra] = "scale(" + scale + "," + scale + ")"; - self.animBox.css(boxSty); - var imgSty = {}; - imgSty[tra] = "scale(" + scale + "," + scale + ")"; - self.imgBox.css(imgSty); - if (w_s > h_s) { - self.animBox.css({ - "margin-top": (self.p_h - self.h * w_s) / 2, - "margin-left": (self.p_w - self.w * w_s) / 2 - }); - self.imgBox.css({ - "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2, - "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2 - }); - } else { - self.animBox.css({ - "margin-left": (self.p_w - self.w * h_s) / 2, - "margin-top": (self.p_h - self.h * h_s) / 2 - }); - self.imgBox.css({ - "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2, - "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2 - }); - } - }, - start: function() { - this.addLine(); - }, - glowLine: function(line, w, h, color) { - w = w || 0, h = h || 0; - var r = w / 2 || h / 2; - var glBox = new C.Container(); - var Line = new C.Shape(); - var glow = new C.Shape(); - glBox.addChild(glow); - glBox.addChild(Line); - glow.alpha = .3; - var blurFilter = new C.BlurFilter(3, 3, 10); - glow.filters = [blurFilter]; - var bounds = blurFilter.getBounds(); - if (w) { - Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); - glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); - glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height); - } else { - Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); - glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); - glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height); - } - return glBox; - }, - addMouseAnim: function() { - var self = this, - img_x = self.imgBox; - $("body").bind("mousemove", function(e) { - var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35; - if (_x > self.w * .04) { - _x = self.w * .04 - } - T.set(self.imgBox, { - scale: self.scale, - transformPerspective: 400 - }); - T.killTweensOf(self.imgBox, true); - var tobj = {}; - if (navigator.userAgent.indexOf('Firefox') >= 0) { - tobj.x = _x - } else { - tobj.x = _x; - tobj.rotationY = _x / 60; - } - T.to(self.imgBox, .5, tobj); - }) - }, - endTween: function() { - var self = bannerAnim; - T.to(self.animBox, .5, { - alpha: 0, - onComplete: function() { - self.animBox.remove(); - self.addMouseAnim() - } - }); - self.imgBox.removeClass("fn-alpha-out") - self.imgBox.css("opacity", 1); - - }, - textTween: function() { - var self = this; - self.txtBox.removeClass("fn-hide"); - for (var i = 0; i < self.txtBox.children().length; i++) { - var mc = self.txtBox.children().eq(i); - T.from(mc, .5, { - delay: .15 * i, - alpha: 0, - y: "80", - onComplete: function(mc) { - mc.removeAttr("style"); - }, - onCompleteParams: [mc] - }) - } - }, - addLine: function() { - var self = bannerAnim; - var a_lineBox = [], - end_num = 0; - setTimeout(function() { - self.textTween(); - }, 500); - - function addLine(i, j, lineBox) { - var t = new C.Shape(); - if (j % 2) { - t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h); - var at = Math.floor(j / 2); - t.x = self.lineData[i].w * at - } else { - t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0); - var at = j / 2; - t.y = self.lineData[i].h * at; - } - lineBox.addChild(t); - T.from(t, .5, { - alpha: 0 - }) - } - - function addCirc(i, lineBox) { - end_num++; - if (self.lineData[i].circ.length > 0) { - for (var j = 0; j < self.lineData[i].circ.length; j++) { - var circ = new C.Shape(); - circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2); - lineBox.addChild(circ); - T.from(circ, .5, { - alpha: 0 - }) - } - } else { - var circ = new C.Shape(); - circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2); - lineBox.addChild(circ); - T.from(circ, .5, { - alpha: 0 - }) - } - if (end_num >= self.lineData.length) { - setTimeout(self.endTween, 500) - } - } - - function tween(line, obj, i, j, lineBox, arr) { - var t = obj; - t.alpha = 0; - t.scale = 2; - t.ease = Power1.easeOut; - T.to(line, .5, t); - addLine(i, j, lineBox); - arr.push(j); - a_lineBox[i] = arr; - if (a_lineBox[i].length >= 4) { - addCirc(i, lineBox) - } - } - for (var i = 0; i < self.lineData.length; i++) { - var lineBox = new C.Container(); - self.stage.addChild(lineBox); - lineBox.x = self.lineData[i].x; - lineBox.y = self.lineData[i].y + 125; - lineBox.rotation = self.lineData[i].rotate; - var arr = []; - //画外壳方形 - for (var j = 0; j < 4; j++) { - var line, ma = Math.ceil(Math.random() * 2 - 1), - tweenobj; - if (j % 2) { - tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2; - line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color); - var t = Math.floor(j / 2); - line.x = self.lineData[i].w * t; - T.from(line, .5, { - alpha: 0, - y: tweenobj, - scale: 0, - delay: j * .1 + Math.random() * i * .1, - ease: Power1.easeIn, - onComplete: tween, - onCompleteParams: [line, { - y: -tweenobj - }, i, j, lineBox, arr] - }); - } else { - tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2; - line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color); - var t = j / 2; - line.y = self.lineData[i].h * t; - T.from(line, .5, { - alpha: 0, - x: tweenobj, - scale: 0, - delay: j * .1 + Math.random() * i * .1, - ease: Power1.easeIn, - onComplete: tween, - onCompleteParams: [line, { - x: -tweenobj - }, i, j, lineBox, arr] - }); - } - lineBox.addChild(line) - } - } - } - }; - window.bannerAnim = bannerAnim; -}); diff --git a/site/static/homeLoad.js b/site/static/homeLoad.js deleted file mode 100644 index 1a23a6021e..0000000000 --- a/site/static/homeLoad.js +++ /dev/null @@ -1,116 +0,0 @@ -/** - * Created by jljsj on 15/6/3. - */ -$(function() { - $.ajaxSetup({ - cache: true - }); - var loadData = [ - "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js - "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js - "/static/home.js", - "https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg" - ]; - var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; - var loadFunc = { - init: function() { - var self = this; - self.body = $("body"); - self.header = $("#header") || $("header"); - self.main = $(".main"); - self.footer = $("#footer") || $("footer"); - self.addLoad() - }, - addLoad: function() { - var self = this; - self.loadBox = $("
    " + - "
    " + - "" + - "Ant Design" + - "
    " + - "
    " + - "
    ").appendTo(".banner-box"); - self.loadBar = self.loadBox.find(".load-bar"); - var loadText = self.loadBox.find("span"), - str = loadText.text(), - loadClass = ["yoyo-load0", "yoyo-load1", "yoyo-load2", "yoyo-load3", "yoyo-load4", "yoyo-load5"]; - loadText.empty(); - - function c_random(num, arrlen) { - var arr = []; - - function r(i) { - var t = Math.round(Math.random() * (num - 1)); - if (t == arr[i - 1]) { - r(i); - return - } - arr.push(t) - } - for (var i = 0; i < arrlen; i++) { - r(i) - } - return arr; - } - var tarr = c_random(loadClass.length, str.length); - for (var i = 0; i < str.length; i++) { - var t = str[i]; - if (t == " ") { - t = " " - } - var _class = "yoyo-x-left"; - if (i > 0 && i < str.length - 1) { - _class = loadClass[tarr[i]] - } - if (i == str.length - 1) { - _class = 'yoyo-x-right' - } - loadText.append("

    " + t + "

    ") - } - self.load() - }, - load: function() { - var self = this, - num = 0; - - function endLoad() { - self.loadBox.addClass("load-out").one(animEndStr, function() { - self.loadBox.remove(); - bannerAnim.init(); - }); - } - - function getLoad() { - var str = loadData[num]; - if (str.indexOf(".js") >= 0) { - $.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() { - num++; - self.loadBar.css("width", num / loadData.length * 100 + "%"); - if (num >= loadData.length) { - setTimeout(endLoad, 300); - } else { - getLoad(); - } - }) - } else { - var img = new Image(); - img.onload = img.onerror = function() { - num++; - self.loadBar.css("width", num / loadData.length * 100 + "%"); - if (num >= loadData.length) { - setTimeout(endLoad, 300); - } else { - getLoad(); - } - }; - img.src = str; - } - } - getLoad(); - } - }; - - $().ready(function() { - loadFunc.init() - }); -}); diff --git a/site/static/script.js b/site/static/script.js index 8f0d3b855e..5401f42823 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -6,6 +6,7 @@ InstantClickChangeFns.push(function() { }, 0); } + $('.component-demos .icon-all').off('click'); $('.component-demos .icon-all').on('click', function() { if ($(this).hasClass('expand')) { $(this).removeClass('expand'); @@ -49,6 +50,7 @@ InstantClickChangeFns.push(function() { hashChange(); // 高亮侧边演示菜单 + $(window).off('hashchange'); $(window).on('hashchange', hashChange); // 移动 API 文档到演示下方 @@ -77,6 +79,7 @@ InstantClickChangeFns.push(function() { onScroll(); // 滚动高亮 + $(window).off('scroll'); $(window).on('scroll', onScroll); // 添加上一页下一页 diff --git a/site/static/style.css b/site/static/style.css index 0049efa6d7..59e640d893 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -40,7 +40,7 @@ li { } a { - color: #00ABEA; + color: #2db7f5; text-decoration: none; transition: color .3s ease; } @@ -56,11 +56,11 @@ a:hover { } ::selection { - background: #4BB8FF; + background: #2db7f5; color: #fff; } ::-moz-selection { - background: #4BB8FF; + background: #2db7f5; color: #fff; } @@ -500,7 +500,7 @@ footer ul li > a { padding: 30px 80px 120px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; - width: 80%; + width: 90%; height: 100%; } @@ -508,7 +508,7 @@ footer ul li > a { color: #666; font-size: 14px; line-height: 1.8; - width: 80%; + width: 90%; } .highlight { @@ -721,117 +721,6 @@ footer ul li > a { border-color: #2db7f5; } -/****************************动画样式*********************************/ -.delay-mode { - animation-fill-mode: backwards !important; - -webkit-animation-fill-mode: backwards !important; -} - -.no-delay { - animation-delay: 0s !important; - -webkit-animation-delay: 0s !important; - -moz-animation-delay: 0s !important; - -o-animation-delay: 0s !important; -} - -.from-rotate-scale-m { - animation: mRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: mRotateScale .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-rotate-scale-l { - animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-scale-l { - animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-scale-m { - animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-x-left { - animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-x-right { - animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-y-top { - animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.from-y-bottom { - animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - -webkit-animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.to-img-blur { - opacity: 0; - animation: toImgBlur .5s ease-out; - -webkit-animation: toImgBlur .5s ease-out; - -moz-animation: toImgBlur .5s ease-out; - -o-animation: toImgBlur .5s ease-out; - -ms-animation: toImgBlur .5s ease-out; -} - -.from-img-blur { - opacity: 1 !important; - animation: fromImgBlur .5s ease-out; - -webkit-animation: fromImgBlur .5s ease-out; - -moz-animation: fromImgBlur .5s ease-out; - -o-animation: fromImgBlur .5s ease-out; - -ms-animation: fromImgBlur .5s ease-out; -} - -.alpha-out { - opacity: 0; - animation: alphaOut .5s ease-out; - -webkit-animation: alphaOut .5s ease-out; -} - -.yoyo-x-right{ - animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-x-left{ - animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} - -.yoyo-load0{ - animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load1{ - animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load2{ - animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load3{ - animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load4{ - animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} -.yoyo-load5{ - animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; - -webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -} - /* autocomplete */ .ui-select ul { outline: none; @@ -865,835 +754,6 @@ footer ul li > a { } /* autocomplete end */ -@keyframes Load5 { - 0% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load5 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load4 { - 0% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load4 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load3 { - 0% { - opacity: 0; - transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load3 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load2 { - 0% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load2 { - 0% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} -@keyframes Load1 { - 0% { - opacity: 0; - transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load1 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@keyframes Load0 { - 0% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes Load0 { - 0% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); - } -} - -@keyframes xLeftMatrixR { - 0% { - opacity: 0; - transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes xLeftMatrixR { - 0% { - opacity: 0; - -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@keyframes xRightMatrixR { - 0% { - opacity: 0; - transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes xRightMatrixR { - 0% { - opacity: 0; - -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - 20% { - opacity: 0; - -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); - } - - 80% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); - } -} -@keyframes fromImgBlur { - 0% { - opacity: 0; - filter: blur(15px); - } - - 100% { - opacity: 1; - filter: blur(0px); - } -} - -@-webkit-keyframes fromImgBlur { - 0% { - opacity: 0; - -webkit-filter: blur(15px); - } - - 100% { - opacity: 1; - -webkit-filter: blur(0px); - } -} - -@-moz-keyframes fromImgBlur { - 0% { - opacity: 0; - -moz-filter: blur(15px); - } - - 100% { - opacity: 1; - -moz-filter: blur(0px); - } -} - -@-ms-keyframes fromImgBlur { - 0% { - opacity: 0; - -ms-filter: blur(15px); - } - - 100% { - opacity: 1; - -ms-filter: blur(0px); - } -} - -@-o-keyframes fromImgBlur { - 0% { - opacity: 0; - -o-filter: blur(15px); - } - - 100% { - opacity: 1; - -o-filter: blur(0px); - } -} - -@keyframes toImgBlur { - 0% { - opacity: 1; - filter: blur(0px); - } - - 100% { - opacity: 0; - filter: blur(15px); - } -} - -@-webkit-keyframes toImgBlur { - 0% { - opacity: 1; - -webkit-filter: blur(0px); - } - - 100% { - opacity: 0; - -webkit-filter: blur(15px); - } -} - -@-moz-keyframes toImgBlur { - 0% { - opacity: 1; - -moz-filter: blur(0px); - } - - 100% { - opacity: 0; - -moz-filter: blur(15px); - } -} - -@-ms-keyframes toImgBlur { - 0% { - opacity: 1; - -ms-filter: blur(0px); - } - - 100% { - opacity: 0; - -ms-filter: blur(15px); - } -} - -@-o-keyframes toImgBlur { - 0% { - opacity: 1; - -o-filter: blur(0px); - } - - 100% { - opacity: 0; - -o-filter: blur(15px); - } -} - -@keyframes yBottom { - 0% { - opacity: 0; - margin-top: 100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@-webkit-keyframes yBottom { - 0% { - opacity: 0; - margin-top: 100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@keyframes yTop { - 0% { - opacity: 0; - margin-top: -100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@-webkit-keyframes yTop { - 0% { - opacity: 0; - margin-top: -100px; - } - - 100% { - opacity: 1; - margin-top: 0px; - } -} - -@keyframes xRight { - 0% { - opacity: 0; - margin-left: 100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@-webkit-keyframes xRight { - 0% { - opacity: 0; - margin-left: 100px; - } - - 100% { - opacity: 1; - margin-right: 0px; - } -} - -@keyframes xLeft { - 0% { - opacity: 0; - margin-left: -100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@-webkit-keyframes xLeft { - 0% { - opacity: 0; - margin-left: -100px; - } - - 100% { - opacity: 1; - margin-left: 0px; - } -} - -@keyframes mScale { - 0% { - opacity: 0; - transform: scale(0, 0); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@-webkit-keyframes mScale { - 0% { - opacity: 0; - -webkit-transform: scale(0, 0); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1, 1); - } -} - -@keyframes lScale { - 0% { - opacity: 0; - transform: scale(1.5, 1.5); - } - - 100% { - opacity: 1; - transform: scale(1, 1); - } -} - -@-webkit-keyframes lScale { - 0% { - opacity: 0; - -webkit-transform: scale(1.5, 1.5); - } - - 100% { - opacity: 1; - -webkit-transform: scale(1, 1); - } -} - -@keyframes mRotateScale { - 0% { - opacity: 0; - transform: rotate(90deg) scale(0, 0); - } - - 100% { - opacity: 1; - transform: rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes mRotateScale { - 0% { - opacity: 0; - -webkit-transform: rotate(90deg) scale(0, 0); - } - - 100% { - opacity: 1; - -webkit-transform: rotate(0deg) scale(1, 1); - } -} - -@keyframes lRotateScale { - 0% { - opacity: 0; - transform: rotate(90deg) scale(1.5, 1.5); - } - - 100% { - opacity: 1; - transform: rotate(0deg) scale(1, 1); - } -} - -@-webkit-keyframes lRotateScale { - 0% { - opacity: 0; - -webkit-transform: rotate(90deg) scale(1.5, 1.5); - } - - 100% { - opacity: 1; - -webkit-transform: rotate(0deg) scale(1, 1); - } -} - -@keyframes RotaeX { - to { - transform: rotate(360deg); - } -} - -@-webkit-keyframes RotaeX { - to { - -webkit-transform: rotate(360deg); - } -} - -@keyframes scaleOut { - 0% { - transform: scale(1, 1); - } - - 100% { - transform: scale(0, 0); - } -} - -@-webkit-keyframes scaleOut { - 0% { - -webkit-transform: scale(1, 1); - ; - } - - 100% { - -webkit-transform: scale(0, 0); - ; - } -} - -@keyframes yTopMatrix { - 0% { - opacity: 0; - transform: translateY(-50px); - } - - 100% { - opacity: 1; - transform: translateY(0px); - } -} - -@-webkit-keyframes yTopMatrix { - 0% { - opacity: 0; - -webkit-transform: translateY(-50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0px); - } -} - -@keyframes yBottomMatrix { - 0% { - opacity: 0; - transform: translateY(50px); - } - - 100% { - opacity: 1; - transform: translateY(0px); - } -} - -@-webkit-keyframes yBottomMatrix { - 0% { - opacity: 0; - -webkit-transform: translateY(50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0px); - } -} - -@keyframes xLeftMatrix { - 0% { - opacity: 0; - transform: translateX(-50px); - } - - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -@-webkit-keyframes xLeftMatrix { - 0% { - opacity: 0; - -webkit-transform: translateX(-50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0px); - } -} - -@keyframes xRightMatrix { - 0% { - opacity: 0; - transform: translateX(50px); - } - - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -@-webkit-keyframes xRightMatrix { - 0% { - opacity: 0; - -webkit-transform: translateX(50px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0px); - } -} - -@keyframes mainOut { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(90deg); - } -} - -@-webkit-keyframes mainOut { - 0% { - -webkit-transform: rotateY(0deg); - } - - 100% { - -webkit-transform: rotateY(90deg); - } -} - -@keyframes alphaTo { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@-webkit-keyframes alphaTo { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes alphaOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@-webkit-keyframes alphaOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@-webkit-keyframes rotateCircle { - 0% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(0deg); - } - - 100% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(360deg); - } -} - -@keyframes rotateCircle { - 0% { - transform-origin: 50% 50%; - transform: rotate(0deg); - } - - 100% { - transform-origin: 50% 50%; - transform: rotate(360deg); - } -} - -@-webkit-keyframes rotateCircleBack { - 0% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(360deg); - } - - 100% { - -webkit-transform-origin: 50% 50%; - -webkit-transform: rotate(0deg); - } -} - -@keyframes rotateCircleBack { - 0% { - transform-origin: 50% 50%; - transform: rotate(360deg); - } - - 100% { - transform-origin: 50% 50%; - transform: rotate(0deg); - } -} - -@keyframes loadTween { - 0% { - transform: rotateY(0deg); - } - - 50% { - transform: rotateY(180deg); - } - - 100% { - transform: rotateX(-180deg); - } -} - -@-webkit-keyframes loadTween { - 0% { - -webkit-transform: rotateY(0deg); - } - - 50% { - -webkit-transform: rotateY(180deg); - } - - 100% { - -webkit-transform: rotateX(-180deg); - } -} - /***************************************************************************/ .api-link { font-size: 16px; @@ -1745,7 +805,7 @@ footer ul li > a { } .code-boxes-col-1-1 { - width: 80%; + width: 90%; } .code-boxes-col-2-1 { diff --git a/site/theme.js b/site/theme.js index e8c48a3642..4bc9cd949b 100644 --- a/site/theme.js +++ b/site/theme.js @@ -164,7 +164,7 @@ module.exports = function(nico) { }); }, rootDirectoryIn: function(directory, rootDirectories) { - return rootDirectories.indexOf(directory.split('/')[0]) >= 0; + return rootDirectories.indexOf(getRootDirectory(directory)) >= 0; }, removeCodeBoxIdPrefix: function(id) { return id.split('-').slice(2).join('-'); From 3455644a521c1c1150256a6167e7132bd9e80d63 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 20:58:35 +0800 Subject: [PATCH 09/58] Add preview image modal --- docs/pattern/navigation.md | 10 ++++++++++ scripts/demo.js | 36 ++++++++++++++++++++++++++++++++++++ site/static/style.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+) diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 54e212cb2b..0ece3858fe 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -6,3 +6,13 @@ --- 占位。 + + + +占位。 + +占位。 + +占位。 + +占位。 diff --git a/scripts/demo.js b/scripts/demo.js index e672d69e0b..a9449f8190 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -145,4 +145,40 @@ window.BrowserDemo = React.createClass({ } }); +var Modal = antd.Modal; +var PriviewImg = React.createClass({ + getInitialState() { + return { + visible: false + }; + }, + showImageModal() { + this.setState({ + visible: true + }); + }, + handleCancel() { + this.setState({ + visible: false + }); + }, + render() { + return ( + + {this.props.alt} + + {this.props.alt} + + + ); + } +}); + +$(function() { + Array.slice(document.querySelectorAll('.preview-img')).forEach(function(img) { + img.parentNode.className = 'preview-image'; + ReactDOM.render(, img.parentNode); + }); +}); + module.exports = antd; diff --git a/site/static/style.css b/site/static/style.css index 59e640d893..c64b8affc7 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1229,3 +1229,34 @@ a.entry-link:hover .anticon-smile { background: #fff; font-size: 12px; } + +p.preview-image { + float: right; + margin: 0; + margin-right: -10%; +} + +.preview-image-wrapper { + width: 600px; + background: #F2F2F2; + padding: 24px; + display: inline-block; + text-align: center; +} + +.preview-image img { + cursor: pointer; + max-width: 100%; +} + +.image-modal { + text-align: center; +} + +.image-modal .ant-modal-header { + display: none; +} + +.image-modal img { + max-width: 100%; +} From ccc84d796cf466b4ea3e91d4032c29a9bbde9869 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 21:40:48 +0800 Subject: [PATCH 10/58] make toc sticky --- scripts/demo.js | 2 +- site/static/script.js | 12 +++++++++++- site/static/style.css | 21 +++++++++++++-------- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index a9449f8190..4693d70b44 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -166,7 +166,7 @@ var PriviewImg = React.createClass({ return ( {this.props.alt} - + {this.props.alt} diff --git a/site/static/script.js b/site/static/script.js index 5401f42823..e69443f293 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -28,6 +28,7 @@ InstantClickChangeFns.push(function() { item.find('.highlight').appendTo(item); }); + $('.code-boxes').off('click'); $('.code-boxes').on('click', '.collapse', function() { var highlightBox = $(this).parent().parent().find('.highlight'); var codeVisible = highlightBox.is(':visible'); @@ -56,9 +57,12 @@ InstantClickChangeFns.push(function() { // 移动 API 文档到演示下方 $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); + // 滚动时固定锚点、高亮当前项 var titles = $('.markdown :header:not(h1)'); + var doc = $(document); + var tocTop = $('.toc').offset().top; + console.log($('.toc').offset(), $('.toc').css('position')); function onScroll() { - var doc = $(document); var top = doc.scrollTop(), i; if (top >= doc.height()- $(window).height() - 20) { i = titles.length - 1; @@ -74,6 +78,12 @@ InstantClickChangeFns.push(function() { } $('.anchor a').removeClass('current'); $('.anchor a').eq(i).addClass('current'); + + if (top >= tocTop) { + $('.toc').addClass('sticky'); + } else { + $('.toc').removeClass('sticky'); + } } onScroll(); diff --git a/site/static/style.css b/site/static/style.css index c64b8affc7..c53b329d2c 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -490,7 +490,7 @@ footer ul li > a { .main-container { border-left: 1px solid #e9e9e9; margin-left: 259px; - padding: 0 40px 120px; + padding: 0 24px 120px; background: #fff; min-height: 500px; } @@ -692,12 +692,17 @@ footer ul li > a { } .toc { - position: fixed; - top: 130px; - right: 4%; - margin-right: 24px; + float: right; font-size: 12px; background: #fff; + padding-top: 12px; +} + +.toc.sticky { + position: fixed; + top: 0; + right: 4%; + margin-right: 24px; z-index: 100; } @@ -1221,10 +1226,10 @@ a.entry-link:hover .anticon-smile { .demos-anchor { color: #aaa; - position: fixed; + position: absolute; margin-right: 24px; - top: 128px; - right: 4%; + top: 24px; + right: 0; z-index: 100; background: #fff; font-size: 12px; From 8be1ffdfe0436a654349904cc1095291bd850dc5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 22:34:34 +0800 Subject: [PATCH 11/58] update docs --- docs/practice/cases.md | 12 +++++++++++- docs/react/introduce.md | 1 + docs/spec/introduce.md | 1 + scripts/demo.js | 2 +- site/static/script.js | 1 - site/static/style.css | 35 +++++++++++++++++++++++------------ 6 files changed, 37 insertions(+), 15 deletions(-) diff --git a/docs/practice/cases.md b/docs/practice/cases.md index c49bae3690..c18353e697 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -5,4 +5,14 @@ --- -占位。 + + +Ant Design 是面向中后台的 UI 设计语言。 + +从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。 + +## 精选案例 + +--- + +待补充。 diff --git a/docs/react/introduce.md b/docs/react/introduce.md index bd2d0c7e31..ee696e5776 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -71,6 +71,7 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less' ## 谁在使用 - 蚂蚁金服 +- 口碑 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index e0338587bb..b9a9981b39 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -16,6 +16,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设 ## 谁在使用 - 蚂蚁金服 +- 口碑 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 diff --git a/scripts/demo.js b/scripts/demo.js index 4693d70b44..d6fecb172d 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -174,7 +174,7 @@ var PriviewImg = React.createClass({ } }); -$(function() { +InstantClickChangeFns.push(function() { Array.slice(document.querySelectorAll('.preview-img')).forEach(function(img) { img.parentNode.className = 'preview-image'; ReactDOM.render(, img.parentNode); diff --git a/site/static/script.js b/site/static/script.js index e69443f293..ceea48e9c5 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -61,7 +61,6 @@ InstantClickChangeFns.push(function() { var titles = $('.markdown :header:not(h1)'); var doc = $(document); var tocTop = $('.toc').offset().top; - console.log($('.toc').offset(), $('.toc').css('position')); function onScroll() { var top = doc.scrollTop(), i; if (top >= doc.height()- $(window).height() - 20) { diff --git a/site/static/style.css b/site/static/style.css index c53b329d2c..5f33c73fab 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -87,7 +87,7 @@ a.logo { float: left; height: 46px; line-height: 46px; - margin: 17px 45px 17px 40px; + margin: 17px 45px 17px 4%; transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; text-transform: uppercase; font-size: 18px; @@ -113,7 +113,7 @@ a.logo { #autoComplete { margin-top: -2px; - width: 230px; + width: 200px; } #autoComplete .ant-select { @@ -172,6 +172,7 @@ a.logo { position: absolute; left: 50%; transform: translateX(-50%); + display: none; } .nav { @@ -180,7 +181,7 @@ a.logo { float: right; font-size: 0.875em; position: relative; - margin-right: 25px; + margin-right: 4%; overflow: hidden; } @@ -191,7 +192,7 @@ a.logo { } .nav ul li a { - color: #728AA3; + color: #666; width: 100%; height: 100%; display: block; @@ -381,7 +382,7 @@ footer ul li > a { } .aside-container { - width: 260px; + width: 220px; padding-bottom: 50px; float: left; border-right: 1px solid #e9e9e9; @@ -395,7 +396,7 @@ footer ul li > a { } .aside-container > ul > li > ul { - margin-left: 24px; + margin-left: 16px; } .aside-container li h4 { @@ -489,8 +490,8 @@ footer ul li > a { .main-container { border-left: 1px solid #e9e9e9; - margin-left: 259px; - padding: 0 24px 120px; + margin-left: 219px; + padding: 0 40px 120px; background: #fff; min-height: 500px; } @@ -533,7 +534,7 @@ footer ul li > a { .markdown h5, .markdown h6 { color: #404040; - margin: 1.6em 0 1em 0; + margin: 1.6em 0 0.6em 0; font-weight: 500; } @@ -554,7 +555,7 @@ footer ul li > a { .markdown p, .markdown pre { - margin: 1.2em 0; + margin: 1em 0; } .markdown > ul li { @@ -659,7 +660,7 @@ footer ul li > a { width: 100%; overflow: hidden; font-size: 16px; - padding-left: 260px; + padding-left: 220px; } .prev-next-nav > .prev-page, @@ -696,6 +697,7 @@ footer ul li > a { font-size: 12px; background: #fff; padding-top: 12px; + margin-right: -16px; } .toc.sticky { @@ -718,12 +720,18 @@ footer ul li > a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - max-width: 120px; + max-width: 100px; line-height: 20px; + color: #999; +} + +.toc a:hover { + color: #2db7f5; } .toc a.current { border-color: #2db7f5; + color: #2db7f5; } /* autocomplete */ @@ -1018,6 +1026,9 @@ a.entry-link:hover .anticon-smile { float: none; width: 100%; } + .search { + display: none; + } } @media only screen and (min-width: 320px) and (max-width: 767px) { From 00df19d3e30b8177f3073018fa446dbd00274c1e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 Jan 2016 22:37:55 +0800 Subject: [PATCH 12/58] fix home page --- site/static/script.js | 54 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/site/static/script.js b/site/static/script.js index ceea48e9c5..2e9113af14 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -58,39 +58,39 @@ InstantClickChangeFns.push(function() { $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); // 滚动时固定锚点、高亮当前项 - var titles = $('.markdown :header:not(h1)'); - var doc = $(document); - var tocTop = $('.toc').offset().top; - function onScroll() { - var top = doc.scrollTop(), i; - if (top >= doc.height()- $(window).height() - 20) { - i = titles.length - 1; - } else { - for (i=0; i= doc.height()- $(window).height() - 20) { + i = titles.length - 1; + } else { + for (i=0; i titles.length - 1) ? (titles.length - 1) : i; } - i--; - i = (i < 0) ? 0 : i; - i = (i > titles.length - 1) ? (titles.length - 1) : i; - } - $('.anchor a').removeClass('current'); - $('.anchor a').eq(i).addClass('current'); + $('.anchor a').removeClass('current'); + $('.anchor a').eq(i).addClass('current'); - if (top >= tocTop) { - $('.toc').addClass('sticky'); - } else { - $('.toc').removeClass('sticky'); + if (top >= tocTop) { + $('.toc').addClass('sticky'); + } else { + $('.toc').removeClass('sticky'); + } } + onScroll(); + // 滚动高亮 + $(window).off('scroll'); + $(window).on('scroll', onScroll); } - onScroll(); - - // 滚动高亮 - $(window).off('scroll'); - $(window).on('scroll', onScroll); - // 添加上一页下一页 if ($('.aside-container li > a').length > 0) { var links = $('.aside-container li > a'); From 7e341a1be98016f1ba26da3a7ad89f34c96f112c Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 16:52:27 +0800 Subject: [PATCH 13/58] add new home --- package.json | 2 + scripts/home.js | 111 ++++++++++++++- site/templates/home.html | 228 ++++++++++++++++++++++++++++++- style/themes/default/custom.less | 6 +- 4 files changed, 334 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index c19acd4878..4e2c001647 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,8 @@ "warning": "~2.1.0" }, "devDependencies": { + "rc-scroll-anim": "0.0.5", + "rc-tween-one": "0.1.5", "autoprefixer-loader": "^3.1.0", "babel-cli": "^6.2.0", "babel-core": "^6.2.1", diff --git a/scripts/home.js b/scripts/home.js index 29e83b3651..9b06e9db60 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -1,8 +1,111 @@ const React = require('react'); const ReactDOM = require('react-dom'); +import { QueueAnim, Icon, Button } from '../index'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher'; +import TweenOne from 'rc-tween-one'; +console.log(EventDispatcher) +const DivId = ['page4', 'page3', 'page2', 'page1', 'banner']; +const header = document.getElementById('header'); +DivId.forEach(id=> { + const page = document.createElement('section'); + page.id = id; + if (id.indexOf('page') >= 0) { + page.className = 'page'; + } + document.body.insertBefore(page, header.nextSibling); +}); +// 导航处理； +function scrollNavEvent() { + const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; + const clientHeight = document.documentElement.clientHeight; + if (scrollTop >= clientHeight) { + header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom'; + } else { + header.className = header.className.replace(/home-nav-bottom/ig, ''); + } +} + +EventDispatcher.addEventListener('scroll.scrollNavEvent', scrollNavEvent); + +class Banner extends React.Component { + constructor() { + super(...arguments); + } + + typeFunc(a) { + if (a.key === 'line') { + return 'right'; + } else if (a.key === 'button') { + return 'bottom'; + } + return 'left'; + } + + render() { + return ( + +

    ANT DESIGN

    V1.0

    +

    一套面向中后台的设计解决方案

    + + 开始探索 +     ) + } +} + +ReactDOM.render(, banner); + + +// page1 ReactDOM.render(( -
    - 首页坑位 -
    -), document.getElementById('home-container')); + + + +

    实例/优秀的设计实践

    +

    近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。

    +
    +     +     +), page1); + +//page2 +ReactDOM.render(( + + +

    设计模式库

    +

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +
    +     + +     +), page2); + +//page3 +ReactDOM.render(( + + + +

    30+的基础设计组件

    +

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +
    +     +     +), page3); + + +//page4 +ReactDOM.render(( + + + +

    微小·确定·幸福

    +

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +     + +     +), page4); diff --git a/site/templates/home.html b/site/templates/home.html index 56e14029fc..5a0c05d207 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -3,13 +3,229 @@ {% block bodyAttribute %}class="index-page"{% endblock %} {% block content %} -
    {% endblock %} diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index c092a064c8..b80e1a9db5 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -35,9 +35,9 @@ @ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); @ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); @ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); -@ease-out-back : cubic-bezier(0.18, 0.89, 0.32, 1.28); -@ease-in-back : cubic-bezier(0.6, -0.3, 0.74, 0.05); -@ease-in-out-back : cubic-bezier(0.68, -0.55, 0.27, 1.55); +@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); @ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); @ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); @ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); From c64d6f3a0f7028d2a580065b205cdf4428a23dc5 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 16:56:45 +0800 Subject: [PATCH 14/58] remove console.log --- scripts/home.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index 9b06e9db60..bfd45e296e 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -4,7 +4,7 @@ import { QueueAnim, Icon, Button } from '../index'; import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher'; import TweenOne from 'rc-tween-one'; -console.log(EventDispatcher) + const DivId = ['page4', 'page3', 'page2', 'page1', 'banner']; const header = document.getElementById('header'); DivId.forEach(id=> { @@ -96,7 +96,6 @@ ReactDOM.render(( ), page3); - //page4 ReactDOM.render(( From e87b4649a4580af460307d6fe91c1dacab553cf7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 17:00:42 +0800 Subject: [PATCH 15/58] Add some docs ... --- docs/pattern/form.md | 113 ++++++++++++++++++++++++++++++++++- docs/pattern/list.md | 111 +++++++++++++++++++++++++++++++++- docs/pattern/navigation.md | 64 ++++++++++++++++++-- scripts/demo.js | 36 ++++++++--- site/static/style.css | 119 +++++++++++++++++++++++++++---------- 5 files changed, 397 insertions(+), 46 deletions(-) diff --git a/docs/pattern/form.md b/docs/pattern/form.md index b5a9f69a1f..a2248bacf3 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -5,4 +5,115 @@ --- -占位。 +作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。 + +设计者进行表单设计时，应当注意这几点： + +1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。 + + 为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。 + +2. 让用户能在上下文中获取信息，帮助他完成输入。 + + 使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。 + +3. 对错误敏感，并尽可能宽容。 + + 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。 + +4. 不要提出不必要的问题。 + +## 内容 + + + +通常表单会有四个部分组成。 + +1. 标签。 +2. 输入框。 +3. 动作。 +4. 校验反馈。 + +> 注：`*` 表明该项为必填项。 + +## 交互 + +### 填空 + +图片的描述语句 + +在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。 + +### 组合输入框 + +图片的描述语句 + +当两个输入框关联性很强时，可以前后拼接，减少页面空间。 + +### 对齐方式 + +图片的描述语句 + +在页面设计表单时，按钮组必须和输入框左对齐。 + +### 禁用主按钮 + +图片的描述语句 +图片的描述语句 + +当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。 + +### 结构化的格式 + +图片的描述语句 + +用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。 + +### 输入提示 & 输入提醒 + +图片的描述语句 +图片的描述语句 + +输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。 + +输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。 + +### 密码加强计 + +图片的描述语句 + +提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。 + +### 校验 + +图片的描述语句 +图片的描述语句 + +图片的描述语句 + +图片的描述语句 + + +通过不同的“校验”规则和形式进行反馈，避免用户在点击提交后才刚刚开始“校验”，让用户提前纠正错误。 + +### 字数校验框 + +图片的描述语句 + +用于统计当前输入长度，以及是否超过系统阈值。 + +### 容错格式 + +待补充。 + +### 自动完成 + +待补充。 + +### 列表构造器 + +待补充。 + +### 良好的默认值 + +待补充。 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 507b0861e9..6a3e2ee2da 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -5,4 +5,113 @@ --- -占位。 + +列表是非常常见的界面元素，有多种使用场景： + +- 获取概览 +- 逐项浏览 +- 查找特定列表项 +- 排序与过滤 +- 重新安排、添加、删除或重新分类列表项 + +## 交互 + +### 显示详情信息 + +图片的描述语句 + +气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。 + +
    + +图片的描述语句 + +列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。 + +
    + +图片的描述语句 + +弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。 + +
    + +图片的描述语句 + +双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。 + +
    + +图片的描述语句 + +单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。 + +### 显示更多文本 + +图片的描述语句 + +宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。 + +
    + +图片的描述语句 + +对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。 + +### 显示图片 + +图片的描述语句 + +走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。 + +
    + +图片的描述语句 + +缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。 + +### 显示长列表 + +图片的描述语句 + +分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。 + +
    + +图片的描述语句 + +无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 + +### 显示分类或者层级的列表 + +图片的描述语句 +图片的描述语句 + +两层结构。 + +
    + +图片的描述语句 +图片的描述语句 + +多层结构。 + +
    + +## 案例 + +图片的描述语句 + +功能可有批操作，升序降序，分页，单条操作。 + +
    + +图片的描述语句 + +列表各项的合并、详情展开。 + +
    + +图片的描述语句 + +卡片网格。 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 0ece3858fe..59fa7ef47c 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -5,14 +5,66 @@ --- -占位。 +在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意： - +1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路； +2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本； +3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。 -占位。 +## 常见导航 -占位。 + -占位。 +我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。 -占位。 +## 侧栏导航 + + + +导航的结构由以下几部分组成。 + + +1. 产品 Logo 和名称。 +2. 业务类目。 +3. 登陆工具。 +4. 面包屑（可选）。 + +> 注： +> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时； +> 2. 面包屑可以分为这几类： +> - 路径型：路径型面包屑是一个动态显示用户到达页面经过的途径。 +> - 位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置。 +> - 属性型：属性型面包屑给出的当前页面的分类信息。 + + + + + + + +我们定义了不同类目层级所对应的导航样式。 + + +## 顶部导航 + + + + + +结构如右图所示： + +1. 产品 Logo 和名称。 +2. 业务类目。 +3. 登陆工具。 +4. 面包屑（可选）。 + +
    + + + + + + + + +不同类目层级。 diff --git a/scripts/demo.js b/scripts/demo.js index d6fecb172d..3698be048a 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -149,7 +149,8 @@ var Modal = antd.Modal; var PriviewImg = React.createClass({ getInitialState() { return { - visible: false + visible: false, + boxLength: 1, }; }, showImageModal() { @@ -163,21 +164,40 @@ 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 ( - - {this.props.alt} +
    +
    + Sample Picture +
    +
    {this.props.alt}
    - {this.props.alt} + +
    {this.props.alt}
     - +
    ); } }); InstantClickChangeFns.push(function() { - Array.slice(document.querySelectorAll('.preview-img')).forEach(function(img) { - img.parentNode.className = 'preview-image'; - ReactDOM.render(, img.parentNode); + const previewImageBoxes = $('.preview-img').parent(); + previewImageBoxes.each(function(i, box) { + box = $(box); + const priviewImgs = []; + const boxLength = box.find('.preview-img').length; + box.find('.preview-img').each(function(i, img) { + console.log(img.hasAttribute('good')); + priviewImgs.push( + + ); + }); + const mountNode = $('
    '); + box.replaceWith(mountNode); + ReactDOM.render({priviewImgs}, mountNode[0]); }); }); diff --git a/site/static/style.css b/site/static/style.css index 5f33c73fab..69f51592f4 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -386,6 +386,7 @@ footer ul li > a { padding-bottom: 50px; float: left; border-right: 1px solid #e9e9e9; + margin-right: -1px; } .aside-container > ul > li { @@ -411,7 +412,7 @@ footer ul li > a { z-index: 1; position: relative; background: #fff; - right: 1px; + border-right: 1px solid #e9e9e9; } .aside-container li h4:after { @@ -426,6 +427,7 @@ footer ul li > a { transition: all 0.3s ease; } + .aside-container li[open=open] h4:after { -webkit-transform: scale(0.6) rotate(180deg); transform: scale(0.6) rotate(180deg); @@ -494,22 +496,14 @@ footer ul li > a { padding: 0 40px 120px; background: #fff; min-height: 500px; -} - -.main-container-center { - margin: 0 auto; - padding: 30px 80px 120px; - border-left: 1px solid #e9e9e9; - border-right: 1px solid #e9e9e9; - width: 90%; - height: 100%; + overflow: hidden; } .markdown { color: #666; font-size: 14px; line-height: 1.8; - width: 90%; + width: 80%; } .highlight { @@ -536,6 +530,7 @@ footer ul li > a { color: #404040; margin: 1.6em 0 0.6em 0; font-weight: 500; + clear: both; } .markdown h1 { font-size: 28px; } @@ -546,11 +541,10 @@ footer ul li > a { .markdown h6 { font-size: 12px; } .markdown hr { - border-radius: 10px; - height: 3px; + height: 1px; border: 0; - background: #eee; - margin: 20px 0; + background: #e9e9e9; + margin: 16px 0; } .markdown p, @@ -558,10 +552,11 @@ footer ul li > a { margin: 1em 0; } -.markdown > ul li { +.markdown > ul li, +.markdown blockquote ul > li { list-style: circle; - margin-left: 20px; - padding-left: 8px; + margin-left: 1em; + padding-left: 0.4em; } .markdown > ul li p, @@ -569,10 +564,11 @@ footer ul li > a { margin: 0.6em 0; } -.markdown > ol li { +.markdown > ol li, +.markdown blockquote ol > li { list-style: decimal; - margin-left: 20px; - padding-left: 8px; + margin-left: 1em; + padding-left: 0.4em; } .markdown code { @@ -627,6 +623,11 @@ footer ul li > a { color: #999; border-left: 4px solid #e9e9e9; padding-left: 0.8em; + margin: 1em 0; + overflow: hidden; +} + +.markdown blockquote p { margin: 0; } @@ -646,6 +647,11 @@ footer ul li > a { display: inline-block; } +.markdown > br, +.markdown > p > br { + clear: both; +} + #api ~ ul > li > p > strong ~ code { background: #fff; color: #CC7300; @@ -709,18 +715,18 @@ footer ul li > a { } .toc li > ul { - text-indent: 10px; + text-indent: 8px; } .toc a { - padding-left: 10px; + padding-left: 8px; border-left: 2px solid #eee; display: block; transition: all 0.3s ease; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - max-width: 100px; + max-width: 90px; line-height: 20px; color: #999; } @@ -818,7 +824,7 @@ footer ul li > a { } .code-boxes-col-1-1 { - width: 90%; + width: 80%; } .code-boxes-col-2-1 { @@ -1070,6 +1076,10 @@ a.entry-link:hover .anticon-smile { width: 100%; } + .toc { + display: none; + } + .nav-phone-icon { display: block; width: 49px; @@ -1246,23 +1256,72 @@ a.entry-link:hover .anticon-smile { font-size: 12px; } -p.preview-image { +.preview-image-boxes { float: right; - margin: 0; - margin-right: -10%; + margin: 0 -14% 30px 60px; + width: 600px; + overflow: hidden; +} + +.preview-image-box { + width: 100%; + float: left; + padding: 0 8px; +} + +.preview-image-box:first-child { + margin-left: -8px; +} + +.preview-image-box:last-child { + margin-right: -8px; } .preview-image-wrapper { - width: 600px; background: #F2F2F2; padding: 24px; display: inline-block; text-align: center; + width: 100%; + position: relative; } -.preview-image img { +.preview-image-wrapper.good:after { + content: ''; + width: 100%; + height: 3px; + background: #2db7f5; + display: block; + position: absolute; + bottom: 0; + left: 0; +} + +.preview-image-wrapper.bad:after { + content: ''; + width: 100%; + height: 3px; + background: #f50; + display: block; + position: absolute; + bottom: 0; + left: 0; +} + +.preview-image-description { + font-size: 12px; + margin-top: 8px; + color: #999; +} + +.preview-image-box img { cursor: pointer; max-width: 100%; + transition: box-shadow 0.3s ease; +} + +.preview-image-box img:hover { + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } .image-modal { From 6d885bb1717f488febb794d27ae9dd1f27d444f6 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 17:24:44 +0800 Subject: [PATCH 16/58] add home down icon --- scripts/home.js | 32 +++++++++++++++++++++----------- site/templates/home.html | 12 +++++++++++- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index bfd45e296e..4f72ce8a87 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -45,12 +45,17 @@ class Banner extends React.Component { render() { return ( - -

    ANT DESIGN

    V1.0

    -

    一套面向中后台的设计解决方案

    - - 开始探索 -     ) +
    + +

    ANT DESIGN

    V1.0

    +

    一套面向中后台的设计解决方案

    + + 开始探索 +     + + + +
    ) } } @@ -65,7 +70,8 @@ ReactDOM.render((

    实例/优秀的设计实践

    近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。

    -
    +
    ), page1); @@ -76,7 +82,9 @@ ReactDOM.render((

    设计模式库

    为中后台设计中反复出现的问题提供一套相应的解决方案

    -
    +
    +
    @@ -85,20 +93,22 @@ ReactDOM.render(( //page3 ReactDOM.render(( - +

    30+的基础设计组件

    为中后台设计中反复出现的问题提供一套相应的解决方案

    -
    +
    ), page3); //page4 ReactDOM.render(( - +

    微小·确定·幸福

    diff --git a/site/templates/home.html b/site/templates/home.html index 5a0c05d207..12c32ab8ce 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -128,6 +128,15 @@ margin-left: 15px; } + .down { + text-align: center; + position: absolute; + bottom: 30px; + color: rgba(255, 255, 255, .75); + left: 50%; + margin-left: -7px; + } + section { height: 100%; width: 100%; @@ -224,7 +233,8 @@ footer ul li > h2 { color: #656975; } - footer ul li > a{ + + footer ul li > a { color: #BEC4C8 } From 48f915de65ec5b36488f1bca62b7ab321b11060f Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 17:31:29 +0800 Subject: [PATCH 17/58] update home page --- scripts/home.js | 9 ++++----- site/static/style.css | 15 +++++++-------- site/templates/home.html | 2 +- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index bfd45e296e..aad2461e9b 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -46,9 +46,8 @@ class Banner extends React.Component { render() { return ( -

    ANT DESIGN

    V1.0

    -

    一套面向中后台的设计解决方案

    - +

    ANT DESIGN

    +

    一套 UI 设计语言

    开始探索     ) } @@ -89,8 +88,8 @@ ReactDOM.render(( -

    30+的基础设计组件

    -

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +

    数十个基础设计组件

    +

    为中后台设计中反复出现的问题提供一套完整的解决方案

         diff --git a/site/static/style.css b/site/static/style.css index 69f51592f4..99a0809377 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -85,21 +85,20 @@ header { a.logo { float: left; - height: 46px; - line-height: 46px; - margin: 17px 45px 17px 4%; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; + height: 40px; + line-height: 40px; + margin: 17px 0 17px 4%; text-transform: uppercase; - font-size: 18px; + font-size: 16px; font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif; color: #2db7f5; + width: 219px; } .logo img { + width: 40px; float: left; - margin-top: -7px; - -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; - animation: rotateCircleBack 0.6s 1 ease-in-out; + margin-right: 8px; } .search { diff --git a/site/templates/home.html b/site/templates/home.html index 5a0c05d207..85711ebcac 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -61,7 +61,7 @@ .banner-text-wrapper { position: absolute; - left: 5%; + left: 10%; top: 60%; color: #fff; text-align: right; From ebe59bb08bce7628f83eb45171a8d2b883892931 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 17:54:38 +0800 Subject: [PATCH 18/58] update home page style --- site/templates/home.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/templates/home.html b/site/templates/home.html index 9f3d023e5f..6c0d760e57 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -9,6 +9,10 @@ font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, sans-serif; } + .index-page { + min-height: 600px; + } + header { position: fixed; z-index: 999; From 21b97c7d49398b7bfd95b0df7c14eaf2caf9af17 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 17:58:00 +0800 Subject: [PATCH 19/58] update home page style --- site/templates/home.html | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/site/templates/home.html b/site/templates/home.html index 6c0d760e57..3769073a46 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -25,22 +25,6 @@ color: #eee; } - .global-hint { - display: none; - } - - a.logo { - height: 40px; - line-height: 40px; - font-size: 14px; - text-indent: 5px; - } - - a.logo img { - width: 40px; - margin-top: 0; - } - .main-wrapper { display: none; } From 11cdde70ef8ef3c09183baee6098b3740dfd5bc3 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 18:17:30 +0800 Subject: [PATCH 20/58] update home text --- scripts/home.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index 01475961c4..8572f91368 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -47,7 +47,7 @@ class Banner extends React.Component { return (
    -

    ANT DESIGN

    +

    ANT

    DESIGN

    一个 UI 设计语言

    开始探索     @@ -97,8 +97,8 @@ ReactDOM.render(( -

    40+ 基础设计组件

    -

    为中后台设计中反复出现的问题提供一套完整的解决方案

    +

    几十个基础设计组件

    +

    丰富而且灵活的基础组件，为业务产品提供强有力的设计支持。

    @@ -112,7 +112,7 @@ ReactDOM.render((

    微小·确定·幸福

    -

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +

    这是一套致力于提升“用户”和“设计者”使用体验的中后台设计语言。

     From d3fdb1ae872f39f75f06f2f0075d78f89fff6405 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 19:50:14 +0800 Subject: [PATCH 21/58] add line --- scripts/home.js | 1 + site/templates/home.html | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index 8572f91368..dabe240d4d 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -49,6 +49,7 @@ class Banner extends React.Component {

    ANT

    DESIGN

    一个 UI 设计语言

    + 开始探索     diff --git a/site/templates/home.html b/site/templates/home.html index 3769073a46..5cce499d3e 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -16,7 +16,7 @@ header { position: fixed; z-index: 999; - background: rgba(0,0,0,0.25); + background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid transparent; transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } @@ -85,10 +85,9 @@ width: 1px; height: 80px; position: absolute; - background: #fff; + background: rgba(255, 255, 255, .5); top: 10px; right: -25px; - opacity: 0.5; } .banner-text-wrapper > p { From 752aa86dbbcb56331ee4537ae1250b967b89a22a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 20:51:13 +0800 Subject: [PATCH 22/58] better style for line --- site/templates/home.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/site/templates/home.html b/site/templates/home.html index 5cce499d3e..b563495637 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -78,15 +78,18 @@ .banner-text-wrapper h1 p { color: #FF3171; display: inline-block; - } .banner-text-wrapper .line { - width: 1px; - height: 80px; + width: 0.8px; + height: 76px; position: absolute; - background: rgba(255, 255, 255, .5); - top: 10px; + background: rgba(255, 255, 255, .44); + background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03)); + background-image: -moz-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03)); + background-image: -ms-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03)); + background-image: -o-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03)); + top: 16px; right: -25px; } From 02075784d69cfdf6be976fddaf0ca65e4c742048 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 23:47:14 +0800 Subject: [PATCH 23/58] update style --- scripts/demo.js | 1 - scripts/home.js | 29 +++++++++-------------------- site/static/style.css | 25 +++++++------------------ site/templates/footer.html | 4 ++-- site/templates/home.html | 30 +++++++++++++++++++++--------- 5 files changed, 39 insertions(+), 50 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 3698be048a..589167c10a 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -189,7 +189,6 @@ InstantClickChangeFns.push(function() { const priviewImgs = []; const boxLength = box.find('.preview-img').length; box.find('.preview-img').each(function(i, img) { - console.log(img.hasAttribute('good')); priviewImgs.push( diff --git a/scripts/home.js b/scripts/home.js index dabe240d4d..7658fe5c44 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -5,19 +5,9 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher'; import TweenOne from 'rc-tween-one'; -const DivId = ['page4', 'page3', 'page2', 'page1', 'banner']; -const header = document.getElementById('header'); -DivId.forEach(id=> { - const page = document.createElement('section'); - page.id = id; - if (id.indexOf('page') >= 0) { - page.className = 'page'; - } - document.body.insertBefore(page, header.nextSibling); -}); - -// 导航处理； +// 导航处理 function scrollNavEvent() { + console.log(document.body.scrollTop); const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const clientHeight = document.documentElement.clientHeight; if (scrollTop >= clientHeight) { @@ -60,7 +50,7 @@ class Banner extends React.Component { } } -ReactDOM.render(, banner); +ReactDOM.render(, document.getElementById('banner')); // page1 @@ -75,7 +65,7 @@ ReactDOM.render(( type="right"/>
     -), page1); +), document.getElementById('page1')); //page2 ReactDOM.render(( @@ -90,9 +80,9 @@ ReactDOM.render((     -), page2); +), document.getElementById('page2')); -//page3 +// page3 ReactDOM.render(( -), page3); +), document.getElementById('page3')); -//page4 +// page4 ReactDOM.render(( -

    微小·确定·幸福

    这是一套致力于提升“用户”和“设计者”使用体验的中后台设计语言。

    @@ -118,4 +107,4 @@ ReactDOM.render((     -), page4); +), document.getElementById('page4')); diff --git a/site/static/style.css b/site/static/style.css index ffe9dbeb7a..4e26f875ae 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -335,10 +335,11 @@ a.nav-link-disabled { footer { clear: both; border-top: 1px solid #eee; - font-size: 16px; + font-size: 12px; background: #fff; position: relative; z-index: 1; + color: #666; } footer ul { @@ -353,30 +354,18 @@ footer ul li { } footer ul li > h2 { - font-size: 1em; - color: #5C6B77; - margin: 10px auto 0; + font-size: 16px; + margin: 10px auto 5px; font-weight: normal; } -footer ul li > h3, -footer h3 { - font-size: 0.75em; - color: #5C6B77; - font-weight: normal; - margin-top: 12px; -} - -footer > h3 { - text-align: center; - font-size: .75em; - display: none; +footer ul li > div { + text-align: left; margin: auto; - padding: 10px 0; + margin: 10px 0; } footer ul li > a { - font-size: 0.75em; margin: 5px 2px 0 0; } diff --git a/site/templates/footer.html b/site/templates/footer.html index 63e2000c33..4c43fe3ba8 100644 --- a/site/templates/footer.html +++ b/site/templates/footer.html @@ -17,8 +17,8 @@ 报告 Bug
  • -

    ©2015 蚂蚁金服体验技术部出品

    -

    文档版本：

    +
    ©2015 蚂蚁金服体验技术部出品
    +
    文档版本：
    • diff --git a/site/templates/home.html b/site/templates/home.html index b563495637..eb5e4f28e4 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -3,10 +3,26 @@ {% block bodyAttribute %}class="index-page"{% endblock %} {% block content %} + +
    +
    +
    +
    {% endblock %} From c821b2cf03175a982f5498545b7ea11c9c40e1b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 8 Jan 2016 16:01:37 +0800 Subject: [PATCH 24/58] update new document --- docs/pattern/advanced-search.md | 51 +++++++++- docs/pattern/complex-table.md | 48 ++++++++- docs/pattern/navigation.md | 12 +-- docs/pattern/table.md | 173 +++++++++++++++++++++++++++++++- docs/practice/cases.md | 48 ++++++++- docs/resource/download.md | 89 ++++++++++------ docs/resource/github.md | 7 ++ docs/resource/reference.md | 3 +- scripts/demo.js | 10 +- scripts/home.js | 12 +-- site/static/style.css | 25 ++++- site/templates/aside.html | 4 +- site/templates/home.html | 5 +- 13 files changed, 423 insertions(+), 64 deletions(-) create mode 100644 docs/resource/github.md diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index ee6cc664ef..94a96d2153 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -5,4 +5,53 @@ --- -占位。 +借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。 + +## 常规型 + +### 交互 + + + +常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。 + +“高级搜索”功能一般开放给中间用户／专家用户使用，一般通过点击“高级搜索”触发；如果非常高频使用，可以默认展开“高级搜索”。 + +
    + + + +当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。 + +### 排列规则 + + + +搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。 + +### 规格 + + + +- 横向排版 + 在一行不要放置3列以上的输入框；标签和输入框应该落在栅格上。 +- 纵向排版 + 使用16px作为间距。 + + +## 字段型 + +### 交互 + + + +字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 + + +## 案例 + +高级搜索和表格配合使用的案例。 + + + + diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index e2e7b5ffa7..2464350859 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -1,8 +1,52 @@ -# 数据表格 +# 复杂数据表格 - category: 5 - order: 5 --- -占位。 +表格也用于展示复杂和高度结构化数据。 + +## 案例 + +### 多列数据 + + + +通过按钮，可实现更多列数据的加载以及左右切换。 + +
    + + + +提供用户自定义列的功能，方便用户查看需要的列。 + +
    + + + +固定表头列，通过横向滚动条来查看剩余内容。 + +### 带图标的表格 + + + +通过图标强化信息的传递，适用在表达数据变化趋势。 + +### 带图表的表格 + + + +通过图表来强化信息的传递，适用在表达数据变化趋势。 + +### 二维表格 + + + +横向和纵向各一个标题来展现数据。 + +### 小表格 + + + +适用在卡片、弹出框等空间较小的场景中。 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 59fa7ef47c..ea798cc9a8 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -23,7 +23,6 @@ 导航的结构由以下几部分组成。 - 1. 产品 Logo 和名称。 2. 业务类目。 3. 登陆工具。 @@ -32,9 +31,11 @@ > 注： > 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时； > 2. 面包屑可以分为这几类： -> - 路径型：路径型面包屑是一个动态显示用户到达页面经过的途径。 -> - 位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置。 -> - 属性型：属性型面包屑给出的当前页面的分类信息。 +> - 路径型：是一个动态显示用户到达页面经过的途径。 +> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。 +> - 属性型：属性型给出当前页面的分类信息。 + +
    @@ -58,13 +59,10 @@ 3. 登陆工具。 4. 面包屑（可选）。 -
    - - 不同类目层级。 diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 2199979a8c..52832f77a7 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -5,4 +5,175 @@ --- -占位。 +表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。 + +## 内容 + +通常表格的组成元素以及相关元素会有，这几部分组成。 + +1. 按钮组。 +2. 搜索条件。 +3. 筛选。 +4. 排序。 +5. 状态点。 +6. 单行操作。 +7. 分页器／无限加载（可选）。 + +### 筛选 + + + +当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。 + +### 状态点 + + + +一般用四种颜色来表明系统的不同状态。 + +
    + + + +当一个表格中出现两项需要强化的状态时，可以弱化其中一项，通过文字颜色的变化来进行强化。 + +### 更多操作 + + + +该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。 + +### 跳转至详情 + + + +把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 + +- 优点：节省空间； +- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况 + +
    + + + +在操作中增加一列『查看』，点击后进行跳转至详情。 + +- 优点：可发现性高；点击范围固定，不受影响； +- 缺点：比较占空间。 + +
    + +结论：可根据业务系统中表格的实际情况，统一使用一种类型。 + +## 交互 + +### 显示非常长的表格 + + + +分页器：以分段的形式加载表格，将是否需要加载其他项的选择权交给用户。 + +
    + + + +无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 + +### 全选数据 + + + + + + + +当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。 + +### 跨页选数据 + + + + + +当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。 + +### 固定按钮组 + + + +用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 + +### 某一项内容过长 + +某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。 + +### 模块编辑 + + + +适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。 + +### 直接编辑 + + + +适用在易编辑性高于易读性时。 + +### 悬浮层编辑 + + + +悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。 + + +## 规格 + +### 行高 + +标准 + + + + + +提供了多种规格的行高，适用在页面、弹出框等场景中。 + +### 列宽 + + + +一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意： + +1. 表头不换行； +2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。 + +### 对齐方式 + + + +数值右对齐，其余左对齐。 + + +## 案例 + + + +- 基础表格 + +
    + + + +- 合并单元格 + +
    + + + +- 可内嵌表格 + +
    + + + +- 编辑表格 diff --git a/docs/practice/cases.md b/docs/practice/cases.md index c18353e697..d205be91d7 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -5,14 +5,56 @@ --- - + Ant Design 是面向中后台的 UI 设计语言。 从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。 -## 精选案例 +## 最佳实践 --- -待补充。 +### 金融云 + + + +是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 + +立即访问 + +--- + +### OceanBase Cloud Platform + + + +OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 + +--- + +### 服务宝体验平台 + + + +体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 + +--- + +### AntV + + + +AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 + + diff --git a/docs/resource/download.md b/docs/resource/download.md index 71fc33cc06..6edcb7b8f3 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -7,52 +7,75 @@ 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。 -### 交互部件库 - - - - Axure Widgets + + + + Axure Components + 一套强大的 Ant Design 的 Axure 部件库 + - -### 组件视觉稿 - - - - Sketch + + + + Web Font + 网络字体图标的本地文件包 + - -### 图标 - - - - AI + + + + Axure Box + 强大的 Ant Design 组件拼装方式 + - - - Web font + + + + Sketch Components + Ant Design 组件的 Sketch 视觉稿 + diff --git a/docs/resource/github.md b/docs/resource/github.md new file mode 100644 index 0000000000..de1fb5c623 --- /dev/null +++ b/docs/resource/github.md @@ -0,0 +1,7 @@ +# GitHub + +- order: 3 +- category: 3 +- link: https://github.com/ant-design/ant-design + +--- diff --git a/docs/resource/reference.md b/docs/resource/reference.md index cec7dcbce4..bbd3894991 100644 --- a/docs/resource/reference.md +++ b/docs/resource/reference.md @@ -1,7 +1,8 @@ -# 相关书籍 +# 文献素材 - order: 1 - category: 1 +- disabled: true --- diff --git a/scripts/demo.js b/scripts/demo.js index 589167c10a..397eb560ee 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -174,8 +174,11 @@ var PriviewImg = React.createClass({
    {this.props.alt}
    - +
    + +
    {this.props.alt}
    + 查看原图     ); @@ -194,7 +197,10 @@ InstantClickChangeFns.push(function() { alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} /> ); }); - const mountNode = $('
    '); + let mountNode = $('
    '); + if (boxLength === 1) { + mountNode = $('
    '); + } box.replaceWith(mountNode); ReactDOM.render({priviewImgs}, mountNode[0]); }); diff --git a/scripts/home.js b/scripts/home.js index 7658fe5c44..5b8d18f245 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -59,8 +59,8 @@ ReactDOM.render(( -

    实例/优秀的设计实践

    -

    近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。

    +

    最佳实践

    +

    近一年的中后台设计实践，积累了大量的优秀案例。

     @@ -71,8 +71,8 @@ ReactDOM.render(( ReactDOM.render(( -

    设计模式库

    -

    为中后台设计中反复出现的问题提供一套相应的解决方案

    +

    设计模式

    +

    总结中后台设计中反复出现的问题，并提供相应的解决方案。

    @@ -88,7 +88,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; } From 658660a1585ba922c905206a1a15af752d896e98 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 16:04:01 +0800 Subject: [PATCH 26/58] Add images carousel --- docs/practice/cases.md | 6 ++- docs/spec/introduce.md | 4 +- scripts/demo.js | 92 ++++++++++++++++++++++++++++++---------- site/static/style.css | 35 +++++++++++++-- site/templates/home.html | 4 ++ 5 files changed, 111 insertions(+), 30 deletions(-) diff --git a/docs/practice/cases.md b/docs/practice/cases.md index 7ace801f33..03dd1d80a1 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,7 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 - +图例1 +图例2 +图例3 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -25,7 +27,7 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform - +图例3 OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index b9a9981b39..6122120c0c 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -5,9 +5,9 @@ --- -Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。 +Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。 - + Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 diff --git a/scripts/demo.js b/scripts/demo.js index f2e73a01a2..c9c3220d54 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -145,11 +145,20 @@ window.BrowserDemo = React.createClass({ } }); -var Modal = antd.Modal; -var PriviewImg = React.createClass({ +/* + +
    +
    +
    +     +*/ + +const { Modal, Carousel } = antd; +const PriviewImg = React.createClass({ getInitialState() { return { visible: false, + current: 0, }; }, showImageModal() { @@ -162,21 +171,38 @@ var PriviewImg = React.createClass({ visible: false }); }, + handleImgChange(current) { + this.setState({ current }); + }, render() { const goodCls = this.props.good ? 'good' : ''; const badCls = this.props.bad ? 'bad' : ''; + const imgsPack = this.props.imgsPack || [{ + src: this.props.src, + alt: this.props.alt, + }]; + const current = this.state.current; return (
    Sample Picture
    -
    {this.props.alt}
    - -
    - -
    -
    {this.props.alt}
    - 查看原图 +
    {this.props.alt}
    +
    {this.props.description}
    + + + { + imgsPack.map((img, i) => +
    +
    + +
    +
    + ) + } +     +
    {imgsPack[current].alt}
    + 查看原图
    ); @@ -187,24 +213,46 @@ InstantClickChangeFns.push(function() { const previewImageBoxes = $('.preview-img').parent(); previewImageBoxes.each(function(i, box) { box = $(box); - const priviewImgs = []; + let priviewImgs = []; const priviewImgNodes = box.find('.preview-img'); + + // 判断是否要做成图片集合 + // 指定了封面图片就是 + let coverImg; priviewImgNodes.each(function(i, img) { - priviewImgs.push( - - ); - }); - let mountNode = $('
    '); - if (priviewImgNodes.length === 1) { - let width = priviewImgNodes.eq(0).attr('width') || ''; - if (width && width.indexOf('%') < 0) { - width += 'px'; + if (img.hasAttribute('as-cover')) { + coverImg = img; + return false; } - mountNode = $('
    '); + }); + + if (coverImg) { + const imgs = []; + priviewImgNodes.each((i, img) => imgs.push(img)); + priviewImgs = ; + } else { + priviewImgNodes.each(function(i, img) { + priviewImgs.push( + + ); + }); } + + // 计算宽度 + let width = 'auto'; + if (priviewImgs.length === 1) { + width = priviewImgNodes[0].getAttribute('width') || ''; + } else if (coverImg) { + width = coverImg.getAttribute('width'); + } + if (width && width.indexOf('%') < 0 && width !== 'auto') { + width += 'px'; + } + + let mountNode = $('
    ')[0]; box.replaceWith(mountNode); - ReactDOM.render({priviewImgs}, mountNode[0]); + ReactDOM.render({priviewImgs}, mountNode); }); }); diff --git a/site/static/style.css b/site/static/style.css index fae37924b6..550e9422e2 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1298,6 +1298,12 @@ a.entry-link:hover .anticon-smile { left: 0; } +.preview-image-title { + font-size: 12px; + margin-top: 8px; + color: #666; +} + .preview-image-description { font-size: 12px; margin-top: 8px; @@ -1311,7 +1317,7 @@ a.entry-link:hover .anticon-smile { } .preview-image-box img:hover { - box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } .outside-link:after { @@ -1326,19 +1332,40 @@ a.entry-link:hover .anticon-smile { } .image-modal-container { - padding: 8px 8px 32px 8px; + position: relative; } .image-modal .ant-modal-header { display: none; } +.image-modal .ant-carousel .slick-slider { + padding-bottom: 24px; +} + +.image-modal .ant-carousel .slick-dots { + text-align: left; + bottom: -6px; +} + +.image-modal .ant-carousel .slick-dots li { + margin: 0; +} + +.image-modal .preview-image-title { + position: absolute; + bottom: 12px; + left: 50%; + display: inline-block; + transform: translateX(-50%);; +} + .image-modal .outside-link { position: absolute; right: 16px; - bottom: 16px; + bottom: 12px; } .image-modal img { - max-width: 100%; + width: 100%; } diff --git a/site/templates/home.html b/site/templates/home.html index 040c412d8d..737f8b3bd7 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -231,6 +231,10 @@ background: #000; } + .anticon-right { + transform: scale(0.6); + } + footer ul li > h2 { color: #777; } From b4c2d9bf8fcb65e3f9b5b6b6e88617db910cb38d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 17:31:03 +0800 Subject: [PATCH 27/58] update toc style --- docs/pattern/navigation.md | 23 +++++++++++++++++- docs/practice/cases.md | 26 +++++++++++++------- scripts/demo.js | 12 ++-------- site/static/script.js | 21 ++-------------- site/static/style.css | 49 +++++++++++++++++++++----------------- site/templates/demos.html | 2 +- site/templates/home.html | 2 +- site/templates/page.html | 2 +- 8 files changed, 73 insertions(+), 64 deletions(-) diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index f330443501..933d31e5b8 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -13,7 +13,28 @@ ## 常见导航 - + + + + + + + + + + + + + + + + + + + + + +
    侧栏导航顶部导航
    优点导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。
    缺点内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。
    总结一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。适用在操作性强、中后台管理性质的应用。
    我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。 diff --git a/docs/practice/cases.md b/docs/practice/cases.md index 03dd1d80a1..5d3f412509 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 -图例1 -图例2 -图例3 + + + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -27,7 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform -图例3 + + + OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 @@ -35,7 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### 服务宝体验平台 - + + + + + 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 @@ -43,18 +49,20 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### AntV - + + + AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 diff --git a/scripts/demo.js b/scripts/demo.js index c9c3220d54..e8aa79996e 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -145,14 +145,6 @@ window.BrowserDemo = React.createClass({ } }); -/* - -
    -
    -
    -     -*/ - const { Modal, Carousel } = antd; const PriviewImg = React.createClass({ getInitialState() { @@ -190,7 +182,7 @@ const PriviewImg = React.createClass({
    {this.props.alt}
    {this.props.description}
    - + { imgsPack.map((img, i) =>
    @@ -240,7 +232,7 @@ InstantClickChangeFns.push(function() { } // 计算宽度 - let width = 'auto'; + let width = ''; if (priviewImgs.length === 1) { width = priviewImgNodes[0].getAttribute('width') || ''; } else if (coverImg) { diff --git a/site/static/script.js b/site/static/script.js index 2e9113af14..8e84dd4630 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -58,27 +58,11 @@ InstantClickChangeFns.push(function() { $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); // 滚动时固定锚点、高亮当前项 - if ($('.toc')[0]) { - var titles = $('.markdown :header:not(h1)'); + if ($('.demos-anchor')[0]) { var doc = $(document); var tocTop = $('.toc').offset().top; function onScroll() { - var top = doc.scrollTop(), i; - if (top >= doc.height()- $(window).height() - 20) { - i = titles.length - 1; - } else { - for (i=0; i titles.length - 1) ? (titles.length - 1) : i; - } - $('.anchor a').removeClass('current'); - $('.anchor a').eq(i).addClass('current'); - + var top = doc.scrollTop(); if (top >= tocTop) { $('.toc').addClass('sticky'); } else { @@ -86,7 +70,6 @@ InstantClickChangeFns.push(function() { } } onScroll(); - // 滚动高亮 $(window).off('scroll'); $(window).on('scroll', onScroll); } diff --git a/site/static/style.css b/site/static/style.css index 550e9422e2..bd3b10073d 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -491,7 +491,6 @@ footer ul li > a { color: #666; font-size: 14px; line-height: 1.8; - width: 80%; } .highlight { @@ -541,6 +540,14 @@ footer ul li > a { margin: 1em 0; } +.markdown > p, +.markdown > blockquote, +.markdown > .highlight, +.markdown > ol, +.markdown > ul { + width: 80%; +} + .markdown > ul li, .markdown blockquote ul > li { list-style: circle; @@ -613,7 +620,6 @@ footer ul li > a { border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; - overflow: hidden; } .markdown blockquote p { @@ -688,37 +694,28 @@ footer ul li > a { } .toc { - position: absolute; - font-size: 12px; - background: #fff; - padding-top: 12px; - right: 24px; - overflow: hidden; -} - -.toc.sticky { - position: fixed; - top: 0; - right: 4%; - margin-right: 24px; - z-index: 100; + font-size: 14px; + margin-bottom: 20px; + background: #fbfbfb; + padding: 8px 0; + border-left: 2px solid #eee; } .toc li > ul { text-indent: 8px; + font-size: 12px; + display: none; } .toc a { - padding-left: 8px; + padding-left: 16px; border-left: 2px solid #eee; + margin-left: -2px; display: block; transition: all 0.3s ease; white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; - max-width: 90px; - line-height: 20px; - color: #999; + color: #666; } .toc a:hover { @@ -1246,9 +1243,17 @@ a.entry-link:hover .anticon-smile { font-size: 12px; } +.demos-anchor.toc.sticky { + position: fixed; + top: 0; + right: 4%; + margin-right: 24px; + z-index: 100; +} + .preview-image-boxes { float: right; - margin: 0 -14% 30px 60px; + margin: 0 0 30px 60px; width: 600px; overflow: hidden; } diff --git a/site/templates/demos.html b/site/templates/demos.html index 16dacdfc86..905bde6485 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -33,7 +33,7 @@
    {%- endif %}
    -
      +
        {%- for item in items %} {%- set post = item.meta.filepath|parsePost %}
      • diff --git a/site/templates/home.html b/site/templates/home.html index 737f8b3bd7..78ea83c355 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -61,7 +61,7 @@ .banner-text-wrapper { position: absolute; left: 10%; - top: 60%; + bottom: 20%; color: #fff; text-align: right; } diff --git a/site/templates/page.html b/site/templates/page.html index d474f51b2c..e2ccae706b 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -16,9 +16,9 @@ {% block content %}
        -
        {{ post.toc }}

        {{ post.title }} {{ post.meta.chinese }}

        +
        {{ post.toc }}
        {{ post.html|add_anchor }}
        From bbf302cc933d1a22cd6881af6c1959e6224270b9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 17:52:34 +0800 Subject: [PATCH 28/58] update pics --- docs/practice/cases.md | 28 ++++++++++++++-------------- scripts/demo.js | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/practice/cases.md b/docs/practice/cases.md index 5d3f412509..c6d368890b 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 - - - + + + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -27,9 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform - - - + + + OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 @@ -37,11 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### 服务宝体验平台 - - - - - + + + + + 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 @@ -49,9 +49,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### AntV - - - + + + AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 diff --git a/scripts/demo.js b/scripts/demo.js index e8aa79996e..150f81c4a4 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -181,7 +181,7 @@ const PriviewImg = React.createClass({
    {this.props.alt}
    {this.props.description}
    - + { imgsPack.map((img, i) => From d3fe6380dfbf34d5ada0280684cc4a486a5148b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 17:55:12 +0800 Subject: [PATCH 29/58] update toc --- site/static/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/static/style.css b/site/static/style.css index bd3b10073d..721783d969 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -697,10 +697,13 @@ footer ul li > a { font-size: 14px; margin-bottom: 20px; background: #fbfbfb; - padding: 8px 0; border-left: 2px solid #eee; } +.toc > ul { + padding: 8px 0; +} + .toc li > ul { text-indent: 8px; font-size: 12px; From ca2edd2b1d512b303c90d8f76870f1e212aa9759 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 19:19:14 +0800 Subject: [PATCH 30/58] Add pictures --- components/layout/index.md | 2 +- docs/pattern/advanced-search.md | 24 ++++----- docs/pattern/complex-table.md | 14 +++--- docs/pattern/form.md | 70 ++++++++++++++------------- docs/pattern/list.md | 62 +++++++++--------------- docs/pattern/navigation.md | 28 +++++------ docs/pattern/table.md | 86 +++++++++++++++------------------ docs/practice/cases.md | 28 +++++------ docs/react/getting-started.md | 1 + scripts/demo.js | 15 ++++-- site/static/style.css | 77 ++++++++++++++++++++++------- 11 files changed, 214 insertions(+), 193 deletions(-) diff --git a/components/layout/index.md b/components/layout/index.md index 64dd254da3..2101e4a732 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -11,7 +11,7 @@ ## 设计理念 -
    +
    100%
    diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index 94a96d2153..86f7c049b8 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -11,7 +11,7 @@ ### 交互 - + 常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。 @@ -19,39 +19,35 @@
    - + 当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。 ### 排列规则 - + 搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。 ### 规格 - + + + - 横向排版 - 在一行不要放置3列以上的输入框；标签和输入框应该落在栅格上。 + 在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。 - 纵向排版 - 使用16px作为间距。 + 使用 `16px` 作为间距。 ## 字段型 ### 交互 - + 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 -## 案例 - -高级搜索和表格配合使用的案例。 - - - - +## 案例（敬请期待） diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index 2464350859..8b71d26332 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -11,42 +11,42 @@ ### 多列数据 - + 通过按钮，可实现更多列数据的加载以及左右切换。
    - + 提供用户自定义列的功能，方便用户查看需要的列。
    - + 固定表头列，通过横向滚动条来查看剩余内容。 ### 带图标的表格 - + 通过图标强化信息的传递，适用在表达数据变化趋势。 ### 带图表的表格 - + 通过图表来强化信息的传递，适用在表达数据变化趋势。 ### 二维表格 - + 横向和纵向各一个标题来展现数据。 ### 小表格 - + 适用在卡片、弹出框等空间较小的场景中。 diff --git a/docs/pattern/form.md b/docs/pattern/form.md index 2112b164de..34e233d848 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -25,14 +25,14 @@ ## 内容 - + 通常表单会有四个部分组成。 -1. 标签。 -2. 输入框。 -3. 动作。 -4. 校验反馈。 +1. 标签 +2. 输入框 +3. 动作 +4. 校验反馈 > 注：`*` 表明该项为必填项。 @@ -40,39 +40,50 @@ ### 填空 -图片的描述语句 +填空示例 在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。 ### 组合输入框 -图片的描述语句 +组合输入框示例 当两个输入框关联性很强时，可以前后拼接，减少页面空间。 ### 对齐方式 -图片的描述语句 +对齐方式示例 在页面设计表单时，按钮组必须和输入框左对齐。 ### 禁用主按钮 -图片的描述语句 -图片的描述语句 - 当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。 +
    + +未达字符标准时，主按钮禁用状态 + +达到字符标准时，主按钮可用状态 + +当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。 + +
    + +不禁用示例 + +当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。 + ### 结构化的格式 -图片的描述语句 +输入格式化的数据 用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。 ### 输入提示 & 输入提醒 -图片的描述语句 -图片的描述语句 +输入提示 +输入提醒 输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。 @@ -80,40 +91,31 @@ ### 密码加强计 -图片的描述语句 +密码强度 提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。 ### 校验 -图片的描述语句 -图片的描述语句 +输入时的实时校验 +输入框失去焦点后的校验 -图片的描述语句 +点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。 -图片的描述语句 - - -通过不同的“校验”规则和形式进行反馈，避免用户在点击提交后才刚刚开始“校验”，让用户提前纠正错误。 +通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。 ### 字数校验框 -图片的描述语句 +字数校验框示例 用于统计当前输入长度，以及是否超过系统阈值。 -### 容错格式 +### 容错格式（敬请期待） -待补充。 +### 自动完成（敬请期待） -### 自动完成 +### 列表构造器（敬请期待） -待补充。 +### 良好的默认值（敬请期待） -### 列表构造器 - -待补充。 - -### 良好的默认值 - -待补充。 +## 规格（敬请期待） diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 8c4c45ff80..216a703cea 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -17,100 +17,86 @@ ### 显示详情信息 -图片的描述语句 +气泡显示示例 气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。 +使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。 + +使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。 +
    -图片的描述语句 +列表嵌入示例1 + +列表嵌入示例2 + +列表嵌入示例3 列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
    -图片的描述语句 + 弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
    -图片的描述语句 + 双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
    -图片的描述语句 + 单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。 ### 显示更多文本 -图片的描述语句 + 宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
    -图片的描述语句 + 对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。 ### 显示图片 -图片的描述语句 + 走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
    -图片的描述语句 + 缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。 ### 显示长列表 -图片的描述语句 + 分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
    -图片的描述语句 + 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 ### 显示分类或者层级的列表 -图片的描述语句 -图片的描述语句 +两层折叠面板示例 -两层结构。 +多层折叠面板示例 + +两层折叠面板表格
    -图片的描述语句 -图片的描述语句 - -多层结构。 - -
    - -## 案例 - -图片的描述语句 - -功能可有批操作，升序降序，分页，单条操作。 - -
    - -图片的描述语句 - -列表各项的合并、详情展开。 - -
    - -图片的描述语句 - -卡片网格。 +## 案例（敬请期待） diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 933d31e5b8..c718f7533e 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -40,14 +40,16 @@ ## 侧栏导航 - +--- + + 导航的结构由以下几部分组成。 -1. 产品 Logo 和名称。 -2. 业务类目。 -3. 登陆工具。 -4. 面包屑（可选）。 +1. 产品 Logo 和名称 +2. 业务类目 +3. 登陆工具 +4. 面包屑（可选） > 注： > 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时； @@ -58,20 +60,18 @@
    - +一级类目 - - - +多级类目展开 我们定义了不同类目层级所对应的导航样式。 ## 顶部导航 - +--- - +顶部导航结构 结构如右图所示： @@ -82,10 +82,8 @@
    - +二级类目 - - - +四级类目 不同类目层级。 diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 52832f77a7..2786bd6fad 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -9,43 +9,45 @@ ## 内容 + + 通常表格的组成元素以及相关元素会有，这几部分组成。 -1. 按钮组。 -2. 搜索条件。 -3. 筛选。 -4. 排序。 -5. 状态点。 -6. 单行操作。 -7. 分页器／无限加载（可选）。 +1. 按钮组 +2. 搜索条件 +3. 筛选 +4. 排序 +5. 状态点 +6. 单行操作 +7. 分页器／无限加载（可选） ### 筛选 - + 当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。 ### 状态点 - +状态示例 一般用四种颜色来表明系统的不同状态。
    - +多列状态示例 当一个表格中出现两项需要强化的状态时，可以弱化其中一项，通过文字颜色的变化来进行强化。 ### 更多操作 - +依次分别为：完整内容、暂时不可用、没有该权限。 该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。 ### 跳转至详情 - +名称跳转示例 把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 @@ -54,7 +56,7 @@
    - +查看跳转示例 在操作中增加一列『查看』，点击后进行跳转至详情。 @@ -69,64 +71,74 @@ ### 显示非常长的表格 - + 分页器：以分段的形式加载表格，将是否需要加载其他项的选择权交给用户。
    - + 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 ### 全选数据 - + - + - + 当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。 ### 跨页选数据 - +状态一：选中一行数据 - +状态二：切换分页后，记录所选的项目 + +状态三：在其他页中再选择一项，多记录一项选择 + +状态四：用户可以在记录条直接取消选择 + +状态五：表格选择框同步取消选择 当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。 ### 固定按钮组 - +顶部固定按钮 + +底部固定按钮 用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 ### 某一项内容过长 + + 某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。 ### 模块编辑 - + 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。 ### 直接编辑 - + 适用在易编辑性高于易读性时。 ### 悬浮层编辑 - + 悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。 -## 规格 +## 规格（敬请期待） ### 行高 @@ -154,26 +166,4 @@ 数值右对齐，其余左对齐。 -## 案例 - - - -- 基础表格 - -
    - - - -- 合并单元格 - -
    - - - -- 可内嵌表格 - -
    - - - -- 编辑表格 +## 案例（敬请期待） diff --git a/docs/practice/cases.md b/docs/practice/cases.md index c6d368890b..ef24db5872 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 - - - + + + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -27,9 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform - - - + + + OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 @@ -37,11 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### 服务宝体验平台 - - - - - + + + + + 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 @@ -49,9 +49,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### AntV - - - + + + AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 3284ffc4e1..5066c080a8 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 margin-top: -42px; position: relative; z-index: 1; + width: 80%; } diff --git a/scripts/demo.js b/scripts/demo.js index 150f81c4a4..9ae6323859 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -173,16 +173,21 @@ const PriviewImg = React.createClass({ src: this.props.src, alt: this.props.alt, }]; + const imgStyle = {}; + if (this.props.noPadding) { + imgStyle.padding = '0'; + imgStyle.background = 'none'; + } const current = this.state.current; return (
    - Sample Picture + Sample Picture
    {this.props.alt}
    {this.props.description}
    - + { imgsPack.map((img, i) =>
    @@ -194,7 +199,6 @@ const PriviewImg = React.createClass({ }
    {imgsPack[current].alt}
    - 查看原图
    ); @@ -225,8 +229,9 @@ InstantClickChangeFns.push(function() { } else { priviewImgNodes.each(function(i, img) { priviewImgs.push( - + ); }); } diff --git a/site/static/style.css b/site/static/style.css index 721783d969..58f2ae688d 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1257,8 +1257,7 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; margin: 0 0 30px 60px; - width: 600px; - overflow: hidden; + width: 616px; } .preview-image-box { @@ -1267,17 +1266,9 @@ a.entry-link:hover .anticon-smile { padding: 0 8px; } -.preview-image-box:first-child { - margin-left: -8px; -} - -.preview-image-box:last-child { - margin-right: -8px; -} - .preview-image-wrapper { - background: #F2F2F2; - padding: 24px; + background: #f4f4f4; + padding: 16px; display: inline-block; text-align: center; width: 100%; @@ -1308,24 +1299,28 @@ a.entry-link:hover .anticon-smile { .preview-image-title { font-size: 12px; - margin-top: 8px; + margin-top: 5px; color: #666; } .preview-image-description { font-size: 12px; - margin-top: 8px; + margin-top: 2px; color: #999; + line-height: 1.5; } .preview-image-box img { cursor: pointer; max-width: 100%; transition: box-shadow 0.3s ease; + background: #fff; + padding: 12px; + border-radius: 6px; } .preview-image-box img:hover { - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); + box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); } .outside-link:after { @@ -1341,6 +1336,7 @@ a.entry-link:hover .anticon-smile { .image-modal-container { position: relative; + text-align: center; } .image-modal .ant-modal-header { @@ -1368,12 +1364,59 @@ a.entry-link:hover .anticon-smile { transform: translateX(-50%);; } +.image-modal .slick-prev { + left: 0; + height: 100%; + top: 0; + margin-top: 0; + width: 50%; + text-align: left; +} + +.image-modal .slick-prev:after { + content: "\e601"; + font-size: 28px; + font-family: "anticon"; + color: #000; + opacity: 0; + transition: all 0.3s ease; + margin-left: 24px; +} + +.image-modal .slick-prev:hover:after { + opacity: 0.38; +} + +.image-modal .slick-next { + right: 0; + height: 100%; + top: 0; + margin-top: 0; + width: 50%; + text-align: right; +} + +.image-modal .slick-next:after { + content: "\e600"; + font-size: 28px; + font-family: "anticon"; + color: #000; + opacity: 0; + transition: all 0.3s ease; + margin-right: 24px; +} + +.image-modal .slick-next:hover:after { + opacity: 0.38; +} + .image-modal .outside-link { position: absolute; right: 16px; bottom: 12px; } -.image-modal img { - width: 100%; +.image-modal .ant-carousel .slick-slide img { + max-width: 100%; + display: inline-block; } From 016b04f4d318496d7dfe8543082712bc5d99dfff Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 19:40:43 +0800 Subject: [PATCH 31/58] upgrade table pattern --- docs/pattern/table.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 2786bd6fad..2dee821dbb 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -69,17 +69,9 @@ ## 交互 -### 显示非常长的表格 +### 显示长表格 - - -分页器：以分段的形式加载表格，将是否需要加载其他项的选择权交给用户。 - -
    - - - -无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 +参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。 ### 全选数据 From adf9a11b8bc7d23e32a70eaeff3537479c7c5d90 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 19:48:39 +0800 Subject: [PATCH 32/58] fix docs --- docs/pattern/navigation.md | 2 ++ site/static/script.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index c718f7533e..7fb4c596cc 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -38,6 +38,8 @@ 我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。 +前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。 + ## 侧栏导航 --- diff --git a/site/static/script.js b/site/static/script.js index 8e84dd4630..4e8295f993 100644 --- a/site/static/script.js +++ b/site/static/script.js @@ -44,8 +44,8 @@ InstantClickChangeFns.push(function() { }); function hashChange() { - $('.anchor a').removeClass('current'); - $('.anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current'); + $('.demos-anchor a').removeClass('current'); + $('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current'); } hashChange(); From 32ca98c2cd0b3ee177c42f78f3a5e8a32b150948 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 11:20:22 +0800 Subject: [PATCH 33/58] update home page style --- scripts/home.js | 12 +++++------- site/templates/home.html | 10 +++++++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/scripts/home.js b/scripts/home.js index 5b8d18f245..f34a238175 100644 --- a/scripts/home.js +++ b/scripts/home.js @@ -7,7 +7,6 @@ import TweenOne from 'rc-tween-one'; // 导航处理 function scrollNavEvent() { - console.log(document.body.scrollTop); const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const clientHeight = document.documentElement.clientHeight; if (scrollTop >= clientHeight) { @@ -37,7 +36,7 @@ class Banner extends React.Component { return (
    -

    ANT

    DESIGN

    +

    ANT

    DESIGN

    一个 UI 设计语言

    开始探索 @@ -52,14 +51,13 @@ class Banner extends React.Component { ReactDOM.render(, document.getElementById('banner')); - // page1 ReactDOM.render(( -

    最佳实践

    +

    最佳实践

    近一年的中后台设计实践，积累了大量的优秀案例。

    @@ -71,7 +69,7 @@ ReactDOM.render(( ReactDOM.render(( -

    设计模式

    +

    设计模式

    总结中后台设计中反复出现的问题，并提供相应的解决方案。

    @@ -88,7 +86,7 @@ ReactDOM.render(( -

    数十个基础设计组件

    +

    数十个基础设计组件

    丰富而且灵活的基础组件，为业务产品提供强有力的设计支持。

    From 0002062eb8027d34388745f410796a69efddd1c9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 17:44:01 +0800 Subject: [PATCH 38/58] update table size pattern --- docs/pattern/table.md | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 566e49a68b..56c3906013 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -33,12 +33,6 @@ 一般用四种颜色来表明系统的不同状态。 -
    - -多列状态示例 - -当一个表格中出现两项需要强化的状态时，可以弱化其中一项，通过文字颜色的变化来进行强化。 - ### 更多操作 依次分别为：完整内容、暂时不可用、没有该权限。 @@ -130,21 +124,23 @@ 悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。 -## 规格（敬请期待） +## 规格 ### 行高 -标准 +标准 - +适中 - +紧凑 提供了多种规格的行高，适用在页面、弹出框等场景中。 ### 列宽 - +错误示例 + +正确示例 一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意： @@ -153,9 +149,9 @@ ### 对齐方式 - + -数值右对齐，其余左对齐。 +数值右对齐（带小数则按小数点对齐），其余左对齐。 ## 案例（敬请期待） From f4f967ec8ec1386c748187793ea5336f1163fe40 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 18:40:40 +0800 Subject: [PATCH 39/58] update cases image pack style --- docs/practice/cases.md | 28 ++++++++++++++-------------- site/static/style.css | 9 ++++++++- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/docs/practice/cases.md b/docs/practice/cases.md index ef24db5872..c6d368890b 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 - - - + + + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -27,9 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform - - - + + + OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 @@ -37,11 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### 服务宝体验平台 - - - - - + + + + + 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 @@ -49,9 +49,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### AntV - - - + + + AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 diff --git a/site/static/style.css b/site/static/style.css index 58f2ae688d..3395cf7f11 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1313,14 +1313,21 @@ a.entry-link:hover .anticon-smile { .preview-image-box img { cursor: pointer; max-width: 100%; - transition: box-shadow 0.3s ease; + transition: all 0.3s ease; background: #fff; padding: 12px; border-radius: 6px; } +.preview-image-boxes.pack img { + padding: 0; + border-bottom: 1px solid #ddd; + box-shadow: 0 2px 0 0 #fff, 0 3px 0 0 #ddd, 0 5px 0 0 #fff, 0 6px 0 0 #ddd; +} + .preview-image-box img:hover { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); + border-bottom-width: 0; } .outside-link:after { From 0e0a16c5c0d355216535700f362859504d90505c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 18:53:01 +0800 Subject: [PATCH 40/58] fix home page animation --- site/templates/home.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/templates/home.html b/site/templates/home.html index 7dbaa431ce..4c0bd62209 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -9,7 +9,6 @@
    - + {% endblock %} From 5306d32cdaf54014c61d13c76646099d68134f62 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 18:56:34 +0800 Subject: [PATCH 41/58] update cases image pack style --- docs/practice/cases.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/practice/cases.md b/docs/practice/cases.md index c6d368890b..bdfe7cc795 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -61,6 +61,7 @@ AntV 是把这几年来数据图形组在探索数据可视化过程中有价值 } .preview-image-wrapper { padding: 0; + background: #fff; } .toc { display: none; From c0e7cad5bc12e62cef629dd811294b2aaa3048a5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 19:23:09 +0800 Subject: [PATCH 42/58] update cases image pack style --- site/static/style.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/static/style.css b/site/static/style.css index 3395cf7f11..35897ebf92 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1321,13 +1321,11 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes.pack img { padding: 0; - border-bottom: 1px solid #ddd; - box-shadow: 0 2px 0 0 #fff, 0 3px 0 0 #ddd, 0 5px 0 0 #fff, 0 6px 0 0 #ddd; + box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd; } .preview-image-box img:hover { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); - border-bottom-width: 0; } .outside-link:after { From 1819a9dba02c98db3c2e6665df205039a2a4624a Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Jan 2016 21:26:59 +0800 Subject: [PATCH 43/58] fix typo --- docs/spec/motion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 1de435adb5..3c4b02246a 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -136,7 +136,7 @@ motions = motions.concat([[{ direction: 'enter', type: '移动' }, { - name: '右方滑入', + name: '右方滑出', value: 'move-right', direction: 'leave', type: '移动' From 57a6535a4c596a61949d753ae4caa9ff1557db44 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 12 Jan 2016 14:12:21 +0800 Subject: [PATCH 44/58] upgrade pattern form.md --- docs/pattern/form.md | 56 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/docs/pattern/form.md b/docs/pattern/form.md index 138c2cbb23..a0eece9a04 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -106,16 +106,60 @@ ### 字数校验框 -字数校验框示例 +字数校验框示例 用于统计当前输入长度，以及是否超过系统阈值。 -### 容错格式（敬请期待） -### 自动完成（敬请期待） +## 规格 -### 列表构造器（敬请期待） +### 间距 -### 良好的默认值（敬请期待） +间隔示例 -## 规格（敬请期待） +典型表单的间隔规范。 + +### 输入框宽度 + +正确示例 +错误示例 + +当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。 + +
    + +### 对齐方式 + +间隔示例 + +无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。 + +
    + +右对齐（推荐） + +右对齐（推荐）。 + +- 优点：减少垂直空间。 +- 缺点：降低可读性；标签长度和输入框弹性小。 +- 场景：既要减少垂直空间，又要加快填写速度。 + +
    + +顶部对齐 + +顶部对齐。 + +- 优点：有最快的浏览和处理速度；标签长度弹性大。 +- 缺点：非常占垂直空间。 +- 场景：希望用户快速填写表单，完成任务。 + +
    + +左对齐 + +左对齐。 + +- 优点：容易浏览；减少垂直空间。 +- 缺点：填写速度慢；标签长度和输入框弹性小。 +- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。 From 8d1446929309ccdb6c6a93e632d63e75590d5989 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 12 Jan 2016 14:37:59 +0800 Subject: [PATCH 45/58] update toc style --- site/static/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/static/style.css b/site/static/style.css index 35897ebf92..1b09ebd13e 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1246,6 +1246,10 @@ a.entry-link:hover .anticon-smile { font-size: 12px; } +.demos-anchor a { + padding-left: 8px; +} + .demos-anchor.toc.sticky { position: fixed; top: 0; From 7ae966873a87746aa65b7cb3a9d6ea2c437496e5 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 12 Jan 2016 17:07:24 +0800 Subject: [PATCH 46/58] fix: cyclic reference in Modal --- components/modal/Modal.jsx | 76 ++++++++++++++++++++++++++++++++++++ components/modal/confirm.jsx | 2 +- components/modal/index.jsx | 75 +---------------------------------- 3 files changed, 78 insertions(+), 75 deletions(-) create mode 100644 components/modal/Modal.jsx diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx new file mode 100644 index 0000000000..997c9471d0 --- /dev/null +++ b/components/modal/Modal.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import Dialog from 'rc-dialog'; +import { Dom } from 'rc-util'; +import Button from '../button'; + +function noop() {} + +let mousePosition; +let mousePositionEventBinded; + +let AntModal = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-modal', + onOk: noop, + onCancel: noop, + okText: '确定', + cancelText: '取消', + width: 520, + transitionName: 'zoom', + maskAnimation: 'fade', + confirmLoading: false, + visible: false + }; + }, + + handleCancel() { + this.props.onCancel(); + }, + + handleOk() { + this.props.onOk(); + }, + + componentDidMount() { + if (mousePositionEventBinded) { + return; + } + // 只有点击事件支持从鼠标位置动画展开 + Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) { + mousePosition = { + x: e.pageX, + y: e.pageY + }; + // 20ms 内发生过点击事件，则从点击位置动画展示 + // 否则直接 zoom 展示 + // 这样可以兼容非点击方式展开 + setTimeout(() => mousePosition = null, 20); + }); + mousePositionEventBinded = true; + }, + + render() { + let props = this.props; + let defaultFooter = [ + , + + ]; + let footer = props.footer || defaultFooter; + return ; + } +}); + +export default AntModal; diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index 9b8eb43d46..70e9cfb884 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Dialog from './index'; +import Dialog from './modal'; import Icon from '../icon'; import Button from '../button'; diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 9166a13e9a..79267824e1 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -1,78 +1,5 @@ -import React from 'react'; -import Dialog from 'rc-dialog'; -import { Dom } from 'rc-util'; +import AntModal from './Modal'; import confirm from './confirm'; -import Button from '../button'; - -function noop() {} - -let mousePosition; -let mousePositionEventBinded; - -let AntModal = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-modal', - onOk: noop, - onCancel: noop, - okText: '确定', - cancelText: '取消', - width: 520, - transitionName: 'zoom', - maskAnimation: 'fade', - confirmLoading: false, - visible: false - }; - }, - - handleCancel() { - this.props.onCancel(); - }, - - handleOk() { - this.props.onOk(); - }, - - componentDidMount() { - if (mousePositionEventBinded) { - return; - } - // 只有点击事件支持从鼠标位置动画展开 - Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) { - mousePosition = { - x: e.pageX, - y: e.pageY - }; - // 20ms 内发生过点击事件，则从点击位置动画展示 - // 否则直接 zoom 展示 - // 这样可以兼容非点击方式展开 - setTimeout(() => mousePosition = null, 20); - }); - mousePositionEventBinded = true; - }, - - render() { - let props = this.props; - let defaultFooter = [ - , - - ]; - let footer = props.footer || defaultFooter; - return ; - } -}); AntModal.info = function (props) { props.iconClassName = 'info-circle'; From 7470b3e5c57d4282d26c44b86a68bb626e4594a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 12 Jan 2016 19:00:40 +0800 Subject: [PATCH 47/58] Fix qrcode icon, close #772 --- CHANGELOG.md | 1 + components/icon/index.md | 2 +- style/core/iconfont.less | 1 + style/themes/default/custom.less | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0798b10025..f0e3b346f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818) - 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826) - 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824) +- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772) ## 0.11.2 `2015-01-03` diff --git a/components/icon/index.md b/components/icon/index.md index 9188c162e2..10c72b88fe 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -152,7 +152,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward' const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle']; -const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o']; +const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o']; ReactDOM.render(, document.getElementById('iconset-direction')); diff --git a/style/core/iconfont.less b/style/core/iconfont.less index 18577043de..e62df67787 100644 --- a/style/core/iconfont.less +++ b/style/core/iconfont.less @@ -179,6 +179,7 @@ .@{iconfont-css-prefix}-caret-circle-up:before {content:"\e606";} .@{iconfont-css-prefix}-caret-circle-down:before {content:"\e607";} .@{iconfont-css-prefix}-qrcode:before {content:"\e6a5";} +.@{iconfont-css-prefix}-scan:before {content:"\e6af";} .@{iconfont-css-prefix}-like:before {content:"\e6a3";} .@{iconfont-css-prefix}-dislike:before {content:"\e6a2";} .@{iconfont-css-prefix}-pay-circle:before {content:"\e6a8";} diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index c092a064c8..86ce71a44a 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -20,7 +20,7 @@ // ICONFONT @iconfont-css-prefix : anticon; -@icon-url : "//at.alicdn.com/t/font_1450842624_7594283"; +@icon-url : "//at.alicdn.com/t/font_1452596235_7047422"; // LINK @link-color : #2db7f5; From 33f2863e68f1e4bd21060ea6f8eb09dfd9a37d35 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 12 Jan 2016 15:51:44 +0800 Subject: [PATCH 48/58] update new design spec style --- components/icon/index.md | 1 - docs/pattern/advanced-search.md | 19 ++++++----- docs/pattern/complex-table.md | 16 +++++----- docs/pattern/form.md | 38 +++++++++++----------- docs/pattern/index.md | 2 +- docs/pattern/list.md | 22 ++++++------- docs/pattern/navigation.md | 21 +++++++------ docs/pattern/table.md | 36 ++++++++++----------- docs/practice/cases.md | 56 ++++++++++++++++++++++++++++++--- docs/react/getting-started.md | 2 +- docs/react/introduce.md | 2 +- docs/resource/download.md | 23 ++++++++++---- docs/resource/reference.md | 18 ++++++++--- scripts/demo.js | 6 ++-- scripts/home.js | 4 +-- site/static/style.css | 33 ++++++++++++++----- site/templates/layout.html | 8 ++--- 17 files changed, 195 insertions(+), 112 deletions(-) diff --git a/components/icon/index.md b/components/icon/index.md index 9188c162e2..288a253c6c 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -50,7 +50,6 @@ ul.anticons-list { margin: 20px 0; list-style: none; - width: 120%; overflow: hidden; } ul.anticons-list li { diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index 86f7c049b8..16a33ec7df 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -11,33 +11,36 @@ ### 交互 - +交互示例 常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。 -“高级搜索”功能一般开放给中间用户／专家用户使用，一般通过点击“高级搜索”触发；如果非常高频使用，可以默认展开“高级搜索”。 +『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
    - +交互示例 -当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。 +当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。 ### 排列规则 - +排列示例 搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。 ### 规格 - +规格示例 - +规格示例 - 横向排版 + 在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。 + - 纵向排版 + 使用 `16px` 作为间距。 @@ -45,7 +48,7 @@ ### 交互 - +交互示例 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index 8b71d26332..2c4e103a70 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -1,4 +1,4 @@ -# 复杂数据表格 +# 表格：复杂数据 - category: 5 - order: 5 @@ -11,42 +11,42 @@ ### 多列数据 - +多列数据示例 通过按钮，可实现更多列数据的加载以及左右切换。
    - +自定义列示例 提供用户自定义列的功能，方便用户查看需要的列。
    - +横向滚动示例 固定表头列，通过横向滚动条来查看剩余内容。 ### 带图标的表格 - +带图标表格示例 通过图标强化信息的传递，适用在表达数据变化趋势。 ### 带图表的表格 - +带图表表格示例 通过图表来强化信息的传递，适用在表达数据变化趋势。 ### 二维表格 - +二维表格示例 横向和纵向各一个标题来展现数据。 ### 小表格 - +小表格示例 适用在卡片、弹出框等空间较小的场景中。 diff --git a/docs/pattern/form.md b/docs/pattern/form.md index a0eece9a04..ac865a1b5f 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -25,14 +25,14 @@ ## 内容 - +结构示例 通常表单会有四个部分组成。 1. 标签 2. 输入框 -3. 动作 -4. 校验反馈 +3. 校验反馈 +4. 动作 > 注：`*` 表明该项为必填项。 @@ -70,20 +70,20 @@
    -不禁用示例 +不禁用示例 当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。 ### 结构化的格式 -输入格式化的数据 +结构化的格式示例 用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。 ### 输入提示 & 输入提醒 -输入提示 -输入提醒 +输入提示示例 +输入提醒示例 输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。 @@ -91,16 +91,16 @@ ### 密码加强计 -密码强度 +密码强度示例 提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。 ### 校验 -输入时的实时校验 -输入框失去焦点后的校验 + + -点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。 + 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。 @@ -121,8 +121,8 @@ ### 输入框宽度 -正确示例 -错误示例 +正确示例 +错误示例 当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。 @@ -130,23 +130,21 @@ ### 对齐方式 -间隔示例 - 无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
    -右对齐（推荐） +右对齐（推荐） 右对齐（推荐）。 -- 优点：减少垂直空间。 +- 优点：节约垂直空间。 - 缺点：降低可读性；标签长度和输入框弹性小。 - 场景：既要减少垂直空间，又要加快填写速度。
    -顶部对齐 +顶部对齐 顶部对齐。 @@ -156,10 +154,10 @@
    -左对齐 +左对齐 左对齐。 -- 优点：容易浏览；减少垂直空间。 +- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。 - 缺点：填写速度慢；标签长度和输入框弹性小。 - 场景：希望用户放慢速度，仔细思考表单中的每个输入框。 diff --git a/docs/pattern/index.md b/docs/pattern/index.md index 35a6a74c77..4f064c76e9 100644 --- a/docs/pattern/index.md +++ b/docs/pattern/index.md @@ -6,4 +6,4 @@ --- -占位。 +敬请期待。 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 216a703cea..068e32bf29 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -17,14 +17,10 @@ ### 显示详情信息 -气泡显示示例 +气泡显示示例 气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。 -使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。 - -使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。 -
    列表嵌入示例1 @@ -37,43 +33,43 @@
    - +弹出层显示示例 弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
    - +双面板选择器示例 双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
    - +单窗口深入示例 单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。 ### 显示更多文本 - +宽行示例 宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
    - +对等网格示例 对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。 ### 显示图片 - +走马灯示例 走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
    - +缩略图网格示例 缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。 @@ -85,7 +81,7 @@
    - + 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 5d663e96c0..83a41c4209 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -44,7 +44,7 @@ --- - +结构示例 导航的结构由以下几部分组成。 @@ -53,8 +53,7 @@ 3. 登陆工具 4. 面包屑（可选） -> 注： -> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时； +> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。 > 2. 面包屑可以分为这几类： > - 路径型：是一个动态显示用户到达页面经过的途径。 > - 位置型：位置型是固定的，显示了页面在网站结构中的位置。 @@ -64,7 +63,9 @@ 一级类目 -多级类目展开 +二级类目 + +三级类目及以上 我们定义了不同类目层级所对应的导航样式。 @@ -73,19 +74,19 @@ --- -顶部导航结构 +结构示例 结构如右图所示： -1. 产品 Logo 和名称。 -2. 业务类目。 -3. 登陆工具。 -4. 面包屑（可选）。 +1. 产品 Logo 和名称 +2. 业务类目 +3. 登陆工具 +4. 面包屑（可选）
    二级类目 -四级类目 +三级类目及以上 不同类目层级。 diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 56c3906013..3af1d5a089 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -9,21 +9,21 @@ ## 内容 - +结构示例 通常表格的组成元素以及相关元素会有，这几部分组成。 1. 按钮组 2. 搜索条件 -3. 筛选 -4. 排序 +3. 排序 +4. 筛选 5. 状态点 6. 单行操作 7. 分页器／无限加载（可选） ### 筛选 - +筛选示例 当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。 @@ -35,7 +35,7 @@ ### 更多操作 -依次分别为：完整内容、暂时不可用、没有该权限。 +更多操作示例 该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。 @@ -43,10 +43,10 @@ 名称跳转示例 -把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 +把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 - 优点：节省空间； -- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况 +- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
    @@ -69,11 +69,11 @@ ### 全选数据 - +状态一 - +点击 Table 顶部的复选框，出现『Alert』 - +点击『选择全部』 当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。 @@ -93,33 +93,33 @@ ### 固定按钮组 -顶部固定按钮 +顶部固定示例 -底部固定按钮 +底部固定示例 -用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 +用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 ### 某一项内容过长 - +气泡显示示例 某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。 ### 模块编辑 - +模块编辑示例 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。 ### 直接编辑 - +直接编辑示例 适用在易编辑性高于易读性时。 ### 悬浮层编辑 - +悬浮层编辑示例 悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。 @@ -149,7 +149,7 @@ ### 对齐方式 - +对齐示例 数值右对齐（带小数则按小数点对齐），其余左对齐。 diff --git a/docs/practice/cases.md b/docs/practice/cases.md index bdfe7cc795..bdb1086f6d 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -7,7 +7,7 @@ Ant Design 是面向中后台的 UI 设计语言。 -从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。 +从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。 ## 最佳实践 @@ -19,7 +19,7 @@ Ant Design 是面向中后台的 UI 设计语言。 -是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 +金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 立即访问 @@ -31,7 +31,9 @@ Ant Design 是面向中后台的 UI 设计语言。 -OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 +OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 + +立即访问 --- @@ -43,7 +45,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce -体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 +体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。 + +立即访问 --- @@ -53,7 +57,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce -AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 +AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。 + +立即访问 + + diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 5066c080a8..cb91b7e4ef 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 ## 第一个例子 -最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。 +最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。 - [antd JSFiddle](http://jsfiddle.net/0dso5y0x/) diff --git a/docs/react/introduce.md b/docs/react/introduce.md index 82aacb4976..8e7dcbfc37 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -27,7 +27,7 @@ ## 特性 -- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。 +- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。 - [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。 - 基于 npm + webpack + babel 的工作流，支持 ES2015。 diff --git a/docs/resource/download.md b/docs/resource/download.md index 600de1fc78..2f89c6047f 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -8,7 +8,7 @@ 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。 - + Axure Components 一套强大的 Ant Design 的 Axure 部件库 @@ -22,7 +22,7 @@ - + Axure Box 强大的 Ant Design 组件拼装方式 @@ -38,16 +38,19 @@