From f847c23c46c16deb11c2723bb0ff08cd74972b6f Mon Sep 17 00:00:00 2001 From: Cam Song Date: Wed, 23 Dec 2015 18:07:31 +0800 Subject: [PATCH 001/633] Fix a typo in tooltip demo --- components/tooltip/demo/placement.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md index 701b4ed82f..d85a63c527 100644 --- a/components/tooltip/demo/placement.md +++ b/components/tooltip/demo/placement.md @@ -28,7 +28,7 @@ ReactDOM.render( 左上 - 左下 + 左边 左下 From d7e4578b89f4df162073960b1a391fa5ca5bf7bf Mon Sep 17 00:00:00 2001 From: yiminghe Date: Mon, 28 Dec 2015 15:42:16 +0800 Subject: [PATCH 002/633] fix pageSize --- components/table/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 77fd818f96..aa0afc575c 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -431,12 +431,13 @@ let AntTable = React.createClass({ 'mini': this.props.size === 'middle' || this.props.size === 'small', }); let total = this.state.pagination.total || this.getLocalData().length; + const pageSize = this.state.pagination.pageSize; return (total > 0) ? : null; }, From 43caba2067700541a7ec95dd3dca07eceb483674 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 16:10:53 +0800 Subject: [PATCH 003/633] update doc --- docs/upgrade-notes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrade-notes.md b/docs/upgrade-notes.md index d039b5e25a..66d8fa9704 100644 --- a/docs/upgrade-notes.md +++ b/docs/upgrade-notes.md @@ -46,7 +46,7 @@ import 'antd/style/index.less'; 如果无法理解受控组件，只须在发现在选中日期后 `Datepicker` 显示的值不变的情况后，把其 `value` 属性改为 `defaultValue` 即可。 -## 其他 +### 其他 - Alert 组件默认不展示样式，可以用 `showIcon` 属性添加图标。 - 在 `0.10.x` 中 Datepicker 已废弃的 `onSelect` 属性被删除，请使用 `onChange` 属性。。 From 32a93ee88a8d97fbf066ec54b99032ea864a9359 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 17:40:55 +0800 Subject: [PATCH 004/633] Fix iconfont side-cutting bug in Chrome --- style/components/alert.less | 1 + style/components/message.less | 1 + style/mixins/iconfont.less | 1 - 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/style/components/alert.less b/style/components/alert.less index d50f43b393..4530fbfcc8 100644 --- a/style/components/alert.less +++ b/style/components/alert.less @@ -16,6 +16,7 @@ margin-right: 8px; font-size: 14px; top: 1px; + position: relative; } &-description { diff --git a/style/components/message.less b/style/components/message.less index 522eceb526..ba15f0741e 100644 --- a/style/components/message.less +++ b/style/components/message.less @@ -46,5 +46,6 @@ margin-right: 8px; font-size: 14px; top: 1px; + position: relative; } } diff --git a/style/mixins/iconfont.less b/style/mixins/iconfont.less index f2e35cb068..4c2478eced 100644 --- a/style/mixins/iconfont.less +++ b/style/mixins/iconfont.less @@ -1,5 +1,4 @@ .iconfont-mixin() { - position: relative; display: inline-block; font-style: normal; vertical-align: baseline; From 7fd451ee46231696fc6ca5538831400614adf667 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 18:05:14 +0800 Subject: [PATCH 005/633] fix #762 --- style/components/form.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style/components/form.less b/style/components/form.less index eda5525743..5fb75dc1c3 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -206,7 +206,6 @@ form { border-radius: @border-radius-base; } .ant-search-btn { - .btn; .btn-default; border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0; margin-left: -30px; @@ -218,6 +217,10 @@ form { &:hover { border-color: @border-color-base; } + form & { + padding-top: 6px; + padding-bottom: 6px; + } } &&-focus .ant-search-btn-noempty, &:hover .ant-search-btn-noempty { From 35ef2b0b2d4d9b3ea0b179aff801d528c73e6c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:16:02 +0800 Subject: [PATCH 006/633] add tree-select --- components/tree-select/demo/basic.md | 55 ++++++++++++++ components/tree-select/demo/enhance.md | 99 ++++++++++++++++++++++++++ components/tree-select/index.jsx | 57 +++++++++++++++ components/tree-select/index.md | 28 ++++++++ index.js | 1 + package.json | 3 +- 6 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 components/tree-select/demo/basic.md create mode 100644 components/tree-select/demo/enhance.md create mode 100644 components/tree-select/index.jsx create mode 100644 components/tree-select/index.md diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md new file mode 100644 index 0000000000..211f7b4cf8 --- /dev/null +++ b/components/tree-select/demo/basic.md @@ -0,0 +1,55 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const Demo = React.createClass({ + getInitialState() { + return { + value: '1', + }; + }, + onChange(e) { + let value; + if (e.target) { + value = e.target.value; + } else { + value = e; + } + this.setState({value}); + }, + render() { + return ( +
+

Single Select

+ + + + + + + + sss} /> + + + +
+ ); + }, +}); + +ReactDOM.render( + +, document.getElementById('components-tree-select-demo-basic')); +```` diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md new file mode 100644 index 0000000000..f6a3096996 --- /dev/null +++ b/components/tree-select/demo/enhance.md @@ -0,0 +1,99 @@ +# 更多功能 + +- order: 1 + +更多功能。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const x = 5; +const y = 3; +const z = 2; +const gData = []; +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key: key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const __level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(__level, key, tns[index].children); + }); +}; +generateData(z); + +const Demo = React.createClass({ + getInitialState() { + return { + value: [], + }; + }, + onDeselect(selectedValue) { + console.log('onDeselect', selectedValue); + const newVal = [...this.state.value]; + newVal.splice(newVal.indexOf(selectedValue), 1); + this.setState({ + value: newVal, + }); + }, + onSelect(selectedKey, node, selectedKeys) { + console.log('selected: ', selectedKey, selectedKeys); + this.setState({ + value: selectedKeys, + }); + }, + onCheck(checkedKey, node, checkedKeys) { + console.log('onCheck:', checkedKey); + this.setState({ + value: checkedKeys, + }); + }, + render() { + const loop = data => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + }; + const treeProps = { + showIcon: false, + showLine: true, + checkable: true, + defaultCheckedKeys: this.state.value, + defaultSelectedKeys: this.state.value, + // selectedKeys: this.state.value, + // checkedKeys: this.state.value, + // onCheck: this.onCheck, + }; + return (
+

more

+ + {loop(gData)} + +
); + }, +}); + +ReactDOM.render(
+ +
+, document.getElementById('components-tree-select-demo-enhance')); +```` diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx new file mode 100644 index 0000000000..aea1760da6 --- /dev/null +++ b/components/tree-select/index.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import TreeSelect, { TreeNode } from 'rc-tree-select'; +import classNames from 'classnames'; +import assign from 'object-assign'; +import animation from '../common/openAnimation'; + +const AntTreeSelect = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-select', + transitionName: 'slide-up', + optionLabelProp: 'value', + choiceTransitionName: 'zoom', + showSearch: false, + size: 'default' + }; + }, + render() { + const props = this.props; + let { + size, className, combobox, notFoundContent + } = this.props; + + const cls = classNames({ + 'ant-select-lg': size === 'large', + 'ant-select-sm': size === 'small', + [className]: !!className, + }); + + if (combobox) { + notFoundContent = null; + } + + const treeProps = { + prefixCls: 'ant-tree', + checkable: false, + showIcon: false, + openAnimation: animation + }; + assign(treeProps, props.treeProps); + + let checkable = treeProps.checkable; + if (checkable) { + treeProps.checkable = ; + } + + return ( + + ); + } +}); + +AntTreeSelect.TreeNode = TreeNode; +export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md new file mode 100644 index 0000000000..3e4cf4e5e1 --- /dev/null +++ b/components/tree-select/index.md @@ -0,0 +1,28 @@ +# TreeSelect + +- category: Components +- chinese: 树选择控件 +- type: 表单 + +--- + +## 何时使用 + +当需要从树控件中灵活地筛选数据时 + +## API + +### Tree props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|multiple | 是否支持多选 | bool | false | +|[select-props](http://ant.design/components/select/#select-props) | the same as select props | || +|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) | + +### TreeNode props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|value | default as optionFilterProp | String | 'value' | +|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同||| diff --git a/index.js b/index.js index 0b5a8bbbbc..0b37921669 100644 --- a/index.js +++ b/index.js @@ -29,6 +29,7 @@ const antd = { Alert: require('./components/alert'), Validation: require('./components/validation'), Tree: require('./components/tree'), + TreeSelect: require('./components/tree-select'), Upload: require('./components/upload'), Badge: require('./components/badge'), Menu: require('./components/menu'), diff --git a/package.json b/package.json index e136f00b41..d81846da3c 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "rc-tabs": "~5.5.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "~0.19.0", + "rc-tree": "^0.21.2", + "rc-tree-select": "~0.2.1", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", "rc-util": "~3.0.1", From fb111e585a504b29464a37d8ef342b95e2b64e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:19:02 +0800 Subject: [PATCH 007/633] fix demo --- components/tree-select/demo/basic.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 211f7b4cf8..01b94d91e2 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -37,10 +37,10 @@ const Demo = React.createClass({ - + - - sss} /> + + sss} key="random3" /> From a55a6161eadc4a8373d7d026335936eba963a609 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 19:53:53 +0800 Subject: [PATCH 008/633] update hint style --- site/static/style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/site/static/style.css b/site/static/style.css index c9cfe60595..9652398b59 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -162,15 +162,16 @@ a.logo { } .global-hint { - float: left; color: #666; - margin-left: 80px; font-size: 12px; - padding: 4px 10px; - margin-top: 26px; - border-radius: 6px; - box-shadow: 0 0 3px #ddd; + padding: 5px 14px 6px; + margin-top: 0; + border-radius: 0 0 6px 6px; + box-shadow: 0 1px 3px #ddd; opacity: 0.8; + position: absolute; + left: 50%; + transform: translateX(-50%); } .nav { From 113c5e126421109a4b619256e90e3b326de7ed72 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 21:41:42 +0800 Subject: [PATCH 009/633] fix align of nested data table, react-component/table#25 --- package.json | 2 +- style/components/table.less | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6b88850342..fef9cfbacd 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-slider": "~3.3.0", "rc-steps": "~1.4.1", "rc-switch": "~1.3.1", - "rc-table": "~3.7.0", + "rc-table": "~3.7.1", "rc-tabs": "~5.5.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", diff --git a/style/components/table.less b/style/components/table.less index f6fa0ace0a..564e5b4877 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -285,6 +285,13 @@ &-collapsed:after { content: '+'; } + + &-expand-icon&-spaced { + visibility: hidden; + &:after { + content: '.'; + } + } } tr&-expanded-row { &, From 46092adbead42774f74f3aeec55fd4c8b8ffb7e0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Dec 2015 21:59:18 +0800 Subject: [PATCH 010/633] upgrade changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae70e002e3..ed27df459a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,13 @@ --- +## 0.11.1 `developing` + +- 修复一个 Table 无法修改 pageSize 的问题。 +- 修复一个 Table 子表格展开的对齐问题。 +- 修复一个 chrome 下部分图标左侧切边的问题。 +- 修复搜索输入框在表单下使用的样式问题。 + ## 0.11.0 `2015-12-25` - 移除默认加载的样式文件，样式现在需要独立加载。 From 476b09bf7d871fef4a6fe8c2edb69e484ba93712 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 11:03:14 +0800 Subject: [PATCH 011/633] fix selected day style in last month --- style/components/datepicker/Calendar.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less index 623d7d7247..0d21ffa757 100644 --- a/style/components/datepicker/Calendar.less +++ b/style/components/datepicker/Calendar.less @@ -179,6 +179,11 @@ color: @primary-color; } + &-last-month-cell &-date, + &-next-month-btn-day &-date { + color: #ccc; + } + &-selected-day &-date { background: @primary-color; color: #fff; @@ -211,11 +216,6 @@ border-bottom-right-radius: 4px; } - &-last-month-cell &-date, - &-next-month-btn-day &-date { - color: #bbb; - } - &-footer { padding: 0 15px; height: 38px; From 91bd7f22c086f920d2271585f2be7416de6f9b05 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 12:08:58 +0800 Subject: [PATCH 012/633] use mountNode replace the long getElementById --- components/affix/demo/basic.md | 2 +- components/affix/demo/offset.md | 2 +- components/alert/demo/basic.md | 2 +- components/alert/demo/closable.md | 2 +- components/alert/demo/close-text.md | 2 +- components/alert/demo/description.md | 2 +- components/alert/demo/icon.md | 2 +- components/alert/demo/style.md | 2 +- components/badge/demo/99plus.md | 2 +- components/badge/demo/basic.md | 2 +- components/badge/demo/change.md | 2 +- components/badge/demo/dot.md | 2 +- components/badge/demo/link.md | 2 +- components/badge/demo/no-wrapper.md | 2 +- components/badge/demo/overflow.md | 2 +- components/breadcrumb/demo/basic.md | 2 +- components/breadcrumb/demo/router.md | 2 +- components/breadcrumb/demo/separator.md | 2 +- components/breadcrumb/demo/withIcon.md | 2 +- components/button/demo/basic.md | 2 +- components/button/demo/button-group.md | 2 +- components/button/demo/disabled.md | 2 +- components/button/demo/icon.md | 2 +- components/button/demo/loading.md | 2 +- components/button/demo/shape.md | 2 +- components/button/demo/size.md | 2 +- components/calendar/demo/basic.md | 2 +- components/calendar/demo/card.md | 2 +- components/calendar/demo/custom-render.md | 2 +- components/calendar/demo/locale.md | 2 +- components/calendar/demo/notice-calendar.md | 2 +- components/carousel/demo/autoplay.md | 2 +- components/carousel/demo/basic.md | 2 +- components/carousel/demo/fade.md | 2 +- components/carousel/demo/vertical.md | 2 +- components/checkbox/demo/basic.md | 2 +- components/checkbox/demo/controller.md | 2 +- components/checkbox/demo/disable.md | 2 +- components/checkbox/demo/group.md | 2 +- components/collapse/demo/accordion.md | 2 +- components/collapse/demo/basic.md | 2 +- components/collapse/demo/mix.md | 2 +- components/date-picker/demo/basic.md | 4 +--- components/date-picker/demo/disabled-date.md | 2 +- components/date-picker/demo/disabled.md | 2 +- components/date-picker/demo/formatter.md | 2 +- components/date-picker/demo/locale.md | 2 +- components/date-picker/demo/month-picker.md | 2 +- components/date-picker/demo/range.md | 2 +- components/date-picker/demo/size.md | 2 +- components/date-picker/demo/start-end.md | 2 +- components/date-picker/demo/time.md | 2 +- components/date-picker/demo/with-time-picker.md | 2 +- components/dropdown/demo/basic.md | 2 +- components/dropdown/demo/dropdown-button.md | 2 +- components/dropdown/demo/event.md | 2 +- components/dropdown/demo/item.md | 2 +- components/dropdown/demo/trigger.md | 2 +- components/form/demo/disabled.md | 2 +- components/form/demo/form-controls.md | 2 +- components/form/demo/horizontal-form.md | 2 +- components/form/demo/inline-form.md | 2 +- components/form/demo/input-group.md | 2 +- components/form/demo/input.md | 2 +- components/form/demo/mix.md | 2 +- components/form/demo/search-input.md | 2 +- components/form/demo/validate.md | 2 +- components/icon/index.md | 6 +++--- components/input-number/demo/basic.md | 2 +- components/input-number/demo/disabled.md | 2 +- components/input-number/demo/size.md | 2 +- components/layout/demo/basic.md | 2 +- components/layout/demo/flex-align.md | 2 +- components/layout/demo/flex-order.md | 2 +- components/layout/demo/flex.md | 2 +- components/layout/demo/offset.md | 2 +- components/layout/demo/sort.md | 2 +- components/menu/demo/horizontal.md | 2 +- components/menu/demo/sider-current.md | 2 +- components/menu/demo/sider.md | 2 +- components/menu/demo/theme.md | 2 +- components/menu/demo/vertical.md | 2 +- components/message/demo/duration.md | 2 +- components/message/demo/info.md | 2 +- components/message/demo/loading.md | 2 +- components/message/demo/other.md | 2 +- components/modal/demo/async.md | 2 +- components/modal/demo/basic.md | 2 +- components/modal/demo/confirm-promise.md | 2 +- components/modal/demo/confirm.md | 2 +- components/modal/demo/footer.md | 2 +- components/modal/demo/info.md | 2 +- components/modal/demo/locale.md | 2 +- components/notification/demo/basic.md | 2 +- components/notification/demo/duration.md | 2 +- components/notification/demo/onclose.md | 2 +- components/notification/demo/with-btn.md | 2 +- components/notification/demo/with-icon.md | 2 +- components/pagination/demo/basic.md | 2 +- components/pagination/demo/changer.md | 2 +- components/pagination/demo/controlled.md | 2 +- components/pagination/demo/jump.md | 2 +- components/pagination/demo/locale.md | 2 +- components/pagination/demo/mini.md | 2 +- components/pagination/demo/more.md | 2 +- components/pagination/demo/simple.md | 2 +- components/popconfirm/demo/basic.md | 2 +- components/popconfirm/demo/dynamic-trigger.md | 2 +- components/popconfirm/demo/locale.md | 2 +- components/popconfirm/demo/placement.md | 2 +- components/popover/demo/basic.md | 2 +- components/popover/demo/control.md | 2 +- components/popover/demo/placement.md | 2 +- components/popover/demo/triggerType.md | 2 +- components/progress/demo/circle-dynamic.md | 2 +- components/progress/demo/circle-mini.md | 2 +- components/progress/demo/circle.md | 2 +- components/progress/demo/dynamic.md | 2 +- components/progress/demo/line-mini.md | 2 +- components/progress/demo/line.md | 2 +- components/queue-anim/demo/basic.md | 2 +- components/queue-anim/demo/change.md | 2 +- components/queue-anim/demo/custom.md | 2 +- components/queue-anim/demo/enter-leave.md | 2 +- components/queue-anim/demo/form.md | 2 +- components/queue-anim/demo/page.md | 2 +- components/queue-anim/demo/router.md | 2 +- components/queue-anim/demo/simple.md | 2 +- components/radio/demo/basic.md | 2 +- components/radio/demo/disable.md | 2 +- components/radio/demo/radiobutton.md | 2 +- components/radio/demo/radiogroup.md | 2 +- components/select/demo/basic.md | 2 +- components/select/demo/combobox.md | 2 +- components/select/demo/coordinate.md | 2 +- components/select/demo/multiple.md | 2 +- components/select/demo/optgroup.md | 2 +- components/select/demo/search.md | 2 +- components/select/demo/size.md | 2 +- components/select/demo/tags.md | 2 +- components/slider/demo/basic.md | 2 +- components/slider/demo/event.md | 2 +- components/slider/demo/icon-slider.md | 2 +- components/slider/demo/input-number.md | 2 +- components/slider/demo/mark.md | 2 +- components/slider/demo/tip-formatter.md | 2 +- components/spin/demo/basic.md | 2 +- components/spin/demo/inside.md | 2 +- components/spin/demo/nested.md | 2 +- components/spin/demo/size.md | 2 +- components/steps/demo/icon.md | 2 +- components/steps/demo/simple.md | 2 +- components/steps/demo/small-size.md | 2 +- components/steps/demo/status.md | 2 +- components/steps/demo/step-next.md | 2 +- components/steps/demo/vertical-small.md | 2 +- components/steps/demo/vertical.md | 2 +- components/switch/demo/basic.md | 2 +- components/switch/demo/disabled.md | 2 +- components/switch/demo/size.md | 2 +- components/switch/demo/text.md | 2 +- components/table/demo/ajax.md | 2 +- components/table/demo/basic.md | 2 +- components/table/demo/bordered.md | 2 +- components/table/demo/colspan-rowspan.md | 2 +- components/table/demo/expand.md | 2 +- components/table/demo/head.md | 2 +- components/table/demo/indent-size.md | 2 +- components/table/demo/loading.md | 2 +- components/table/demo/local-data.md | 2 +- components/table/demo/locale.md | 2 +- components/table/demo/nopagination.md | 2 +- components/table/demo/paging.md | 2 +- components/table/demo/row-selection-props.md | 2 +- components/table/demo/row-selection-radio-props.md | 2 +- components/table/demo/row-selection.md | 2 +- components/table/demo/size.md | 2 +- components/tabs/demo/basic.md | 2 +- components/tabs/demo/card-top.md | 2 +- components/tabs/demo/card.md | 2 +- components/tabs/demo/disabled.md | 2 +- components/tabs/demo/editable-card.md | 2 +- components/tabs/demo/extra.md | 2 +- components/tabs/demo/icon.md | 2 +- components/tabs/demo/position.md | 2 +- components/tabs/demo/size.md | 2 +- components/tabs/demo/slide.md | 2 +- components/tag/demo/basic.md | 2 +- components/tag/demo/colorful.md | 2 +- components/time-picker/demo/basic.md | 2 +- components/time-picker/demo/disable-options.md | 2 +- components/time-picker/demo/disabled.md | 2 +- components/time-picker/demo/hide-options.md | 2 +- components/time-picker/demo/size.md | 2 +- components/time-picker/demo/value.md | 2 +- components/time-picker/demo/without-seconds.md | 2 +- components/timeline/demo/basic.md | 2 +- components/timeline/demo/color.md | 2 +- components/timeline/demo/pending.md | 2 +- components/tooltip/demo/basic.md | 2 +- components/tooltip/demo/placement.md | 2 +- components/transfer/demo/advanced.md | 2 +- components/transfer/demo/basic.md | 2 +- components/transfer/demo/search.md | 2 +- components/tree/demo/basic.md | 2 +- components/tree/demo/checkbox.md | 2 +- components/tree/demo/dynamic.md | 2 +- components/tree/demo/special.md | 2 +- components/upload/demo/basic.md | 2 +- components/upload/demo/beforeUpload.md | 2 +- components/upload/demo/defaultFileList.md | 2 +- components/upload/demo/drag-simple.md | 2 +- components/upload/demo/drag.md | 2 +- components/upload/demo/fileList.md | 2 +- components/upload/demo/multiple.md | 2 +- components/upload/demo/picture-style.md | 2 +- components/validation/demo/basic.md | 2 +- components/validation/demo/customize.md | 2 +- components/validation/demo/other-items.md | 2 +- package.json | 2 +- site/templates/code.html | 1 + 221 files changed, 223 insertions(+), 224 deletions(-) diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index 39b91c3cd2..7d0c6a5233 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -13,5 +13,5 @@ ReactDOM.render( -, document.getElementById('components-affix-demo-basic')); +, mountNode); ```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md index 30b5be7a27..561c070ab1 100644 --- a/components/affix/demo/offset.md +++ b/components/affix/demo/offset.md @@ -13,5 +13,5 @@ ReactDOM.render( -, document.getElementById('components-affix-demo-offset')); +, mountNode); ```` diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index 62cb48e209..f0e8d32132 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -10,5 +10,5 @@ import { Alert } from 'antd'; ReactDOM.render( -, document.getElementById('components-alert-demo-basic')); +, mountNode); ```` diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md index 619ec2e9a0..26ecf34f4d 100644 --- a/components/alert/demo/closable.md +++ b/components/alert/demo/closable.md @@ -23,5 +23,5 @@ ReactDOM.render(
type="error" closable onClose={onClose} /> -
, document.getElementById('components-alert-demo-closable')); +, mountNode); ```` diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md index 98979b5b3b..dc60483b69 100644 --- a/components/alert/demo/close-text.md +++ b/components/alert/demo/close-text.md @@ -11,5 +11,5 @@ import { Alert } from 'antd'; ReactDOM.render( -, document.getElementById('components-alert-demo-close-text')); +, mountNode); ```` diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md index d477136ff3..80d17dffe7 100644 --- a/components/alert/demo/description.md +++ b/components/alert/demo/description.md @@ -24,5 +24,5 @@ ReactDOM.render(
message="错误提示的文案" description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍" type="error" /> -
, document.getElementById('components-alert-demo-description')); +, mountNode); ```` diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index 62fded5324..e743140f46 100644 --- a/components/alert/demo/icon.md +++ b/components/alert/demo/icon.md @@ -32,5 +32,5 @@ ReactDOM.render(
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍" type="error" showIcon /> -
, document.getElementById('components-alert-demo-icon')); +, mountNode); ```` diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index 708bbacd38..b5400b716d 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -15,5 +15,5 @@ ReactDOM.render(
, -document.getElementById('components-alert-demo-style')); +mountNode); ```` diff --git a/components/badge/demo/99plus.md b/components/badge/demo/99plus.md index 9e00bb1c8a..483ca77342 100644 --- a/components/badge/demo/99plus.md +++ b/components/badge/demo/99plus.md @@ -16,5 +16,5 @@ ReactDOM.render(
-
, document.getElementById('components-badge-demo-99plus')); +, mountNode); ```` diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md index f1ab0ac7b3..4e4de952d5 100644 --- a/components/badge/demo/basic.md +++ b/components/badge/demo/basic.md @@ -13,7 +13,7 @@ ReactDOM.render( -, document.getElementById('components-badge-demo-basic')); +, mountNode); ```` ````css diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md index 59b7b9878e..67e4105f73 100644 --- a/components/badge/demo/change.md +++ b/components/badge/demo/change.md @@ -69,5 +69,5 @@ const Test = React.createClass({ ReactDOM.render( -, document.getElementById('components-badge-demo-change')); +, mountNode); ```` diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md index 22c26a6154..797408fa31 100644 --- a/components/badge/demo/dot.md +++ b/components/badge/demo/dot.md @@ -16,7 +16,7 @@ ReactDOM.render(, document.getElementById('components-badge-demo-dot')); +, mountNode); ```` diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index 58ec4a1b6f..ac6d80f49a 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -20,5 +20,5 @@ ReactDOM.render( 选项卡二内容 选项卡三内容 -, document.getElementById('components-tabs-demo-basic')); +, mountNode); ```` diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index 277fd7a008..8edfc25055 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -17,7 +17,7 @@ ReactDOM.render( 选项卡二内容 选项卡三内容 -, document.getElementById('components-tabs-demo-card-top')); +, mountNode); ```` ````css diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index ad9c4af2be..f160ba920c 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -20,5 +20,5 @@ ReactDOM.render( 选项卡二内容 选项卡三内容 -, document.getElementById('components-tabs-demo-card')); +, mountNode); ```` diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md index d3044c1b58..78b3dd3a8a 100644 --- a/components/tabs/demo/disabled.md +++ b/components/tabs/demo/disabled.md @@ -16,5 +16,5 @@ ReactDOM.render( 选项卡二 选项卡三 -, document.getElementById('components-tabs-demo-disabled')); +, mountNode); ```` diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index bce6741524..36e42d4635 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -53,6 +53,6 @@ const Demo = React.createClass({ } }); -ReactDOM.render(, document.getElementById('components-tabs-demo-editable-card')); +ReactDOM.render(, mountNode); ```` diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md index d2ed14e7e7..a8472da137 100644 --- a/components/tabs/demo/extra.md +++ b/components/tabs/demo/extra.md @@ -17,5 +17,5 @@ ReactDOM.render( 选项卡一内容 选项卡二内容 选项卡三内容 -, document.getElementById('components-tabs-demo-extra')); +, mountNode); ```` diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 2d14a86119..bf5a004f4e 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -22,5 +22,5 @@ ReactDOM.render( 选项卡二 选项卡三 -, document.getElementById('components-tabs-demo-icon')); +, mountNode); ```` diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md index cf72b921dd..dd2543c9ac 100644 --- a/components/tabs/demo/position.md +++ b/components/tabs/demo/position.md @@ -41,5 +41,5 @@ const Demo = React.createClass({ } }); -ReactDOM.render(, document.getElementById('components-tabs-demo-position')); +ReactDOM.render(, mountNode); ```` diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index 97c0aca627..6ddc221c20 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -16,6 +16,6 @@ ReactDOM.render( 选项卡二内容 选项卡三内容 -, document.getElementById('components-tabs-demo-size')); +, mountNode); ```` diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md index c60cc0f8d1..fd411a282a 100644 --- a/components/tabs/demo/slide.md +++ b/components/tabs/demo/slide.md @@ -22,5 +22,5 @@ ReactDOM.render( 选项卡八 选项卡九 -, document.getElementById('components-tabs-demo-slide')); +, mountNode); ```` diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index 90c639faab..aec4cb6067 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -18,5 +18,5 @@ ReactDOM.render(
标签二 标签三 标签四（链接） -
, document.getElementById('components-tag-demo-basic')); +, mountNode); ```` diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index 4efa1850d0..37f622ada5 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -14,6 +14,6 @@ ReactDOM.render(
绿色 黄色 红色 -
, document.getElementById('components-tag-demo-colorful')); +, mountNode); ```` diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md index 6d4493d8f2..5444e7e838 100644 --- a/components/time-picker/demo/basic.md +++ b/components/time-picker/demo/basic.md @@ -17,5 +17,5 @@ function onChange(time) { ReactDOM.render( -, document.getElementById('components-time-picker-demo-basic')); +, mountNode); ```` diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md index a2d0f63655..3a70db56a6 100644 --- a/components/time-picker/demo/disable-options.md +++ b/components/time-picker/demo/disable-options.md @@ -35,5 +35,5 @@ function disabledMinutes(h) { ReactDOM.render( -, document.getElementById('components-time-picker-demo-disable-options')); +, mountNode); ```` diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 0ac3377c26..62755f0383 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -11,5 +11,5 @@ import { TimePicker } from 'antd'; ReactDOM.render( -, document.getElementById('components-time-picker-demo-disabled')); +, mountNode); ```` diff --git a/components/time-picker/demo/hide-options.md b/components/time-picker/demo/hide-options.md index 78b1e6600a..4762eda4ad 100644 --- a/components/time-picker/demo/hide-options.md +++ b/components/time-picker/demo/hide-options.md @@ -27,5 +27,5 @@ function disabledSeconds() { ReactDOM.render( -, document.getElementById('components-time-picker-demo-hide-options')); +, mountNode); ```` diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 4f7c63148f..c0cde71eca 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -15,5 +15,5 @@ ReactDOM.render( -, document.getElementById('components-time-picker-demo-size')); +, mountNode); ```` diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md index 6ceec1dc93..d5bdb41ead 100644 --- a/components/time-picker/demo/value.md +++ b/components/time-picker/demo/value.md @@ -27,5 +27,5 @@ const Test = React.createClass({ } }); -ReactDOM.render(, document.getElementById('components-time-picker-demo-value')); +ReactDOM.render(, mountNode); ```` diff --git a/components/time-picker/demo/without-seconds.md b/components/time-picker/demo/without-seconds.md index bc0992bf16..4ae8340d72 100644 --- a/components/time-picker/demo/without-seconds.md +++ b/components/time-picker/demo/without-seconds.md @@ -11,5 +11,5 @@ import { TimePicker } from 'antd'; ReactDOM.render( -, document.getElementById('components-time-picker-demo-without-seconds')); +, mountNode); ```` diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md index 3049cc67ff..ef660e8978 100644 --- a/components/timeline/demo/basic.md +++ b/components/timeline/demo/basic.md @@ -16,5 +16,5 @@ ReactDOM.render( 技术测试异常 2015-09-01 网络异常正在修复 2015-09-01 -, document.getElementById('components-timeline-demo-basic')); +, mountNode); ```` diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md index 3976405b24..9435e42e34 100644 --- a/components/timeline/demo/color.md +++ b/components/timeline/demo/color.md @@ -24,5 +24,5 @@ ReactDOM.render(

技术测试异常3 2015-09-01

-, document.getElementById('components-timeline-demo-color')); +, mountNode); ```` diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md index e59cf2be44..a373023a73 100644 --- a/components/timeline/demo/pending.md +++ b/components/timeline/demo/pending.md @@ -15,5 +15,5 @@ ReactDOM.render( 初步排除网络异常 2015-09-01 技术测试异常 2015-09-01 -, document.getElementById('components-timeline-demo-pending')); +, mountNode); ```` diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md index 6defa87922..eac4e7756a 100644 --- a/components/tooltip/demo/basic.md +++ b/components/tooltip/demo/basic.md @@ -13,6 +13,6 @@ ReactDOM.render( 鼠标移上来就会出现提示 -, document.getElementById('components-tooltip-demo-basic')); +, mountNode); ```` diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md index d85a63c527..99c5743d9f 100644 --- a/components/tooltip/demo/placement.md +++ b/components/tooltip/demo/placement.md @@ -57,7 +57,7 @@ ReactDOM.render( -, document.getElementById('components-tooltip-demo-placement')); +, mountNode); ```` - - diff --git a/docs/install_en.md b/docs/install_en.md index f9f1a1d687..a0a9851c41 100644 --- a/docs/install_en.md +++ b/docs/install_en.md @@ -5,7 +5,7 @@ If using npm to install, you could use `import` or `require`. -Stable version ： +Stable version： [![npm package](http://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) @@ -13,7 +13,7 @@ Stable version ： $ npm install antd --save ``` -Beta version ： +Beta version： [![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd) @@ -24,7 +24,7 @@ $ npm install antd@beta --save > **Past releases**：https://github.com/ant-design/ant-design/releases -## Development tool +## Development tool We provide React components [Scaffold tool](https://github.com/ant-design/antd-init). @@ -35,25 +35,3 @@ $ npm install antd-init -g Inside an empty folder run `antd-init` to init. > [More tools](https://github.com/ant-tool/xtool/)。 - - - - diff --git a/package.json b/package.json index 66493f82d8..d50b873ba4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { "name": "antd", "version": "0.11.0", - "stableVersion": "0.11.0", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", diff --git a/site/templates/layout.html b/site/templates/layout.html index 329eac1568..7f97491e78 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -41,8 +41,7 @@ @@ -70,7 +69,7 @@
  • 设计
    • -
  • +
  • React UI
  • From 4be5e25d68471fbefd1b0e11cfd8f7eee421ef33 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 16:21:18 +0800 Subject: [PATCH 021/633] Add scripts site --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index d50b873ba4..ebfc43593a 100644 --- a/package.json +++ b/package.json @@ -114,8 +114,9 @@ "babel": "babel components index.js --out-dir lib", "start": "npm run clean && nico server --watch", "clean": "rm -rf _site dist", + "site": "npm run clean && webpack --config webpack.deploy.config.js && webpack --config webpack.antd.config.js && NODE_ENV=PRODUCTION nico build", "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy", - "just-deploy": "npm run clean && webpack --config webpack.deploy.config.js && webpack --config webpack.antd.config.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js", + "just-deploy": "npm run site && node scripts/deploy.js", "lint": "eslint components test index.js --ext '.js,.jsx' && npm run mdlint && npm run lesshint", "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0'", "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'", From 0ee47a3538245ccf211fe533e22eb01c3e82c5ae Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 29 Dec 2015 17:34:42 +0800 Subject: [PATCH 022/633] bump 0.11.1 --- CHANGELOG.md | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f613f3d4fa..f5906507ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,12 +4,12 @@ --- -## 0.11.1 `developing` +## 0.11.1 `2015-12-29` - 修复一个 Table 无法修改 pageSize 的问题。 - 修复一个 Table 子表格展开的对齐问题。 -- 修复一个 chrome 下部分图标左侧切边的问题。 -- 修复搜索输入框在表单下使用的样式问题。 +- 修复一个 Chrome 下部分图标左侧切边的问题。 +- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762) ## 0.11.0 `2015-12-28` diff --git a/package.json b/package.json index ebfc43593a..d77e834239 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.11.0", + "version": "0.11.1", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 16d6ec150dc20cd63adcaa2bb05b533ff521b63a Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 29 Dec 2015 20:38:31 +0800 Subject: [PATCH 023/633] up deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ebfc43593a..9e00194be9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.11.0", + "version": "0.12.0-alpha1", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", @@ -56,7 +56,7 @@ "rc-steps": "~1.4.1", "rc-switch": "~1.3.1", "rc-table": "~3.7.1", - "rc-tabs": "~5.5.0", + "rc-tabs": "~5.6.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", "rc-tree": "~0.19.0", From 98b899d0cc12f402edf3ff6c34de6569ee4c6ebb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 22:40:09 +0800 Subject: [PATCH 024/633] timePicker en-US, ref #771 --- components/date-picker/locale/en_US.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/date-picker/locale/en_US.js b/components/date-picker/locale/en_US.js index cb67d925d1..aff512e58b 100644 --- a/components/date-picker/locale/en_US.js +++ b/components/date-picker/locale/en_US.js @@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US'; // 统一合并为完整的 Locale let locale = objectAssign({}, GregorianCalendarLocale); locale.lang = objectAssign({ - placeholder: 'Select a date' + placeholder: 'Select date', + timePlaceholder: 'Select time', }, CalendarLocale); // All settings at: From 6d4c4e12d133242964687495d963bbd25bc50689 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 23:39:21 +0800 Subject: [PATCH 025/633] Add advanced search form demo --- components/form/demo/advanced-search-form.md | 121 +++++++++++++++++++ components/form/index.md | 6 + site/static/tomorrow.css | 2 + 3 files changed, 129 insertions(+) create mode 100644 components/form/demo/advanced-search-form.md diff --git a/components/form/demo/advanced-search-form.md b/components/form/demo/advanced-search-form.md new file mode 100644 index 0000000000..6836cd43ab --- /dev/null +++ b/components/form/demo/advanced-search-form.md @@ -0,0 +1,121 @@ +# 高级搜索 + +- order: 10 + +三列栅格式的表单排列方式，常用于数据表格的高级搜索。 + +有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。 + +--- + +````jsx +import { Form, Input, Row, Col, Button } from 'antd'; +const FormItem = Form.Item; + +ReactDOM.render( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +, mountNode); +```` + +````css +/* 定制样式 */ + +.advanced-search-form { + padding: 16px 8px; + background: #FBFBFB; + border: 1px solid #d9d9d9; + border-radius: 6px; +} + +/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */ +.advanced-search-form > .row { + margin-left: -10px; +} + +.advanced-search-form > .row > .col-8 { + padding: 0 8px; +} + +.advanced-search-form .ant-form-item { + margin-bottom: 16px; +} + +.advanced-search-form .ant-btn + .ant-btn { + margin-left: 8px; +} +```` + + diff --git a/components/form/index.md b/components/form/index.md index 8cbdab87d9..234713a52d 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -3,6 +3,7 @@ - category: Components - chinese: 表单 - type: 表单 +- cols: 1 --- @@ -86,3 +87,8 @@ Mixin：当表单控件的输入值改变时，更新 formData。 ``` + diff --git a/site/static/tomorrow.css b/site/static/tomorrow.css index 9026804c27..1c6cbceb88 100644 --- a/site/static/tomorrow.css +++ b/site/static/tomorrow.css @@ -41,6 +41,7 @@ code { color: #888; font-size: 90%; border: 1px solid #e9e9e9; + white-space: nowrap; } pre code { @@ -53,4 +54,5 @@ pre code { padding: 10px 15px; border-radius: 6px; font-size: 14px; + white-space: pre; } From e44faf9d4812f4a7c804c757739f2dd8a14c946b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 23:43:10 +0800 Subject: [PATCH 026/633] fix demo style --- components/form/demo/advanced-search-form.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/demo/advanced-search-form.md b/components/form/demo/advanced-search-form.md index 6836cd43ab..2c2b58c686 100644 --- a/components/form/demo/advanced-search-form.md +++ b/components/form/demo/advanced-search-form.md @@ -91,7 +91,7 @@ ReactDOM.render( .advanced-search-form { padding: 16px 8px; - background: #FBFBFB; + background: #f8f8f8; border: 1px solid #d9d9d9; border-radius: 6px; } @@ -115,7 +115,7 @@ ReactDOM.render( ```` From 88a22815b8ac5f89c08adbf0c39d39e788abcf9c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 01:12:15 +0800 Subject: [PATCH 027/633] update site code style --- site/static/style.css | 12 ++---------- site/static/tomorrow.css | 7 +++---- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/site/static/style.css b/site/static/style.css index 9652398b59..1f7c4dfcc3 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -556,13 +556,6 @@ footer ul li > a { margin: 20px 0; } -.markdown code, -.markdown kbd, -.markdown pre, -.markdown samp { - font-family: Consolas, monospace; -} - .markdown p, .markdown pre { margin: 1.2em 0; @@ -590,14 +583,13 @@ footer ul li > a { } .markdown pre { - background: #F7F7F7; border-radius: 6px; } .markdown pre code { - background: #F7F7F7; border: none; - padding: 12px 20px; + padding: 1em 2em; + background: #f9f9f9; margin: 0; } diff --git a/site/static/tomorrow.css b/site/static/tomorrow.css index 1c6cbceb88..585bc4608a 100644 --- a/site/static/tomorrow.css +++ b/site/static/tomorrow.css @@ -35,11 +35,11 @@ } code { - background: #f6f6f6; + background: #f7f7f7; padding: 1px 6px; border-radius: 3px; color: #888; - font-size: 90%; + font-size: 0.8rem; border: 1px solid #e9e9e9; white-space: nowrap; } @@ -48,11 +48,10 @@ pre code { display: block; background: white; color: #666; - font-family: Consolas, monospace; line-height: 1.5; border: 1px solid #e9e9e9; padding: 10px 15px; border-radius: 6px; - font-size: 14px; + font-size: 0.9rem; white-space: pre; } From cf38545e2c0c1453e88943158a6d652f187f69ba Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 13:59:51 +0800 Subject: [PATCH 028/633] update react family version --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d77e834239..fb87c352fe 100644 --- a/package.json +++ b/package.json @@ -99,10 +99,10 @@ "lodash": "^3.10.0", "nico-jsx": "~0.7.0", "pre-commit": "1.x", - "react": "~0.14.2", - "react-addons-test-utils": "~0.14.2", + "react": "~0.14.5", + "react-addons-test-utils": "~0.14.5", "react-copy-to-clipboard": "^3.0.4", - "react-dom": "~0.14.2", + "react-dom": "~0.14.5", "react-router": "~1.0.3", "react-stateless-wrapper": "~1.0.2", "reqwest": "~2.0.5", From 97993b3bed5ed706bab0cc162bf5a4af79504f07 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 15:19:31 +0800 Subject: [PATCH 029/633] update jsfiddle examples --- docs/getting-started.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 44a2c7d95e..f1bf6ccde5 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -9,9 +9,9 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 ## 第一个例子 -最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 Bug Report, 注意不要在实际项目中这样使用。 +最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。 -- [antd JSFiddle](http://jsfiddle.net/yiminghe/9zrstuto/1/) +- [antd JSFiddle](http://jsfiddle.net/9zrstuto/70/) ## 标准开发 From 564c425ad70212032c1e9d665e612886baafea01 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 29 Dec 2015 20:38:31 +0800 Subject: [PATCH 030/633] up deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fb87c352fe..21840cef69 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.11.1", + "version": "0.12.0-alpha1", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", @@ -56,7 +56,7 @@ "rc-steps": "~1.4.1", "rc-switch": "~1.3.1", "rc-table": "~3.7.1", - "rc-tabs": "~5.5.0", + "rc-tabs": "~5.6.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", "rc-tree": "~0.19.0", From 20ce55933ebf29ac57c7f31f4f808b942f2d3b0c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 11:46:13 +0800 Subject: [PATCH 031/633] Add cascade --- components/cascader/demo/basic.md | 43 ++++++++++++ components/cascader/demo/custom-trigger.md | 53 ++++++++++++++ components/cascader/demo/hover.md | 49 +++++++++++++ components/cascader/index.jsx | 53 ++++++++++++++ components/cascader/index.md | 15 ++++ index.js | 1 + package.json | 2 + style/components/cascader.less | 80 ++++++++++++++++++++++ style/components/index.less | 1 + 9 files changed, 297 insertions(+) create mode 100644 components/cascader/demo/basic.md create mode 100644 components/cascader/demo/custom-trigger.md create mode 100644 components/cascader/demo/hover.md create mode 100644 components/cascader/index.jsx create mode 100644 components/cascader/index.md create mode 100644 style/components/cascader.less diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md new file mode 100644 index 0000000000..fd2f89066c --- /dev/null +++ b/components/cascader/demo/basic.md @@ -0,0 +1,43 @@ +# 基本 + +- order: 0 + +省市级联。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md new file mode 100644 index 0000000000..ddc07c01a1 --- /dev/null +++ b/components/cascader/demo/custom-trigger.md @@ -0,0 +1,53 @@ +# 可以自定义显示 + +- order: 1 + +切换按钮和结果分开。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + }], +}]; + +const CitySwitcher = React.createClass({ + getInitialState() { + return { + text: '未选择', + }; + }, + onChange(value, selectedOptions) { + this.setState({ + text: selectedOptions.map(o => o.label).join(', '), + }); + }, + render() { + return ( + + {this.state.text} +   + + 切换城市 + + + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md new file mode 100644 index 0000000000..f9e51caa30 --- /dev/null +++ b/components/cascader/demo/hover.md @@ -0,0 +1,49 @@ +# 移入展开 + +- order: 2 + +通过移入展开下级菜单，点击完成选择。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +// 只展示最后一项 +function displayRender(label) { + return label[label.length - 1]; +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx new file mode 100644 index 0000000000..369fc104cd --- /dev/null +++ b/components/cascader/index.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import Cascader from 'rc-cascader'; +import Input from '../input'; +import arrayTreeFilter from 'array-tree-filter'; + +class AntCascader extends React.Component { + constructor(props) { + super(props); + this.state = { + value: [], + }; + [ + 'handleChange', + 'getLabel', + ].forEach((method) => this[method] = this[method].bind(this)); + } + handleChange(value, selectedOptions) { + this.setState({ value }); + this.props.onChange(value, selectedOptions); + } + getLabel() { + const { options, displayRender } = this.props; + const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level]) + .map(o => o.label); + return displayRender(label); + } + render() { + const { prefixCls, children, placeholder, style } = this.props; + return ( + + {children || + } + + ); + } +} + +AntCascader.defaultProps = { + prefixCls: 'ant-cascader', + placeholder: '请选择', + transitionName: 'slide-up', + onChange() {}, + options: [], + displayRender(label) { + return label.join(' / '); + }, +}; + +export default AntCascader; diff --git a/components/cascader/index.md b/components/cascader/index.md new file mode 100644 index 0000000000..bab13eff65 --- /dev/null +++ b/components/cascader/index.md @@ -0,0 +1,15 @@ +# Cascader + +- category: Components +- chinese: 级联选择 +- type: 表单 + +--- + +级联选择框。 + +## 何时使用 + + +## API + diff --git a/index.js b/index.js index 0b5a8bbbbc..0e61e43f2c 100644 --- a/index.js +++ b/index.js @@ -43,6 +43,7 @@ const antd = { Calendar: require('./components/calendar'), TimePicker: require('./components/time-picker'), Transfer: require('./components/transfer'), + Cascader: require('./components/cascader'), }; antd.version = require('./package.json').version; diff --git a/package.json b/package.json index 21840cef69..a7e5f16409 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ ], "license": "MIT", "dependencies": { + "array-tree-filter": "~1.0.0", "classnames": "~2.2.0", "css-animation": "1.1.x", "gregorian-calendar": "~4.1.0", @@ -39,6 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", + "rc-cascader": "~0.3.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", diff --git a/style/components/cascader.less b/style/components/cascader.less new file mode 100644 index 0000000000..e79f6089f7 --- /dev/null +++ b/style/components/cascader.less @@ -0,0 +1,80 @@ +.ant-cascader { + font-size: @font-size-base; + &-input { + width: 172px; + display: block; + } + &-menus { + font-size: 12px; + overflow: hidden; + background: #fff; + position: absolute; + border: 1px solid @border-color-base; + border-radius: @border-radius-base; + box-shadow: @box-shadow-base; + &-hidden { + display: none; + } + &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, + &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + animation-name: antSlideUpIn; + } + + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, + &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + animation-name: antSlideDownIn; + } + + &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + animation-name: antSlideUpOut; + } + + &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + animation-name: antSlideDownOut; + } + } + &-menu { + float: left; + width: 111px; + height: 180px; + list-style: none; + margin: 0; + padding: 0; + border-right: 1px solid @border-color-split; + &:last-child { + border-right-color: transparent; + margin-right: -1px; + } + } + &-menu-item { + height: 32px; + line-height: 32px; + padding: 0 16px; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.3s ease; + &:hover { + background: tint(@primary-color, 90%); + } + &-active { + background: tint(@primary-color, 80%); + &:hover { + background: tint(@primary-color, 80%); + } + } + &-expand { + position: relative; + &:after { + content: '\e600'; + font-family: 'anticon'; + .iconfont-size-under-12px(8px); + color: #999; + position: absolute; + right: 15px; + line-height: 32px; + } + } + } +} diff --git a/style/components/index.less b/style/components/index.less index 0048394171..ed1ad82834 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -38,3 +38,4 @@ @import "calendar"; @import "timepicker"; @import "transfer"; +@import "cascader"; From a1743d7e58015264023fe7fe4c1ee0adce4d0504 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:24:21 +0800 Subject: [PATCH 032/633] update cascader document --- components/cascader/demo/basic.md | 2 +- components/cascader/index.md | 17 +++++++++++++++++ components/select/demo/coordinate.md | 2 ++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md index fd2f89066c..445f039f4f 100644 --- a/components/cascader/demo/basic.md +++ b/components/cascader/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -省市级联。 +省市区级联。 --- diff --git a/components/cascader/index.md b/components/cascader/index.md index bab13eff65..91648eb24a 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -8,8 +8,25 @@ 级联选择框。 + ## 何时使用 +- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 +- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。 +- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。 ## API +```html + +``` + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|--------| +| options | 可选项数据源 | object | - | +| defaultValue | 默认的选中项 | array |[] | +| value | 指定选中项 | array | - | +| onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - | +| displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` | +| style | 自定义样式 | string | - | +| popupClassName | 自定义浮层类名 | string | - | diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index 07b9e5224f..cfe89f6525 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -4,6 +4,8 @@ 省市联动是典型的例子。 +推荐使用 [cascader](/components/cascader/) 组件。 + --- ````jsx From fcba79f070233b7ec01fbc242f0c7af689855318 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:27:46 +0800 Subject: [PATCH 033/633] update cascader api --- components/cascader/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/cascader/index.md b/components/cascader/index.md index 91648eb24a..92c76c37cc 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -30,3 +30,4 @@ | displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` | | style | 自定义样式 | string | - | | popupClassName | 自定义浮层类名 | string | - | +| placeholder | 输入框占位文本 | string | '请选择' | From 5f0aecfd5e1b86194aa3d744ad4ae61ab30c9a78 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:31:48 +0800 Subject: [PATCH 034/633] Add prop size for cascader --- components/cascader/index.jsx | 10 ++++++++-- components/cascader/index.md | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 369fc104cd..775631031a 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Cascader from 'rc-cascader'; import Input from '../input'; import arrayTreeFilter from 'array-tree-filter'; +import classNames from 'classnames'; class AntCascader extends React.Component { constructor(props) { @@ -25,12 +26,16 @@ class AntCascader extends React.Component { return displayRender(label); } render() { - const { prefixCls, children, placeholder, style } = this.props; + const { prefixCls, children, placeholder, style, size } = this.props; + const sizeCls = classNames({ + 'ant-input-lg': size === 'large', + 'ant-input-sm': size === 'small', + }); return ( {children || } @@ -48,6 +53,7 @@ AntCascader.defaultProps = { displayRender(label) { return label.join(' / '); }, + size: 'default', }; export default AntCascader; diff --git a/components/cascader/index.md b/components/cascader/index.md index 92c76c37cc..4d9ce58c3f 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -31,3 +31,4 @@ | style | 自定义样式 | string | - | | popupClassName | 自定义浮层类名 | string | - | | placeholder | 输入框占位文本 | string | '请选择' | +| size | 输入框大小，可选 `large` `default` `small` | string | `default` | From aa27737d24eb169e3a2bcbe78f574e20cc2cc26f Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 21:18:27 +0800 Subject: [PATCH 035/633] Add clear icon --- components/cascader/demo/default-value.md | 43 ++++++++++++++++++ components/cascader/index.jsx | 53 +++++++++++++++++++---- package.json | 2 +- style/components/cascader.less | 26 +++++++++++ 4 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 components/cascader/demo/default-value.md diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md new file mode 100644 index 0000000000..db4ea4eee0 --- /dev/null +++ b/components/cascader/demo/default-value.md @@ -0,0 +1,43 @@ +# 默认值 + +- order: 0 + +默认值通过数组的方式指定。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 775631031a..d68271a104 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import Cascader from 'rc-cascader'; import Input from '../input'; +import Icon from '../icon'; import arrayTreeFilter from 'array-tree-filter'; import classNames from 'classnames'; @@ -8,15 +9,33 @@ class AntCascader extends React.Component { constructor(props) { super(props); this.state = { - value: [], + value: props.value || props.defaultValue || [], + popupVisible: false, }; [ 'handleChange', + 'handlePopupVisibleChange', + 'setValue', 'getLabel', + 'clearSelection', ].forEach((method) => this[method] = this[method].bind(this)); } + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ value: nextProps.value }); + } + } handleChange(value, selectedOptions) { - this.setState({ value }); + this.setValue(value, selectedOptions); + } + handlePopupVisibleChange(popupVisible) { + this.setState({ popupVisible }); + this.props.onPopupVisibleChange(popupVisible); + } + setValue(value, selectedOptions = []) { + if (!('value' in this.props)) { + this.setState({ value }); + } this.props.onChange(value, selectedOptions); } getLabel() { @@ -25,20 +44,37 @@ class AntCascader extends React.Component { .map(o => o.label); return displayRender(label); } + clearSelection(e) { + e.preventDefault(); + this.setValue([]); + this.setState({ popupVisible: false }); + } render() { const { prefixCls, children, placeholder, style, size } = this.props; const sizeCls = classNames({ 'ant-input-lg': size === 'large', 'ant-input-sm': size === 'small', }); + const clearIcon = this.state.value.length > 0 ? + : null; return ( - + {children || - } + + + {clearIcon} + + } ); } @@ -54,6 +90,7 @@ AntCascader.defaultProps = { return label.join(' / '); }, size: 'default', + onPopupVisibleChange() {}, }; export default AntCascader; diff --git a/package.json b/package.json index a7e5f16409..3188130e81 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", - "rc-cascader": "~0.3.0", + "rc-cascader": "~0.4.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", diff --git a/style/components/cascader.less b/style/components/cascader.less index e79f6089f7..e2063faba6 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -4,6 +4,32 @@ width: 172px; display: block; } + &-picker { + position: relative; + display: inline-block; + &-clear { + opacity: 0; + visibility: hidden; + position: absolute; + right: 8px; + top: 50%; + font-size: 12px; + color: #ccc; + width: 12px; + height: 12px; + margin-top: -6px; + line-height: 12px; + cursor: pointer; + transition: color 0.3s ease, opacity 0.15s ease; + &:hover { + color: #999; + } + } + &:hover &-clear { + opacity: 1; + visibility: visible; + } + } &-menus { font-size: 12px; overflow: hidden; From 7051b2c78681bc3fec5ed542e2d1199e0553875c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 22:34:23 +0800 Subject: [PATCH 036/633] Add arrow style --- components/cascader/index.jsx | 6 ++++++ style/components/cascader.less | 33 ++++++++++++++++++++++++++++++--- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index d68271a104..448766707a 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -46,6 +46,7 @@ class AntCascader extends React.Component { } clearSelection(e) { e.preventDefault(); + e.stopPropagation(); this.setValue([]); this.setState({ popupVisible: false }); } @@ -59,6 +60,10 @@ class AntCascader extends React.Component { : null; + const arrowCls = classNames({ + [`${prefixCls}-picker-arrow`]: true, + [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible, + }); return ( {clearIcon} + } diff --git a/style/components/cascader.less b/style/components/cascader.less index e2063faba6..dfc2b9d7b9 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -1,17 +1,23 @@ -.ant-cascader { +@cascader-prefix-cls: ant-cascader; + +.@{cascader-prefix-cls} { font-size: @font-size-base; &-input { width: 172px; display: block; + cursor: pointer; } &-picker { position: relative; display: inline-block; + cursor: pointer; + &-clear { opacity: 0; - visibility: hidden; position: absolute; right: 8px; + z-index: 1; + background: #fff; top: 50%; font-size: 12px; color: #ccc; @@ -25,9 +31,30 @@ color: #999; } } + &:hover &-clear { opacity: 1; - visibility: visible; + } + + // arrow + &-arrow { + position: absolute; + top: 50%; + right: 8px; + width: 12px; + height: 12px; + margin-top: -6px; + line-height: 12px; + .iconfont-size-under-12px(8px); + &:before { + transition: transform 0.2s ease; + } + &&-expand { + .ie-rotate(2); + &:before { + .rotate(180deg); + } + } } } &-menus { From 122f969462b26323d51765f520e166c91629a252 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 14:21:15 +0800 Subject: [PATCH 037/633] upgrade rc-cascader version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3188130e81..4daf8a7a7d 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", - "rc-cascader": "~0.4.0", + "rc-cascader": "~0.5.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", From 1087ec45010d9ec9a9fa79cf6734243b238c0bec Mon Sep 17 00:00:00 2001 From: lgmcolin Date: Wed, 30 Dec 2015 17:54:07 +0800 Subject: [PATCH 038/633] fix tree doc --- components/tree/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/tree/index.md b/components/tree/index.md index 28301382ec..8ee1c99b09 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -19,9 +19,12 @@ |multiple | 是否支持多选 | bool | false | |checkable | 是否支持选中 | bool | false | |defaultExpandAll | 设置展开所有树节点 | bool | false | -|defaultExpandedKeys | 展开指定的树节点 | String[] | false | +|defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] | |defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] | |defaultSelectedKeys | 默认选中的树节点 | String[] | [] | +|expandedKeys | 设置展开指定的树节点 | String[] | - | +|checkedKeys | 设置选中复选框的树节点 | String[] | - | +|selectedKeys | 设置选中的树节点 | String[] | - | |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | |onSelect | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | |onDataLoaded | 异步加载数据 | function(node)| - | From 1a606524dd6090338e54b5cf91863ed75868c371 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 19:01:34 +0800 Subject: [PATCH 039/633] rm expandedKeys from tree API --- components/tree/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tree/index.md b/components/tree/index.md index 8ee1c99b09..6e11ccde6c 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -22,7 +22,6 @@ |defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] | |defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] | |defaultSelectedKeys | 默认选中的树节点 | String[] | [] | -|expandedKeys | 设置展开指定的树节点 | String[] | - | |checkedKeys | 设置选中复选框的树节点 | String[] | - | |selectedKeys | 设置选中的树节点 | String[] | - | |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | From 4d8e00892784e3cc49097db5de5a9ee01eda701e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 19:34:05 +0800 Subject: [PATCH 040/633] update demo code --- components/select/demo/tags.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md index 4715675f34..b650c77435 100644 --- a/components/select/demo/tags.md +++ b/components/select/demo/tags.md @@ -21,10 +21,10 @@ function handleChange(value) { } ReactDOM.render( - , mountNode); From fb073bf0a42abd9abc06172c0558e92c2ca32757 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 21:06:51 +0800 Subject: [PATCH 041/633] update font spec doc --- site/static/style.css | 2 +- spec/font.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/static/style.css b/site/static/style.css index 1f7c4dfcc3..51be095263 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -543,7 +543,7 @@ footer ul li > a { .markdown h1 { font-size: 28px; } .markdown h2 { font-size: 24px; } -.markdown h3 { font-size: 20px; } +.markdown h3 { font-size: 18px; } .markdown h4 { font-size: 16px; } .markdown h5 { font-size: 14px; } .markdown h6 { font-size: 12px; } diff --git a/spec/font.md b/spec/font.md index f31dc9adcb..0954633e8e 100644 --- a/spec/font.md +++ b/spec/font.md @@ -11,7 +11,7 @@ - 中文字体族： - + - 英文文字体族： @@ -20,7 +20,7 @@ 字体家族 css 代码如下： ```css -font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif; +font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; ``` ## 字体使用规范 From 37e407aa82419386ae5574baf29dd6faa2bc8283 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 21:16:15 +0800 Subject: [PATCH 042/633] update design tools doc --- spec/tools.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/tools.md b/spec/tools.md index 47e2bfb97a..adcf199344 100644 --- a/spec/tools.md +++ b/spec/tools.md @@ -17,18 +17,18 @@ - For Sketch + Components in Sketch ### 图标 - svg set + Icon in AI - Iconfont set + Iconfont for web {% 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 113/633] 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 114/633] 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 115/633] 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 116/633] 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 117/633] 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 118/633] 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 119/633] 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 120/633] 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 121/633] 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 122/633] 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 123/633] 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 124/633] 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 fd65f75d71d495fcb79dbbcd4d3157c4d4716347 Mon Sep 17 00:00:00 2001 From: Yuwei Ba Date: Thu, 7 Jan 2016 17:46:36 +0800 Subject: [PATCH 125/633] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20Pagination=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pagination/index.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/components/pagination/index.md b/components/pagination/index.md index b4c62886c1..b9acffad65 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -19,15 +19,16 @@ ``` -| 参数 | 说明 | 类型 | 默认值 | -|------------------|------------------------------------|----------|----------------| -| current | 当前页数 | Number | 无 | -| defaultCurrent | 默认的当前页数 | Number | 1 | -| total | 数据总数 | Number | 0 | -| pageSize | 每页条数 | Number | 10 | -| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | -| showSizeChanger | 是否可以改变 pageSize | Bool | false | -| onShowSizeChange | pageSize 变化的回调 | Function | noop | -| showQuickJumper | 是否可以快速跳转至某页 | Bool | false | -| size | 当为「small」时，是小尺寸分页 | String | "" | -| simple | 当添加该属性时，显示为简单分页 | Object | 无 | +| 参数 | 说明 | 类型 | 默认值 | +|------------------|------------------------------------|---------------|--------------------------| +| current | 当前页数 | Number | 无 | +| defaultCurrent | 默认的当前页数 | Number | 1 | +| total | 数据总数 | Number | 0 | +| pageSize | 每页条数 | Number | 10 | +| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | +| showSizeChanger | 是否可以改变 pageSize | Bool | false | +| pageSizeOptions | 指定每页可以显示多少条 | Array | ['10', '20', '30', '40'] | +| onShowSizeChange | pageSize 变化的回调 | Function | noop | +| showQuickJumper | 是否可以快速跳转至某页 | Bool | false | +| size | 当为「small」时，是小尺寸分页 | String | "" | +| simple | 当添加该属性时，显示为简单分页 | Object | 无 | From ebe59bb08bce7628f83eb45171a8d2b883892931 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 17:54:38 +0800 Subject: [PATCH 126/633] 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 127/633] 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 128/633] 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 40a7cbf96fe4242976522fad3c12c3618c2f7a5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Thu, 7 Jan 2016 19:05:55 +0800 Subject: [PATCH 129/633] fix lint --- components/tree-select/index.jsx | 4 +- components/tree/demo/basic-controlled.md | 188 +++++++++++++++++++++++ components/tree/demo/basic.md | 78 ++++++++-- components/tree/demo/checkbox.md | 32 ---- components/tree/demo/contextmenu.md | 107 +++++++++++++ components/tree/demo/draggable.md | 123 +++++++++++++++ components/tree/demo/dynamic.md | 113 +++++++++----- components/tree/demo/special.md | 67 -------- components/tree/index.jsx | 3 +- components/tree/index.md | 24 ++- package.json | 2 +- style/components/tree.less | 53 +++++-- style/components/treeSelect.less | 24 ++- 13 files changed, 626 insertions(+), 192 deletions(-) create mode 100644 components/tree/demo/basic-controlled.md delete mode 100644 components/tree/demo/checkbox.md create mode 100644 components/tree/demo/contextmenu.md create mode 100644 components/tree/demo/draggable.md delete mode 100644 components/tree/demo/special.md diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index 56e1d5ccc0..f96505ec57 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,7 +1,6 @@ import React from 'react'; import TreeSelect, { TreeNode } from 'rc-tree-select'; import classNames from 'classnames'; -// import assign from 'object-assign'; // import animation from '../common/openAnimation'; const AntTreeSelect = React.createClass({ @@ -12,7 +11,8 @@ const AntTreeSelect = React.createClass({ optionLabelProp: 'value', choiceTransitionName: 'zoom', showSearch: false, - size: 'default' + size: 'default', + // openAnimation: animation, }; }, render() { diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md new file mode 100644 index 0000000000..7bfab76cb6 --- /dev/null +++ b/components/tree/demo/basic-controlled.md @@ -0,0 +1,188 @@ +# 受控操作示例 + +- order: 1 + +受控操作示例 + +--- + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key: key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const __level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(__level, key, tns[index].children); + }); +}; +generateData(z); + + +function isInclude(smallArray, bigArray) { + return smallArray.every((ii, i) => { + return ii === bigArray[i]; + }); +} +// console.log(isInclude(['0', '1'], ['0', '10', '1'])); + +function getCheckedKeys(node, checkedKeys, allCheckedNodesKeys) { + const nodeKey = node.props.eventKey; + let newCks = [...checkedKeys]; + let nodePos; + const unCheck = allCheckedNodesKeys.some(item => { + if (item.key === nodeKey) { + nodePos = item.pos; + return true; + } + }); + if (unCheck) { + const nArr = nodePos.split('-'); + newCks = []; + allCheckedNodesKeys.forEach(item => { + const iArr = item.pos.split('-'); + if (item.pos === nodePos || + nArr.length > iArr.length && isInclude(iArr, nArr) || + nArr.length < iArr.length && isInclude(nArr, iArr)) { + // 过滤掉 非父级节点 和 所有子节点。 + // 因为 node节点 不选时，其 非父级节点 和 所有子节点 都不选。 + return; + } + newCks.push(item.key); + }); + } else { + newCks.push(nodeKey); + } + return newCks; +} + +function loopData(data, callback) { + const loop = (d, level = 0) => { + d.forEach((item, index) => { + const pos = `${level}-${index}`; + if (item.children) { + loop(item.children, pos); + } + callback(item, index, pos); + }); + }; + loop(data); +} + +function getFilterExpandedKeys(data, expandedKeys) { + const expandedPosArr = []; + loopData(data, (item, index, pos) => { + if (expandedKeys.indexOf(item.key) > -1) { + expandedPosArr.push(pos); + } + }); + const filterExpandedKeys = []; + loopData(data, (item, index, pos) => { + expandedPosArr.forEach(p => { + if ((pos.split('-').length < p.split('-').length + && p.indexOf(pos) === 0 || pos === p) + && filterExpandedKeys.indexOf(item.key) === -1) { + filterExpandedKeys.push(item.key); + } + }); + }); + return filterExpandedKeys; +} + +const Demo = React.createClass({ + propTypes: { + multiple: React.PropTypes.bool, + }, + getDefaultProps() { + return { + multiple: false, + }; + }, + getInitialState() { + return { + expandedKeys: getFilterExpandedKeys(gData, ['0-0-0', '0-0-1']), + checkedKeys: ['0-0-0'], + selectedKeys: [], + }; + }, + onExpand(treeNode, expand, expandedKeys) { + console.log('onExpand', expand, expandedKeys); + const index = expandedKeys.indexOf(treeNode.props.eventKey); + if (expand) { + if (index > -1) { + expandedKeys.splice(index, 1); + } + } else { + if (index === -1) { + expandedKeys.push(treeNode.props.eventKey); + } + } + this.setState({ + expandedKeys: expandedKeys, + }); + }, + onCheck(info) { + console.log('check: ', info); + this.setState({ + checkedKeys: getCheckedKeys(info.node, info.checkedKeys, info.allCheckedNodesKeys), + selectedKeys: ['0-3', '0-4'], + }); + }, + onSelect(info) { + console.log('selected: ', info); + let selectedKeys = [...this.state.selectedKeys]; + const index = selectedKeys.indexOf(info.node.props.eventKey); + if (index > -1) { + selectedKeys.splice(index, 1); + } else if (this.props.multiple) { + selectedKeys.push(info.node.props.eventKey); + } else { + selectedKeys = [info.node.props.eventKey]; + } + this.setState({ + selectedKeys: selectedKeys, + }); + }, + render() { + const loop = data => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + }; + return (
    +

    controlled

    + + {loop(gData)} + +
    ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 94049c5152..06f34e91f1 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -10,18 +10,70 @@ import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -ReactDOM.render( - - - - - - - +const Demo = React.createClass({ + propTypes: { + keys: React.PropTypes.array, + }, + getDefaultProps() { + return { + keys: ['0-0-0', '0-0-1'], + }; + }, + getInitialState() { + const keys = this.props.keys; + return { + defaultExpandedKeys: keys, + defaultSelectedKeys: keys, + defaultCheckedKeys: keys, + switchIt: true, + }; + }, + onExpand(treeNode, expand, expandedKeys) { + console.log('onExpand', expand, expandedKeys); + }, + onSelect(info) { + console.log('selected', info); + }, + onCheck(info) { + console.log('onCheck', info); + }, + change() { + const keys = this.props.keys; + this.setState({ + defaultExpandedKeys: ['0-0', keys[this.state.switchIt ? 0 : 1]], + defaultSelectedKeys: [keys[this.state.switchIt ? 0 : 1]], + defaultCheckedKeys: [keys[this.state.switchIt ? 1 : 0]], + switchIt: !this.state.switchIt, + }); + }, + render() { + return (
    +

    simple

    + + + + + + + + sss} key="0-0-1-0" /> + - - - - -, mountNode); + + +
    +
    + +

    defaultXX 的初始化状态不会改变

    +
    +
    ); + }, +}); + +ReactDOM.render(, mountNode); ```` diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md deleted file mode 100644 index 072e1f4152..0000000000 --- a/components/tree/demo/checkbox.md +++ /dev/null @@ -1,32 +0,0 @@ -# 可选择 - -- order: 1 - -提供复选框操作功能。 - ---- - -````jsx -import { Tree } from 'antd'; -const TreeNode = Tree.TreeNode; - -function handleCheck(info) { - console.log('check: ', info); -} - -ReactDOM.render(
    - - - - - - - - - - - - -
    -, mountNode); -```` diff --git a/components/tree/demo/contextmenu.md b/components/tree/demo/contextmenu.md new file mode 100644 index 0000000000..34e30ba22f --- /dev/null +++ b/components/tree/demo/contextmenu.md @@ -0,0 +1,107 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +import { Tree, Tooltip } from 'antd'; +import assign from 'object-assign'; +const TreeNode = Tree.TreeNode; + +function contains(root, n) { + let node = n; + while (node) { + if (node === root) { + return true; + } + node = node.parentNode; + } + return false; +} + +const Demo = React.createClass({ + propTypes: {}, + componentDidMount() { + this.getContainer(); + document.body.onclick = (e) => { + // console.log(e.target); + if (contains(this.cmContainer, e.target)) { + return; + } + this.componentWillUnmount(); + this.toolTip = null; + }; + }, + componentWillUnmount() { + if (this.cmContainer) { + ReactDOM.unmountComponentAtNode(this.cmContainer); + document.body.removeChild(this.cmContainer); + this.cmContainer = null; + } + }, + onSelect(info) { + console.log('selected', info); + }, + onRightClick(info) { + console.log('right click', info); + this.renderCm(info); + }, + onMouseLeave(info) { + console.log('leave', info); + }, + getContainer() { + if (!this.cmContainer) { + this.cmContainer = document.createElement('div'); + document.body.appendChild(this.cmContainer); + } + return this.cmContainer; + }, + renderCm(info) { + if (this.toolTip) { + ReactDOM.unmountComponentAtNode(this.cmContainer); + this.toolTip = null; + } + this.toolTip = ( + show tooltip + ); + + const container = this.getContainer(); + assign(this.cmContainer.style, { + position: 'absolute', + left: info.event.pageX + 'px', + top: info.event.pageY + 'px', + }); + + ReactDOM.render(
    +

    {info.node.props.title}

    + {this.toolTip} +
    , container); + }, + render() { + return ( +
    +

    right click contextmenu

    + + + + + + + + + + + + +
    + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md new file mode 100644 index 0000000000..d21988f86f --- /dev/null +++ b/components/tree/demo/draggable.md @@ -0,0 +1,123 @@ +# 拖动示例 + +- order: 2 + +拖动示例 + +--- + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key: key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const __level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(__level, key, tns[index].children); + }); +}; +generateData(z); + +const Demo = React.createClass({ + getInitialState() { + return { + gData: gData, + expandedKeys: ['0-0', '0-0-0', '0-0-0-0'], + }; + }, + onTreeDragStart() { + }, + onTreeDragEnter(info) { + // console.log(info); + this.setState({ + expandedKeys: info.expandedKeys, + }); + }, + onTreeDrop(info) { + console.log(info); + const dropKey = info.node.props.eventKey; + const dragKey = info.dragNode.props.eventKey; + // const dragNodesKeys = info.dragNodesKeys; + const loop = (data, key, callback) => { + data.forEach((item, index, arr) => { + if (item.key === key) { + return callback(item, index, arr); + } + if (item.children) { + return loop(item.children, key, callback); + } + }); + }; + const data = [...this.state.gData]; + let dragObj; + loop(data, dragKey, (item, index, arr) => { + arr.splice(index, 1); + dragObj = item; + }); + if (info.dropToGap) { + let ar; + let i; + loop(data, dropKey, (item, index, arr) => { + ar = arr; + i = index; + }); + ar.splice(i, 0, dragObj); + } else { + loop(data, dropKey, (item) => { + item.children = item.children || []; + // where to insert 示例添加到尾部，可以是随意位置 + item.children.push(dragObj); + }); + } + this.setState({ + gData: data, + expandedKeys: info.originExpandedKeys, + }); + }, + render() { + const loop = data => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + }; + return (
    +

    draggable

    +

    drag a node into another node

    +
    + + {loop(this.state.gData)} + +
    +
    ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md index 21a9812f52..4bc32976a3 100644 --- a/components/tree/demo/dynamic.md +++ b/components/tree/demo/dynamic.md @@ -10,51 +10,79 @@ import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; -const asyncTree = [{ - name: 'pNode 01', - key: '0-0' -}]; +function generateTreeNodes(treeNode) { + const arr = []; + const key = treeNode.props.eventKey; + for (let i = 0; i < 3; i++) { + arr.push({name: `leaf ${key}-${i}`, key: `${key}-${i}`}); + } + return arr; +} -const generateTreeNodes = () => { - return [{ - name: '伯约', - key: '0-0-0' - }]; -}; - -const TreeDemo = React.createClass({ - timeout(duration = 0) { - return new Promise((resolve) => { - setTimeout(resolve.bind(this), duration); +function setLeaf(treeData, curKey, level) { + const loopLeaf = (data, lev) => { + const l = lev - 1; + data.forEach((item) => { + if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 : + curKey.indexOf(item.key) !== 0) { + return; + } + if (item.children) { + loopLeaf(item.children, l); + } else if (l < 1) { + item.isLeaf = true; + } }); - }, + }; + loopLeaf(treeData, level + 1); +} + +function getNewTreeData(treeData, curKey, child, level) { + const loop = (data) => { + if (level < 1 || curKey.length - 3 > level * 2) return; + data.forEach((item) => { + if (curKey.indexOf(item.key) === 0) { + if (item.children) { + loop(item.children); + } else { + item.children = child; + } + } + }); + }; + loop(treeData); + setLeaf(treeData, curKey, level); +} + +const Demo = React.createClass({ + propTypes: {}, getInitialState() { return { - treeData: [] + treeData: [], }; }, componentDidMount() { - this.timeout(1000).then(() => { + setTimeout(() => { this.setState({ - treeData: asyncTree + treeData: [ + {name: 'pNode 01', key: '0-0'}, + {name: 'pNode 02', key: '0-1'}, + {name: 'pNode 03', key: '0-2', isLeaf: true}, + ], }); - return asyncTree; - }); + }, 100); }, - handleSelect(info) { + onSelect(info) { console.log('selected', info); }, - handleDataLoaded(treeNode) { - return this.timeout(1000).then(() => { - const child = generateTreeNodes(); - const treeData = [...this.state.treeData]; - treeData.forEach((item) => { - if (item.key === treeNode.props.eventKey) { - item.children = child; - } - }); - this.setState({treeData}); - return child; + onLoadData(treeNode) { + return new Promise((resolve) => { + setTimeout(() => { + const treeData = [...this.state.treeData]; + getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2); + this.setState({treeData}); + resolve(); + }, 500); }); }, render() { @@ -62,20 +90,21 @@ const TreeDemo = React.createClass({ return data.map((item) => { if (item.children) { return {loop(item.children)}; - } else { - return ; } + return ; }); }; - const parseTreeNode = data => loop(data); - let treeNodes = parseTreeNode(this.state.treeData); + const treeNodes = loop(this.state.treeData); return ( - - {treeNodes} - +
    +

    dynamic render

    + + {treeNodes} + +
    ); - } + }, }); -ReactDOM.render(, mountNode); +ReactDOM.render(, mountNode); ```` diff --git a/components/tree/demo/special.md b/components/tree/demo/special.md deleted file mode 100644 index 1510f3c600..0000000000 --- a/components/tree/demo/special.md +++ /dev/null @@ -1,67 +0,0 @@ -# 接收外部传参 - -- order: 2 - -受控组件，外部传入参数，控制树对象节点。 - ---- - -````jsx -import { Tree, Button } from 'antd'; -const TreeNode = Tree.TreeNode; - -class TreeDemo extends React.Component { - constructor(props) { - super(props); - ['handleClick', 'handleCheck', 'handleSelect'].forEach((m)=> { - this[m] = this[m].bind(this); - }); - this.state = { - checkedKeys: [], - selectedKeys: [] - }; - } - handleClick() { - this.setState({ - checkedKeys: ['p11'], - selectedKeys: ['p21', 'p11'] - }); - } - handleCheck(info) { - console.log('check: ', info); - this.setState({ - checkedKeys: ['p21'], - selectedKeys: ['p1', 'p21'] - }); - } - handleSelect(info) { - console.log('selected: ', info); - this.setState({ - checkedKeys: ['p21'], - selectedKeys: ['p21'] - }); - } - render() { - return (
    - - - - - - - sss}/> - - - - - - - -
    ); - } -} - -ReactDOM.render(, mountNode); -```` diff --git a/components/tree/index.jsx b/components/tree/index.jsx index dc25433fcf..04f89cb48f 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -8,6 +8,7 @@ const AntTree = React.createClass({ prefixCls: 'ant-tree', checkable: false, showIcon: false, + openAnimation: animation, }; }, render() { @@ -16,7 +17,7 @@ const AntTree = React.createClass({ if (checkable) { checkable = ; } - return + return {this.props.children} ; } diff --git a/components/tree/index.md b/components/tree/index.md index 88ea1c6611..ed225df163 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -18,20 +18,32 @@ |-----------|------------------------------------------|------------|--------| |multiple | 是否支持多选 | bool | false | |checkable | 是否支持选中 | bool | false | -|defaultExpandAll | 设置展开所有树节点 | bool | false | +|defaultExpandAll | 默认展开所有树节点 | bool | false | |defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] | +|expandedKeys | （受控）展开指定的树节点 | String[] | [] | +|checkedKeys | （受控）选中复选框的树节点 | String[] | [] | |defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] | +|selectedKeys | （受控）设置选中的树节点 | String[] | - | |defaultSelectedKeys | 默认选中的树节点 | String[] | [] | -|checkedKeys | 设置选中复选框的树节点 | String[] | - | -|selectedKeys | 设置选中的树节点 | String[] | - | -|onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | +|onExpand | 展开/收起节点时触发 | function(node, expanded, expandedKeys) | - | +|onCheck | 点击复选框触发 | function(e:{checked:bool, node, checkedKeys, event}) | - | |onSelect | 点击树节点触发 | function(e:{selected:bool,node,selectedKeys,event}) | - | -|onDataLoaded | 异步加载数据 | function(node)| - | +|filterTreeNode | filter some treeNodes as you need. it should return true | function(node) | - | +|loadData | 异步加载数据 | function(node)| - | +|onRightClick | 显示右键菜单 | function({event,node}) | - | +|draggable | 设置节点可拖拽（IE>8） | bool | false | +|onTreeDragStart | 开始拖拽时调用 | function({event,node}) | - | +|onTreeDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - | +|onTreeDragOver | dragover 触发时调用 | function({event,node}) | - | +|onTreeDragLeave | dragleave 触发时调用 | function({event,node}) | - | +|onTreeDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | ### TreeNode props | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| |disabled | 禁掉响应 | bool | false | +|disableCheckbox | 禁掉 checkbox | bool | false | |title | 标题 | String | '---' | -|key | 被树的defaultCheckedKeys/defaultSelectedKeys/defaultExpandedKeys所用 | String | 内部计算出的节点位置 | +|key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | String | 内部计算出的节点位置 | +|isLeaf | 设置为叶子节点 | bool | false | diff --git a/package.json b/package.json index 29f2a38c17..ca15e12ef9 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "rc-tabs": "~5.6.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "^0.23.1", + "rc-tree": "^0.25.3", "rc-tree-select": "^0.3.3", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", diff --git a/style/components/tree.less b/style/components/tree.less index b051799a65..24a49fd40f 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -26,6 +26,41 @@ list-style: none; white-space: nowrap; outline: 0; + a[draggable], + a[draggable="true"] { + color: #333; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + /* Required to make elements draggable in old WebKit */ + -khtml-user-drag: element; + -webkit-user-drag: element; + } + &.drag-over { + > a[draggable] { + background-color: #316ac5; + color: white; + border: 1px #316ac5 solid; + opacity: 0.8; + } + } + &.drag-over-gap-top { + > a[draggable] { + border-top: 2px blue solid; + } + } + &.drag-over-gap-bottom { + > a[draggable] { + border-bottom: 2px blue solid; + } + } + &.filter-node { + > a { + color: #a60000!important; + font-weight: bold!important; + } + } ul { margin: 0; padding: 0 0 0 18px; @@ -45,7 +80,6 @@ &.@{tree-prefix-cls}-checkbox { margin: 3px 4px 0 0; } - &.@{tree-prefix-cls}-switcher-noop, &.@{tree-prefix-cls}-switcher, &.@{tree-prefix-cls}-iconEle { line-height: 0; @@ -69,17 +103,6 @@ } } &.@{tree-prefix-cls}-switcher { - &-disabled { - background: #fff; - position: relative; - &:after { - content: '-'; - position: absolute; - top: 8px; - left: 6px; - color: gray; - } - } &.@{tree-prefix-cls}-roots_open, &.@{tree-prefix-cls}-center_open, &.@{tree-prefix-cls}-bottom_open, @@ -107,8 +130,10 @@ } &-treenode-disabled { >span, - >a { - color: gray; + >a, + >a span { + color: #ccc; + cursor: not-allowed; } } &-node-selected { diff --git a/style/components/treeSelect.less b/style/components/treeSelect.less index 6bf36e14f3..1ab5cd38d7 100644 --- a/style/components/treeSelect.less +++ b/style/components/treeSelect.less @@ -26,6 +26,12 @@ list-style: none; white-space: nowrap; outline: 0; + &.filter-node { + > a { + color: #a60000!important; + font-weight: bold!important; + } + } ul { margin: 0; padding: 0 0 0 18px; @@ -45,7 +51,6 @@ &.@{tree-select-tree-prefix-cls}-checkbox { margin: 3px 4px 0 0; } - &.@{tree-select-tree-prefix-cls}-switcher-noop, &.@{tree-select-tree-prefix-cls}-switcher, &.@{tree-select-tree-prefix-cls}-iconEle { line-height: 0; @@ -69,17 +74,6 @@ } } &.@{tree-select-tree-prefix-cls}-switcher { - &-disabled { - background: #fff; - position: relative; - &:after { - content: '-'; - position: absolute; - top: 8px; - left: 6px; - color: gray; - } - } &.@{tree-select-tree-prefix-cls}-roots_open, &.@{tree-select-tree-prefix-cls}-center_open, &.@{tree-select-tree-prefix-cls}-bottom_open, @@ -107,8 +101,10 @@ } &-treenode-disabled { >span, - >a { - color: gray; + >a, + >a span { + color: #ccc; + cursor: not-allowed; } } &-node-selected { From d3fdb1ae872f39f75f06f2f0075d78f89fff6405 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 7 Jan 2016 19:50:14 +0800 Subject: [PATCH 130/633] 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 131/633] 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 3b724b39aaaefb44a236e6dff07ec6e077118446 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 20:58:13 +0800 Subject: [PATCH 132/633] make cascader item size autofit --- style/components/cascader.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/style/components/cascader.less b/style/components/cascader.less index 39a0a1fffb..7bb63d0d6a 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -89,7 +89,7 @@ } &-menu { float: left; - width: 111px; + min-width: 111px; height: 180px; list-style: none; margin: 0; @@ -102,9 +102,7 @@ } } &-menu-item { - height: 32px; - line-height: 32px; - padding: 0 16px; + padding: 7px 16px; cursor: pointer; white-space: nowrap; overflow: hidden; From 6e84d677e65d982df46b7a619a440ff2e09b2e00 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 21:05:28 +0800 Subject: [PATCH 133/633] update tree style --- package.json | 2 +- style/components/tree.less | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ca15e12ef9..ee16540aff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.0-beta5", + "version": "0.12.0-beta6", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", diff --git a/style/components/tree.less b/style/components/tree.less index 24a49fd40f..aac2f3428b 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -28,7 +28,6 @@ outline: 0; a[draggable], a[draggable="true"] { - color: #333; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; @@ -47,17 +46,17 @@ } &.drag-over-gap-top { > a[draggable] { - border-top: 2px blue solid; + border-top: 2px @primary-color solid; } } &.drag-over-gap-bottom { > a[draggable] { - border-bottom: 2px blue solid; + border-bottom: 2px @primary-color solid; } } &.filter-node { > a { - color: #a60000!important; + color: @error-color!important; font-weight: bold!important; } } From 02075784d69cfdf6be976fddaf0ca65e4c742048 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 23:47:14 +0800 Subject: [PATCH 134/633] 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 a1040e5ce10f3d17822d7159fd19cd280dccd6ea Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 7 Jan 2016 23:56:48 +0800 Subject: [PATCH 135/633] fix time-picker panel width, close #826 --- style/components/timepicker/Picker.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/timepicker/Picker.less b/style/components/timepicker/Picker.less index 25dbc5dcc9..a6c307a944 100644 --- a/style/components/timepicker/Picker.less +++ b/style/components/timepicker/Picker.less @@ -1,5 +1,5 @@ .@{timepicker-prefix-cls}-panel { - min-width: 168px; + max-width: 168px; z-index: 1070; position: absolute; From 1cff3f77f061b96f9ff6121df21e7f8be38f6187 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 8 Jan 2016 00:22:18 +0800 Subject: [PATCH 136/633] fix disabled a style, close #823 --- style/core/base.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/core/base.less b/style/core/base.less index b678c43e88..8cb73a4fbd 100644 --- a/style/core/base.less +++ b/style/core/base.less @@ -70,7 +70,7 @@ a { } &[disabled] { - // color: @grey-200; + color: #ccc; cursor: not-allowed; pointer-events: none; } From 64cde2e9059de40f8fdedff0b91e86ca7f867725 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 8 Jan 2016 15:28:32 +0800 Subject: [PATCH 137/633] fix: Pagination.onChange should be called #824 --- components/table/demo/paging.md | 3 +++ components/table/index.jsx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 9e3917f53b..2459cae6d9 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -39,6 +39,9 @@ const pagination = { showSizeChanger: true, onShowSizeChange: function(current, pageSize) { console.log('Current: ', current, '; PageSize: ', pageSize); + }, + onChange: function(current) { + console.log('Current: ', current); } }; diff --git a/components/table/index.jsx b/components/table/index.jsx index c2c0e73049..3f7e8f815e 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -253,6 +253,8 @@ let AntTable = React.createClass({ } else { pagination.current = pagination.current || 1; } + pagination.onChange(pagination.current); + const newState = { selectionDirty: false, pagination From c821b2cf03175a982f5498545b7ea11c9c40e1b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 8 Jan 2016 16:01:37 +0800 Subject: [PATCH 138/633] 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 0c9afc8561044ee5a665690393b4a2c774512bc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Fri, 8 Jan 2016 19:46:57 +0800 Subject: [PATCH 142/633] change treeNodeLabelProp defaultValue --- components/tree-select/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tree-select/index.md b/components/tree-select/index.md index 8f389fc216..c6c940ce86 100644 --- a/components/tree-select/index.md +++ b/components/tree-select/index.md @@ -35,7 +35,7 @@ | treeCheckable | 显示checkbox | bool | false | | filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - | | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' | -| treeNodeLabelProp | 作为显示的prop设置 | String | 'value' | +| treeNodeLabelProp | 作为显示的prop设置 | String | 'title' | | loadData | 异步加载数据 | function(node) | - | ### TreeNode props From 658660a1585ba922c905206a1a15af752d896e98 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 16:04:01 +0800 Subject: [PATCH 143/633] 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 144/633] 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 145/633] 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 146/633] 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 147/633] 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 27a773031cad8397b40429fb602e074926a31147 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 19:36:37 +0800 Subject: [PATCH 148/633] update table style, for th in tbody use case --- style/components/table.less | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/style/components/table.less b/style/components/table.less index dbd724dc11..05d1401c85 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -2,7 +2,7 @@ @table-prefix-cls: ~"@{css-prefix}table"; @table-border-color: #e9e9e9; -@table-head-background-color: #f3f3f3; +@table-head-background-color: #f4f4f4; .@{table-prefix-cls} { font-size: @font-size-base; @@ -18,6 +18,7 @@ border-collapse: separate; text-align: left; border-radius: @border-radius-base; + overflow: hidden; } th { @@ -39,13 +40,6 @@ .@{table-prefix-cls}-filter-selected.anticon-filter { color: @primary-color; } - - &:first-child { - border-radius: @border-radius-base 0 0 0; - } - &:last-child { - border-radius: 0 @border-radius-base 0 0; - } } td { @@ -59,6 +53,10 @@ } } + thead tr:hover { + background: none; + } + tr.@{table-prefix-cls}-row-selected { background: #fafafa; } @@ -173,6 +171,7 @@ } tr:last-child { + th, td { border-bottom: 0; } From 016b04f4d318496d7dfe8543082712bc5d99dfff Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 19:40:43 +0800 Subject: [PATCH 149/633] 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 150/633] 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 a222b3898b939c821a3bba3bb05cd72046444e67 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 21:10:10 +0800 Subject: [PATCH 151/633] support submenu in table filter menu, ref #708 --- components/table/demo/head.md | 14 +++++++-- components/table/filterDropdown.jsx | 48 ++++++++++++++++++++++++----- style/components/table.less | 19 +++++++++++- 3 files changed, 71 insertions(+), 10 deletions(-) diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 1a4cf3d7d2..cf77bf0cd0 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -16,10 +16,20 @@ const columns = [{ dataIndex: 'name', filters: [{ text: '姓李的', - value: '李' + value: '李', }, { text: '姓胡的', - value: '胡' + value: '胡', + }, { + text: '子菜单', + value: '子菜单', + children: [{ + text: '姓陈的', + value: '陈', + }, { + text: '姓王的', + value: '王', + }] }], // 指定确定筛选的条件函数 // 这里是名字中第一个字是 value diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index c656f25ebf..a4dd7dae92 100644 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -3,12 +3,14 @@ import Menu from 'rc-menu'; import Dropdown from '../dropdown'; import Icon from '../icon'; import Checkbox from '../checkbox'; +const { SubMenu } = Menu; let FilterMenu = React.createClass({ getInitialState() { return { selectedKeys: this.props.selectedKeys, - visible: false + keyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单 + visible: false, }; }, componentWillReceiveProps(nextProps){ @@ -45,15 +47,47 @@ let FilterMenu = React.createClass({ this.props.confirmFilter(this.props.column, this.state.selectedKeys); } }, + renderMenuItem(item) { + return + = 0} /> + {item.text} + ; + }, renderMenus(items) { - let menuItems = items.map((item) => { - return - = 0} /> - {item.text} - ; + let menuItems = items.map(item => { + if (item.children && item.children.length > 0) { + const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem; + const containSelected = Object.keys(keyPathOfSelectedItem).some(key => { + const keyPath = keyPathOfSelectedItem[key]; + if (keyPath.indexOf(item.value) >= 0) { + return true; + } + }); + const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : ''; + return ( + + {item.children.map(child => this.renderMenuItem(child))} + + ); + } + return this.renderMenuItem(item); }); return menuItems; }, + handleMenuItemClick(info) { + if (info.keyPath.length <= 1) { + return; + } + const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem; + if (this.state.selectedKeys.indexOf(info.key) >= 0) { + // deselect SubMenu child + delete keyPathOfSelectedItem[info.key]; + } else { + // select SubMenu child + keyPathOfSelectedItem[info.key] = info.keyPath; + } + this.setState({ keyPathOfSelectedItem }); + }, render() { let {column, locale} = this.props; // default multiple selection in filter dropdown @@ -62,7 +96,7 @@ let FilterMenu = React.createClass({ multiple = column.filterMultiple; } let menus =
    - .ant-dropdown-menu > .ant-dropdown-menu-item:last-child, + > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title { + border-radius: 0; + } + &-btns { overflow: hidden; padding: 7px 15px; From e3f0b2c6f50f3f62a7fb86f40fd3bd2387cf6ce3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Jan 2016 22:51:03 +0800 Subject: [PATCH 152/633] update table filter menu style --- style/components/table.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/table.less b/style/components/table.less index 6d5044a3d7..43aa615f6e 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -226,7 +226,6 @@ box-shadow: @box-shadow-base; .ant-dropdown-menu { - max-height: 220px; border: 0; box-shadow: none; border-radius: @border-radius-base @border-radius-base 0 0; @@ -241,6 +240,7 @@ .ant-dropdown-menu-submenu-title:after { color: @primary-color; font-weight: bold; + text-shadow: 0 0 2px tint(@primary-color, 80%); } } } From 1e001d2d82c5816b55d3953939fcaedbbacf1a3c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 5 Jan 2016 14:42:06 +0800 Subject: [PATCH 153/633] upgrade eslint-config-airbnb --- .eslintrc | 22 +++------------- components/alert/index.jsx | 34 ++++++++++++------------- components/badge/ScrollNumber.jsx | 4 +-- components/button/button-group.jsx | 6 ++--- components/button/button.jsx | 6 ++--- components/calendar/Header.jsx | 17 +++++-------- components/calendar/index.jsx | 8 +++--- components/carousel/index.jsx | 8 +++--- components/cascader/index.jsx | 2 +- components/checkbox/Group.jsx | 4 +-- components/collapse/index.jsx | 3 +-- components/common/openAnimation.js | 2 +- components/date-picker/PickerMixin.jsx | 2 +- components/date-picker/RangePicker.jsx | 28 ++++++++++---------- components/date-picker/index.jsx | 18 ++++++------- components/dropdown/dropdown-button.jsx | 2 +- components/dropdown/dropdown.jsx | 4 +-- components/form/FormItem.jsx | 10 +++++--- components/form/ValueMixin.jsx | 4 +-- components/input-number/index.jsx | 2 +- components/input/index.jsx | 11 ++++---- package.json | 2 +- 22 files changed, 91 insertions(+), 108 deletions(-) diff --git a/.eslintrc b/.eslintrc index 1bbfc52b30..2a5b932849 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,29 +17,15 @@ "babel" ], "rules": { - "constructor-super": 2, "comma-dangle": 0, "func-names": 0, - "guard-for-in": 0, - "one-var": [2, { "initialized": "never" }], "prefer-const": 0, - "key-spacing": 0, - "no-eq-null": 0, - "no-else-return": 0, - "no-param-reassign": 0, - "no-this-before-super": 2, - "no-undef": 2, - "babel/object-shorthand": 0, - "react/jsx-no-duplicate-props": 2, "react/sort-comp": 0, - "react/wrap-multilines": 0, "react/no-multi-comp": 0, "react/prop-types": 0, - "space-after-keywords": 0, - "space-before-blocks": 0, - "space-before-function-paren": 0, - "spaced-comment": 0, - "vars-on-top": 0, - "id-length": 0 + "react/prefer-es6-class": 0, + "react/jsx-closing-bracket-location": 0, + "react/jsx-no-bind": 0, + "space-before-function-paren": 0 } } diff --git a/components/alert/index.jsx b/components/alert/index.jsx index 8922c80b15..91c0f8ad23 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -44,20 +44,20 @@ export default React.createClass({ let iconType = ''; switch (type) { - case 'success': - iconType = 'check-circle'; - break; - case 'info': - iconType = 'info-circle'; - break; - case 'error': - iconType = 'exclamation-circle'; - break; - case 'warn': - iconType = 'exclamation-circle'; - break; - default: - iconType = 'default'; + case 'success': + iconType = 'check-circle'; + break; + case 'info': + iconType = 'info-circle'; + break; + case 'error': + iconType = 'exclamation-circle'; + break; + case 'warn': + iconType = 'exclamation-circle'; + break; + default: + iconType = 'default'; } // use outline icon in alert with description @@ -80,9 +80,9 @@ export default React.createClass({ return this.state.closed ? null : ( + showProp="data-show" + transitionName="slide-up" + onEnd={this.animationEnd}>
    {showIcon ? : null} {message} diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 662ea736b8..d3bff2236d 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -80,7 +80,7 @@ class AntScrollNumber extends React.Component { style: { transition: removeTransition && 'none', transform: 'translate3d(0, ' + (-position * height) + 'px, 0)', - height: height, + height, }, key: i, }, this.renderNumberList()); @@ -120,7 +120,7 @@ AntScrollNumber.defaultProps = { prefixCls: 'ant-scroll-number', count: null, component: 'sup', - onAnimated: function() {}, + onAnimated() {}, height: 18, }; diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx index 082ee4d577..46829114f3 100644 --- a/components/button/button-group.jsx +++ b/components/button/button-group.jsx @@ -5,13 +5,13 @@ const prefix = 'ant-btn-group-'; export default class ButtonGroup extends React.Component { render() { - const {size, className, ...others} = this.props; + const { size, className, ...others } = this.props; // large => lg // small => sm const sizeCls = ({ - 'large': 'lg', - 'small': 'sm' + large: 'lg', + small: 'sm', })[size] || ''; const classes = classNames({ diff --git a/components/button/button.jsx b/components/button/button.jsx index c9760872b6..cecabc9786 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -32,13 +32,13 @@ export default class Button extends React.Component { } render() { const props = this.props; - const {type, shape, size, onClick, className, htmlType, children, ...others} = props; + const { type, shape, size, onClick, className, htmlType, children, ...others } = props; // large => lg // small => sm const sizeCls = ({ - 'large': 'lg', - 'small': 'sm' + large: 'lg', + small: 'sm', })[size] || ''; const classes = classNames({ diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index f522fb4dcb..ae67307108 100644 --- a/components/calendar/Header.jsx +++ b/components/calendar/Header.jsx @@ -1,20 +1,20 @@ -import React, {PropTypes, Component} from 'react'; -import {PREFIX_CLS} from './Constants'; +import React, { PropTypes, Component } from 'react'; +import { PREFIX_CLS } from './Constants'; import Select from '../select'; -import {Group, Button} from '../radio'; +import { Group, Button } from '../radio'; function noop() {} class Header extends Component { getYearSelectElement(year) { - const {yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen} = this.props; + const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props; const start = year - yearSelectOffset; const end = start + yearSelectTotal; const suffix = locale.year === '年' ? '年' : ''; const options = []; for (let index = start; index < end; index++) { - options.push( ); + options.push(); } return ( diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index eb6db6680f..50cbd9229f 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -47,8 +47,8 @@ export default React.createClass({ options.map(option => ) diff --git a/components/collapse/index.jsx b/components/collapse/index.jsx index e0c95dedcc..38db75e087 100644 --- a/components/collapse/index.jsx +++ b/components/collapse/index.jsx @@ -1,6 +1,5 @@ import Collapse from 'rc-collapse'; import React from 'react'; -const prefixCls = 'ant-collapse'; class AntCollapse extends React.Component { render() { @@ -9,7 +8,7 @@ class AntCollapse extends React.Component { } AntCollapse.defaultProps = { - prefixCls: prefixCls + prefixCls: 'ant-collapse', }; AntCollapse.Panel = Collapse.Panel; diff --git a/components/common/openAnimation.js b/components/common/openAnimation.js index dc6c529a5d..07dd6a4622 100644 --- a/components/common/openAnimation.js +++ b/components/common/openAnimation.js @@ -17,7 +17,7 @@ function animate(node, show, transitionName, done) { node.style.display = show ? 'block' : 'none'; velocity(node, transitionName, { duration: 240, - complete: complete, + complete, easing: 'easeInOutQuad' }); return { diff --git a/components/date-picker/PickerMixin.jsx b/components/date-picker/PickerMixin.jsx index 5f838e7482..aa567b6c6e 100644 --- a/components/date-picker/PickerMixin.jsx +++ b/components/date-picker/PickerMixin.jsx @@ -24,7 +24,7 @@ export default { parseDateFromValue(value) { if (value) { if (typeof value === 'string') { - return this.getFormatter().parse(value, {locale: this.getLocale()}); + return this.getFormatter().parse(value, { locale: this.getLocale() }); } else if (value instanceof Date) { let date = new GregorianCalendar(this.getLocale()); date.setTime(+value); diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index bdbe328079..e5aaa57414 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -25,7 +25,7 @@ export default React.createClass({ }; }, getInitialState() { - const {value, defaultValue} = this.props; + const { value, defaultValue } = this.props; const start = (value && value[0]) || defaultValue[0]; const end = (value && value[1]) || defaultValue[1]; return { @@ -35,7 +35,7 @@ export default React.createClass({ ] }; }, - mixins: [ PickerMixin ], + mixins: [PickerMixin], componentWillReceiveProps(nextProps) { if ('value' in nextProps) { const value = nextProps.value || []; @@ -62,14 +62,14 @@ export default React.createClass({ let defaultCalendarValue = new GregorianCalendar(locale); defaultCalendarValue.setTime(Date.now()); - const {disabledDate, showTime, size, startPlaceholder, endPlaceholder, - transitionName, disabled, popupStyle, align, style} = this.props; + const { disabledDate, showTime, size, startPlaceholder, endPlaceholder, + transitionName, disabled, popupStyle, align, style } = this.props; const state = this.state; const timePicker = showTime ? + placeholder={locale.lang.timePlaceholder} + transitionName="slide-up" /> : null; const calendarClassName = classNames({ @@ -77,13 +77,13 @@ export default React.createClass({ }); const calendar = ; + className={calendarClassName} + timePicker={timePicker} + disabledDate={disabledDate} + dateInputPlaceholder={[startPlaceholder, endPlaceholder]} + locale={locale.lang} + defaultValue={defaultCalendarValue} + showClear />; const pickerClass = classNames({ 'ant-calendar-picker': true, @@ -110,7 +110,7 @@ export default React.createClass({ onClose={this.toggleOpen} onChange={this.handleChange}> { - ({value}) => { + ({ value }) => { const start = value[0]; const end = value[1]; return ( diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index 0621175e02..beea4abec2 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -30,7 +30,7 @@ function createPicker(TheCalendar, defaultFormat) { value: this.parseDateFromValue(this.props.value || this.props.defaultValue) }; }, - mixins: [ PickerMixin ], + mixins: [PickerMixin], componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ @@ -58,8 +58,8 @@ function createPicker(TheCalendar, defaultFormat) { const timePicker = this.props.showTime ? + placeholder={locale.lang.timePlaceholder} + transitionName="slide-up" /> : null; const calendarClassName = classNames({ @@ -104,15 +104,15 @@ function createPicker(TheCalendar, defaultFormat) { onClose={this.toggleOpen} onChange={this.handleChange}> { - ({value}) => { + ({ value }) => { return ( + onChange={this.handleInputChange} + value={value && this.getFormatter().format(value)} + placeholder={placeholder} + style={this.props.style} + className={'ant-calendar-picker-input ant-input' + sizeClass}/> ); diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.jsx index ff40ffe80f..a986201455 100644 --- a/components/dropdown/dropdown-button.jsx +++ b/components/dropdown/dropdown-button.jsx @@ -17,7 +17,7 @@ const align = { export default React.createClass({ getDefaultProps() { return { - align: align, + align, type: 'default', }; }, diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index 1c44242cfa..8cb236f885 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -2,13 +2,13 @@ import React from 'react'; import Dropdown from 'rc-dropdown'; export default React.createClass({ - getDefaultProps: function () { + getDefaultProps() { return { transitionName: 'slide-up', prefixCls: 'ant-dropdown', }; }, - render: function () { + render() { const { overlay, ...otherProps } = this.props; const menu = React.cloneElement(overlay, { openTransitionName: 'zoom-big', diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index 724bbabae6..8c9e9ea08f 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; function prefixClsFn(prefixCls, ...args) { - return args.map((s)=> { + return args.map((s) => { return prefixCls + '-' + s; }).join(' '); } @@ -12,7 +12,7 @@ class FormItem extends React.Component { if (!colDef) { return ''; } - const {span, offset} = colDef; + const { span, offset } = colDef; const col = span ? 'col-' + span : ''; const offsetCol = offset ? ' col-offset-' + offset : ''; return col + offsetCol; @@ -61,7 +61,8 @@ class FormItem extends React.Component { const required = this.props.required ? 'required' : ''; return this.props.label ? ( -