diff --git a/README.md b/README.md index d16fca4f422fe7441d8915c5646f9014f67e1251..08626d4e5af656c825a34e81f7107c40b6137ef6 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,11 @@ 设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。 -![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg) +

+ + + +

## 特性 diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..552cb6cc9c8ffe111a1d131fbb4de8b35763e0c5 --- /dev/null +++ b/components/alert/demo/basic.md @@ -0,0 +1,14 @@ +# 基本 + +- order: 0 + +最简单的用法，适用于简短的警告提示。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); + +React.render( +, document.getElementById('components-alert-demo-basic')); +```` diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md new file mode 100644 index 0000000000000000000000000000000000000000..ec023b3ccc41155d7e582e70fdc31d0ee3f2188d --- /dev/null +++ b/components/alert/demo/closable.md @@ -0,0 +1,28 @@ +# 可关闭的警告提示 + +- order: 1 + +显示关闭按钮，点击可关闭警告提示。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); + +var onClose = function(e) { + console.log(e, '我要被关闭啦！'); +}; + +React.render(
+ + +
, document.getElementById('components-alert-demo-closable')); +```` + diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md new file mode 100644 index 0000000000000000000000000000000000000000..1c80a181be93749efe89a34c35847f3d82e00450 --- /dev/null +++ b/components/alert/demo/close-type.md @@ -0,0 +1,16 @@ +# 自定义关闭 + +- order: 4 + +可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); +var link = 不再提醒 + +React.render( + +, document.getElementById('components-alert-demo-close-type')); +```` diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md new file mode 100644 index 0000000000000000000000000000000000000000..1adc39f013dadbafa473f8a752fb2178a9dea52a --- /dev/null +++ b/components/alert/demo/description.md @@ -0,0 +1,28 @@ +# 含有辅助性文字介绍 + +- order: 2 + +含有辅助性文字介绍的警告提示。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); + +React.render(
+ + + + +
, document.getElementById('components-alert-demo-description')); +```` diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md new file mode 100644 index 0000000000000000000000000000000000000000..519501bc6696eb49b5e25b9831e3b8a0e8c60619 --- /dev/null +++ b/components/alert/demo/style.md @@ -0,0 +1,19 @@ +# 四种样式 + +- order: 3 + +共有四种样式`success`、`info`、`warn`、`error`。 + +--- + +````jsx +var Alert = require('antd/lib/alert'); + +React.render(
+ + + + +
, +document.getElementById('components-alert-demo-style')); +```` diff --git a/components/alert/index.jsx b/components/alert/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..663789bff1af6bae07feb4b976a498557fdbdb6b --- /dev/null +++ b/components/alert/index.jsx @@ -0,0 +1,76 @@ +import React from 'react'; + +export default React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-alert' + }; + }, + getInitialState() { + return { + display: 'block' + }; + }, + handleClose(e) { + if (this.props.onClose) { + this.props.onClose.call(this, e); + } + this.setState({ + display: 'none' + }); + }, + render () { + var iconClass = this.props.description ? + 'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-'; + switch (this.props.type) { + case 'success': + iconClass += 'check-circle'; + break; + case 'info': + iconClass += 'question-circle'; + break; + case 'error': + case 'warn': + iconClass += 'info-circle'; + break; + default: + iconClass += 'default'; + } + if (this.props.description) { + let close = this.props.closable ? + : ''; + return ( +
+ +

{this.props.message}

+ {this.props.description} + {close} +
+ ); + } else { + if (this.props.closeText) { + return ( +
+ + {this.props.message} + {this.props.closeText} +
+ ); + } else { + let close = this.props.closable ? + + + : ''; + return ( +
+ + {this.props.message} + {close} +
+ ); + } + } + } +}); diff --git a/components/alert/index.md b/components/alert/index.md index 184a8c2b0a1f499d7ad8d8406577101e698bd71f..b96c30153ac712d125a8909f99d3f2a9fcc56a9a 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -1,6 +1,24 @@ # Alert -- category: CSS -- chinese: 通知栏 +- category: Components +- chinese: 警告提示 --- + +警告提示，展现需要关注的信息。 + +## 何时使用 + +- 当系统需要向用户显示警告的信息时。 +- 始终展现，不会自动消失，用户可以点击关闭。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------- |--------------------------------------------------------- | ---------- |-------| +| type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 | +| closable | 可选参数，值为字符串`true`时显示关闭按钮，默认不显示 | String | 无 | +| closeText | 可选参数，自定义关闭 | String | 无 | +| message | 必选参数，警告提示内容 | String | 无 | +| description | 可选参数，警告提示的辅助性文字介绍 | String | 无 | +| onClose | 可选参数，关闭时触发的回调函数 | Function | 无 | diff --git a/components/button/index.md b/components/button/index.md index ea4cd11879c88b2b0c9e405b6b873410d968eedd..34ae648f1628179e081bc01ca842c5a78ae75790 100644 --- a/components/button/index.md +++ b/components/button/index.md @@ -1,8 +1,8 @@ # Button -- category: CSS +- category: Components - chinese: 按钮 -- order: 2 +- order: 0 --- diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..0af8cd4dd736695aaa822ba1f36060ce2d7fb18f --- /dev/null +++ b/components/enter-animation/demo/basic.md @@ -0,0 +1,69 @@ +# 默认 + +- order: 0 + +默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。 + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +var Test = React.createClass({ + render() { + return ( + +
+
+ + logo +
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
+
+ + ); + } +}); + +React.render( +, document.getElementById('components-enter-animation-demo-basic')); +```` + + diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md new file mode 100644 index 0000000000000000000000000000000000000000..aa645c433657b2686aab43cc951a19c5934a758e --- /dev/null +++ b/components/enter-animation/demo/enter-data.md @@ -0,0 +1,69 @@ +# 指定节点动画进场 + +- order: 1 + +通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。 + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +var Test = React.createClass({ + render() { + return ( + +
+
+ + logo +
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
我是标题
+
+
    +
  • +
  • +
  • +
+
+
我是标题
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
+
+
+
+ + ) + } +}); + +React.render( +, document.getElementById('components-enter-animation-demo-enter-data')); +```` + + diff --git a/components/enter-animation/index.jsx b/components/enter-animation/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..9c5f5ec9321c7f959661dd78ae144171d0dc7000 --- /dev/null +++ b/components/enter-animation/index.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import EnterAnimation from 'enter-animation'; + +export default class AntEnterAnimation extends React.Component { + render() { + return ; + } +} +AntEnterAnimation.to = EnterAnimation.to; diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md new file mode 100644 index 0000000000000000000000000000000000000000..5ed1928f866aec9bd8e60ed9ac52426c41405a5d --- /dev/null +++ b/components/enter-animation/index.md @@ -0,0 +1,234 @@ +# EnterAnimation + +- order: 11 +- category: Components +- chinese: 进场动画 +- cols: 1 + +--- + +通过简单的配置对一组元素添加串行的进场动画效果。 + +## 何时使用 + +- 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + +- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 + + +## 如何使用 + +一级子元素依次进场。 + +```jsx + +
依次进场
+
依次进场
+
依次进场
+
依次进场
+ +``` + +如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 + +```jsx + +
+
+ 依次进场 +
+
+
依次进场
+
依次进场，并修改动画效果
+
依次进场，并使用样式修改动画效果
+
没有动画
+ +``` + + +## API + +### + +|参数 |类型 |默认值 |详细 | +|-----------------|-------|-------------|----------------------------------------------------| +|type |string |`right` |执行动画的内置参数 | +|style |string |null |同上， style 的样式动画, `type` 有值，此项无效| +|delay |number |0 |整个区块的延时，以秒为单位| +|interval |number |0.1 |递增延时值，以秒为单位| + +### enter-data + +|参数 |类型 |默认值 |详细 | +|-----------------|-------|-----------|----------------------------------------------------| +|enter-data |object | `right` |子标签动画参数| + +#### enter-data={} + +|参数 |类型 |默认值 |详细 | +|-----------------|-----------------|----------------|----------------------------------------------------| +|type |string |`right` |内置动画样式：
`alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| +|style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效| +|direction |string |`enter` |动画进出场方向：`enter` `leave`| +|duration |number |0.5 |动画的时间,以秒为单位| +|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动| +|delay |number |0 |动画的延时，依照结构递增以上的 `interval`| +|queueId |number |0 |动画的线程| + +> 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。 + + diff --git a/components/form/index.md b/components/form/index.md index 8269fa8bed69bf28118f121458f7f5e9daced671..17cb7c1112fd0aebc02b68560b56cc4d2cf7f060 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -1,6 +1,6 @@ # Form -- category: CSS +- category: Components - chinese: 表单 - order: 3 diff --git a/components/iconfont/index.md b/components/iconfont/index.md index 97b15a0bf16089d8d1a41423ed27e61d0f8c1a99..28e05d77dc16d9aee70abc9fe5d5392fd1eb247b 100644 --- a/components/iconfont/index.md +++ b/components/iconfont/index.md @@ -1,8 +1,8 @@ # Iconfont -- category: CSS +- category: Components - chinese: 字体图标 -- order: 1 +- order: 0 - nodemos: true --- diff --git a/components/index.html b/components/index.html index b6101218373bc0b4e31cc91898ff4459c8171954..a39aae6ca134ff6f340fce8c294502917bbcd410 100644 --- a/components/index.html +++ b/components/index.html @@ -1 +1 @@ - + diff --git a/components/layout/index.md b/components/layout/index.md index df3997498d80c71eceba379c270b191367995695..9d3e96cf192a925184c420077bfad6a5ffdd2de9 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -1,6 +1,6 @@ # Layout -- category: CSS +- category: Components - chinese: 布局 - order: 0 diff --git a/components/modal/index.jsx b/components/modal/index.jsx index eabbde5b13bdcff6c5c5ca9899210b47b86afc7b..5d5d8d8d1af718ce78eacf337acf0d7c26a29da1 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -28,7 +28,7 @@ export default React.createClass({ this.setState({ confirmLoading: true }); - if (typeof this.props.onOk) { + if (typeof this.props.onOk === 'function') { this.props.onOk(); } }, diff --git a/components/motion/index.md b/components/motion/index.md deleted file mode 100644 index b4798ae6686e52b75f0d3026e8454a0647544b31..0000000000000000000000000000000000000000 --- a/components/motion/index.md +++ /dev/null @@ -1,39 +0,0 @@ -# Motion - -- category: CSS -- chinese: 组件动画 -- order: 4 -- cols: 1 - ---- - -## 组件的动画 - -通过设置组件的 `transitionName` 指定组件动画。 - -| 组件 | 中文名 | 采用动画 | -|--------------|---------------------|-------------------------------------------------| -| popover | 气泡浮出层 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| popconfirm | 气泡确认框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| tooltip | 文字提示框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| modal | 弹出框 | `zoom` | -| confirm | 弹出确认框 | `zoom` | -| message | 信息提示条 | `move-up` | -| dropdown | 下拉菜单 | `slide-up` | -| select | 选择框 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | - -## 缓动函数 -在以上组件的动画不适合时，请用以下缓动。 - -|名称 |参数 |说明与适用 | -|-------------------|------------------------------------------|---------------------------| -|@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-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);` |圆形缓动；适合元素移动； | diff --git a/components/pagination/index.md b/components/pagination/index.md index 7ccd688c526e298b542918138f1997b7e4772570..510615ff1e24cec98671df8a0d44cfa60d07231d 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -24,6 +24,6 @@ | pageSize | 每页条数 | Number | 10 | | onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | | showSizeChanger | 是否可以改变 pageSize | Bool | false | -| showQuickJump | 是否可以快速跳转至某页 | Bool | false | +| showQuickJumper | 是否可以快速跳转至某页 | Bool | false | | className | 当为「mini」时，是小尺寸分页 | String | ant-pagination | | simple | 当添加该属性时，显示为简单分页 | Object | 无 | diff --git a/components/radio/index.md b/components/radio/index.md index c742022a5cbb7fe6aac832793fb37d069a531a90..2d8f9498cce6ffedfe62df433b71f894c01a1e52 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -6,6 +6,8 @@ --- +单选框。 + ## 何时使用 - 用于在多个备选项中选中单个状态。 @@ -15,21 +17,18 @@ ## API ### Radio -单选框。 -| 参数 | 说明 | 类型 | 必选值 | 默认值 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | |----------------|------------------------------------------|------------|---------|--------| -| checked | 指定当前是否选中 | boolean | false | false | -| defaultChecked | 初始是否选中 | boolean | false | false | -| value | 组合时根据此项判定checked | -- |true | null| +| checked | 指定当前是否选中 | Boolean | | false | +| defaultChecked | 初始是否选中 | Boolean | | false | +| value | 根据 value 进行比较，判断是否选中 | String | | 无 | ### RadioGroup -单选框组合； - -| 参数 | 说明 | 类型 | 必选值 | 默认值 | -|----------------|------------------------------------------|------------|---------|--------| -| onChange | 变化时回调函数，组合时必须 | Function(e:Event) | false | null | -| value | 当前值 | | | | -| defaultValue | 初始值 | | | | | +单选框组合，用于包裹一组 `Radio`。 +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|----------------|----------------------------------|-------------------|--------|--------| +| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 | +| value | 用于设置当前选中的值 | String | 无 | 无 | diff --git a/components/select/index.jsx b/components/select/index.jsx index fd5f5b862eebac9571769367f4e0224194bd39ad..d54508a8a6925002824bafdee4627c14e8fcb2bb 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Select from 'rc-select'; -export default React.createClass({ +var AntSelect = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-select', @@ -16,3 +16,7 @@ export default React.createClass({ ); } }); + +AntSelect.Option = Select.Option; + +export default AntSelect; diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 1944b14a06ad548bce4eced5fc5b4b807e60da2f..613ea5cda66a9db51f498ce80e783c4dcb48d0e0 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -48,7 +48,7 @@ var dataSource = { // 和后台接口接收的参数进行适配 // 参数里提供了分页、筛选、排序的信息 getParams: function(pagination, filters, sorter) { - console.log(pagination, filters, sorter); + console.log('getParams 的参数是：', pagination, filters, sorter); var params = { pageSize: pagination.pageSize, currentPage: pagination.current, diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md new file mode 100644 index 0000000000000000000000000000000000000000..1d11a40bbe2e02c192e06b630d345fb6c1f7587f --- /dev/null +++ b/components/table/demo/nopagination.md @@ -0,0 +1,38 @@ +# 不显示分页 + +- order: 8 + +传入 pagination 为 false 即可。 + +--- + +````jsx +var Table = antd.Table; +var columns = [{ + title: '姓名', + dataIndex: 'name' +}, { + title: '年龄', + dataIndex: 'age' +}, { + title: '住址', + dataIndex: 'address' +}]; + +var data = [{ + name: '胡彦斌', + age: 32, + address: '西湖区湖底公园1号' +}, { + name: '胡彦祖', + age: 42, + address: '西湖区湖底公园1号' +}, { + name: '李大嘴', + age: 32, + address: '西湖区湖底公园1号' +}]; + +React.render( +, document.getElementById('components-table-demo-nopagination')); +```` diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index a463deac1fe93e42a68dfdb3d55bfd9d0030c47c..f90a5b33a5ab6bc9e3f74e1073638955c85c43f8 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -24,7 +24,7 @@ var columns = [{ }]; var data = []; -for (let i=0; i<18; i++) { +for (let i=0; i<46; i++) { data.push({ name: '李大嘴' + i, age: 32, @@ -33,7 +33,8 @@ for (let i=0; i<18; i++) { } var pagination = { - total: data.length + total: data.length, + current: 2 }; React.render(
diff --git a/components/table/index.jsx b/components/table/index.jsx index 628577b5ece0c0b39473b5312435611e2958b9dc..357d4b56fc9e5adb8f0bd05daa53a59b0f319cfa 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -9,34 +9,16 @@ import objectAssign from 'object-assign'; export default React.createClass({ getInitialState() { - // 支持两种模式 - if (Array.isArray(this.props.dataSource)) { - this.mode = 'local'; - // 保留原来的数据 - this.originDataSource = this.props.dataSource.slice(0); - } else { - this.mode = 'remote'; - this.dataSource = objectAssign({ - resolve: function(data) { - return data || []; - }, - getParams: function() {}, - getPagination: function() {} - }, this.props.dataSource); - } - let pagination; - if (this.props.pagination === false) { - pagination = false; - } else { - pagination = objectAssign({ - pageSize: 10, - total: this.props.dataSource.length - }, this.props.pagination); - } + this.initDataSource(this.props.dataSource); + + let noPagination = (this.props.pagination === false); + let pagination = this.initPagination(this.props.pagination); + return { selectedRowKeys: [], loading: false, pagination: pagination, + noPagination: noPagination, data: [] }; }, @@ -48,6 +30,44 @@ export default React.createClass({ size: 'normal' }; }, + componentWillReceiveProps(nextProps) { + if ('pagination' in nextProps) { + let noPagination = (nextProps.pagination === false); + this.setState({ + pagination: this.initPagination(nextProps.pagination), + noPagination: noPagination + }); + } + if ('dataSource' in nextProps) { + this.initDataSource(nextProps.dataSource); + this.setState({ + data: nextProps.dataSource + }); + } + }, + initDataSource(dataSource) { + // 支持两种模式 + if (Array.isArray(dataSource)) { + this.mode = 'local'; + // 保留原来的数据 + this.originDataSource = dataSource.slice(0); + } else { + this.mode = 'remote'; + this.dataSource = objectAssign({ + resolve: function(data) { + return data || []; + }, + getParams: function() {}, + getPagination: function() {} + }, dataSource); + } + }, + initPagination(pagination) { + return objectAssign({ + pageSize: 10, + total: this.props.dataSource.length + }, pagination); + }, toggleSortOrder(order, column) { let sortColumn = this.state.sortColumn; let sortOrder = this.state.sortOrder; @@ -137,9 +157,13 @@ export default React.createClass({ this.props.rowSelection.onSelectAll(checked, selectedRows); } }, - handlePageChange: function(current) { - let pagination = this.state.pagination; - pagination.current = current || 1; + handlePageChange(current) { + let pagination = this.state.pagination || {}; + if (current) { + pagination.current = current; + } else { + pagination.current = pagination.current || 1; + } this.setState({ pagination: pagination }, this.fetch); @@ -218,7 +242,7 @@ export default React.createClass({ }, renderPagination() { // 强制不需要分页 - if (this.props.pagination === false) { + if (this.state.noPagination) { return ''; } let classString = 'ant-table-pagination'; @@ -283,7 +307,7 @@ export default React.createClass({ let data = this.props.dataSource; let current, pageSize; // 如果没有分页的话，默认全部展示 - if (this.props.pagination === false) { + if (this.state.noPagination) { pageSize = Number.MAX_VALUE; current = 1; } else { @@ -305,12 +329,17 @@ export default React.createClass({ }); } // 分页 - data = data.filter(function(item, i) { - if (i >= (current - 1) * pageSize && - i < current * pageSize) { - return item; - } - }); + // --- + // 当数据量少于每页数量时，直接设置数据 + // 否则进行读取分页数据 + if (data.length > pageSize || pageSize === Number.MAX_VALUE) { + data = data.filter(function(item, i) { + if (i >= (current - 1) * pageSize && + i < current * pageSize) { + return item; + } + }); + } // 完成数据 this.setState({ data: data diff --git a/design/natural-motion.md b/design/natural-motion.md deleted file mode 100644 index 29f0dd32a46a59e994dcd5ba6c1fef5f187c4c0a..0000000000000000000000000000000000000000 --- a/design/natural-motion.md +++ /dev/null @@ -1,112 +0,0 @@ -# 自然运动 - -- category: 动画 -- order: 0 - ---- - -现实物体照着一定节奏移动，并不是一开始就移动很快的。 - -当我们打开现代家具的门或抽屉时，首先会让它加速，然后慢下来。 - -当电梯开关门时，它在打开或关闭时都有一段缓冲带，是先加速，然后慢下来。 - -当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。 - - -### 质量和重量 - -在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。 - -动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。 - -#### 自然缓动 -不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数； - -如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动； - - - -
-
- - - -上图所示缓动函数：红：Linear 蓝：easeInOutQuad； - - - - -#### 出入动画 -不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调,反相只出不进也一样； - -所以有动画的进场必须要有动画的出场，包括导航上的动画； - -
-
- - - -上图所示缓动函数：红：easeInOutQuad 蓝：easeInOutCubic； - - - - -##### 场外出入 -场外出入需要考虑力量与引力的关系，如向空中抛物体时，开始时力量大于引力时，速度是最快的， - -到达一定高度后，随着力量的减少，速度也跟随着降低，物体达到最高点后，力量等于引力或小于引力时，物体随之下降； - -所以在快到达最高点和掉下来时有一定缓冲带；不要做图示红色球体下降时的缓动； - -
-
- - - -上图所示缓动函数：红：easeOutQuad,easeOutQuad 蓝：easeOutCubic,easeInCubic； - -示例组件：Message全局提示,Dropdown下拉菜单 - -#### 弹性动画 - -1.如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹,弹动几次后才停下。 - - 动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素; - -2.如球类物体掉地上的后，反弹几次后停止; - -注: -1.曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换; -2.弹性动画最好结合alpha; -
-
- - - -上图所示缓动函数：红：easeOutBounce,easeInOutQuad 蓝：easeOutBack,easeInBack； diff --git a/design/page-transition.md b/design/page-transition.md deleted file mode 100644 index 4e03e32e6a4202990e5052b091a72dca1a4d405b..0000000000000000000000000000000000000000 --- a/design/page-transition.md +++ /dev/null @@ -1,63 +0,0 @@ -# 页面转换 - -- category: 动画 -- chinese: 页面转换 -- order: 2 - ---- - -###单页面转场动画 - -从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - -####视觉连贯性 - -####三类元素（Adding ,Receding,Normal) - -Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - -Receding:  与当前页无关的信息元素应采用适当方式移除 - -Normal: 指那些从转场开始到结束都没有发生变化的信息元素 - - - -#### 转场动画 - -大页面转场可采用左出右入的形式 - -小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一； - -如不是单页面，页面动画可以为只右入和间隔性出现； - - - -
- -
- - -####可折叠面板 - -对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 - -1.被展开的信息区域内容按照一定的路劲依次进场。 - -2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。 - - - - -
- -
- - -####弹出框动效 - - -从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。 - -
- -
diff --git a/design/responsive.md b/design/responsive.md deleted file mode 100644 index afe9d2f8a3e1eaf41003e27e89149d2f4bb34632..0000000000000000000000000000000000000000 --- a/design/responsive.md +++ /dev/null @@ -1,104 +0,0 @@ -# 响应交互 - -- category: 动画 -- order: 1 - ---- - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -如搜索框，当你点击准备输入时，icon将会跑到右边方便点击，当然你按回车也是可以提交表单的；在你没有输入文字时，icon又会恢愎到原来的地置，但当你输入了文字后，icon将会停留在右边； - -### 按钮类表面效果 - -按钮上的hover或click效果，随着你的鼠标事件而改变自身或增加元素在按钮上； - -以下按钮对组件按钮的修改，只做示例，具体还需看组件； - - -
-
-

1.按钮表面效果；

-
-我是按钮 - -点击涟漪按钮 - - -点击涟漪按钮 - - -
-
-
-

2.无素结合切换;

-
- - -
-
-
- -### 元素类呈现效果 - -元素呈现指点击或滑过展现相关的内容或提示，如下拉菜单或弹出框等； - -注：物体弹出点要从点击点出现，不要做凭空出现； - - -
- -
-

1.icon菜单(点放大模式)

-
- - - - -
-
- -
-

2.下拉菜单(下滑模式)

-
- - -
- -
-
-
    -
  • 第一排文字元素
    • -
  • 第二排文字元素
    • -
  • 第三排文字元素
    • -
  • 第四排文字元素
    • -
-
-
-
- - -
-
- -
diff --git a/index.js b/index.js index 13d5197aeb3bec4d29037072f79cf65b951ec495..f21dc4ba1f616d19e02e3f8646c69fc927805d00 100644 --- a/index.js +++ b/index.js @@ -22,9 +22,11 @@ var antd = { Collapse: require('./components/collapse'), message: require('./components/message'), Slider: require('./components/slider'), + EnterAnimation: require('./components/enter-animation'), Radio: require('./components/radio'), RadioGroup: require('./components/radio/group'), - Notification: require('./components/notification') + Notification: require('./components/notification'), + Alert: require('./components/alert') }; module.exports = antd; diff --git a/package.json b/package.json index c1390f937788381f7ffbe1c21dbfbb1b8972a85f..f320d2c4e7eb18d01ec4a7bd3f5de2d354c355d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.7.2", + "version": "0.7.3-beta6", "stableVersion": "0.7.2", "title": "Ant Design", "description": "一个设计语言&前端框架", @@ -32,6 +32,7 @@ ], "license": "MIT", "dependencies": { + "enter-animation": "~0.1.3", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0", @@ -56,12 +57,12 @@ }, "devDependencies": { "autoprefixer-loader": "~2.0.0", - "babel": "~5.6.14", - "babel-core": "~5.4.7", - "babel-loader": "~5.1.3", + "babel": "^5.8.12", + "babel-core": "^5.8.12", + "babel-loader": "^5.3.2", "css-animation": "~1.0.3", "css-loader": "^0.14.1", - "eslint": "~0.22.1", + "eslint": "^0.24.1", "eslint-plugin-react": "~2.5.0", "extract-text-webpack-plugin": "^0.8.1", "gh-pages": "~0.3.1", diff --git a/site/templates/layout.html b/site/templates/layout.html index d22631310b08c77854512236755004d88c5dc40e..60276c01a24f7be5891c4239797eb5cae4083210 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -95,8 +95,8 @@
  • 使用
    • -
  • - 设计 +
  • + 设计
  • 组件 diff --git a/site/theme.js b/site/theme.js index c3d3077711740b93ebbf6657ffdfbced9a8807a9..24c6b01a53617fde74f96747b6d26bc99a9c4e09 100644 --- a/site/theme.js +++ b/site/theme.js @@ -58,7 +58,10 @@ module.exports = function(nico) { } })).filter(function(n){ return n != undefined }); categories = categories.sort(function(a, b) { - return a.length - b.length; + var cats = ['文字', '色彩', '动画']; + a = cats.indexOf(a); + b = cats.indexOf(b); + return a - b; }) Categories[rootDirectory] = categories; return categories; diff --git a/spec/color.md b/spec/color.md new file mode 100644 index 0000000000000000000000000000000000000000..cee8d5349b03bacb69e6ea941acfe55839f2ec71 --- /dev/null +++ b/spec/color.md @@ -0,0 +1,6 @@ +# 色系和交互 + +- category: 色彩 +- order: 0 + +--- diff --git a/spec/easing.md b/spec/easing.md new file mode 100644 index 0000000000000000000000000000000000000000..156de986436d8c7055d38837785f915166f8a573 --- /dev/null +++ b/spec/easing.md @@ -0,0 +1,125 @@ +# 缓动函数 + +- category: 动画 +- order: 1 + +--- + +现实物体照着一定节奏移动，并不是一开始就移动很快的。 + +当我们打开现代家具的门或抽屉时，首先会让它加速，然后慢下来。 + +当电梯开关门时，它在打开或关闭时都有一段缓冲带，是先加速，然后慢下来。 + +当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。 + + +### 质量和重量 + +在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。 + +动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。 + +#### 自然缓动 + +不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。 + +如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。 + + + +
    + + + + +上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。 + + +#### 出入动画 + +不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。 + +所以有动画的进场必须要有动画的出场，包括导航上的动画。 + +
    + + + +上图所示缓动函数：红 `easeInOutQuad`，蓝 `easeInOutCubic`。 + + +##### 场外出入 + +场外出入需要考虑力量与引力的关系，如向空中抛物体时，开始时力量大于引力时，速度是最快的， + +到达一定高度后，随着力量的减少，速度也跟随着降低，物体达到最高点后，力量等于引力或小于引力时，物体随之下降； + +所以在快到达最高点和掉下来时有一定缓冲带；不要做图示红色球体下降时的缓动； + +
    + + + +上图所示缓动函数：红 `easeOutQuad` `easeOutQuad`，蓝 `easeOutCubic` `easeInCubic`。 + +示例组件：[Message 全局提示](/components/message/)，[Dropdown 下拉菜单](/components/dropdown/)。 + +#### 弹性动画 + +1. 如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹，弹动几次后才停下。 + + 动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素。 + +2. 如球类物体掉地上的后，反弹几次后停止。 + + - 曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。 + - 弹性动画最好结合alpha。 + +
    + + + +上图所示缓动函数：红 `easeOutBounce` `easeInOutQuad`，蓝 `easeOutBack` `easeInBack`。 + + +## 缓动函数 + +Ant Design 提供了一套缓动函数规范动画行为。 + +|名称 |参数 |说明与适用 | +|-------------------|------------------------------------------|---------------------------| +|@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-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);` |圆形缓动；适合元素移动； | diff --git a/spec/font.md b/spec/font.md new file mode 100644 index 0000000000000000000000000000000000000000..a0b8fa2d0913679cf1f9079b4ea87758da139603 --- /dev/null +++ b/spec/font.md @@ -0,0 +1,7 @@ +# 字体 + +- category: 文字 +- order: 0 + +--- + diff --git a/components/motion/demo/basic.md b/spec/motion.md similarity index 77% rename from components/motion/demo/basic.md rename to spec/motion.md index 1bf0b1d66657907ffeb6ddd7e7488f8369d5847c..1cbe4e33ee35dec6a3bb2341bbb65402cf3bcdae 100644 --- a/components/motion/demo/basic.md +++ b/spec/motion.md @@ -1,12 +1,32 @@ -# 基本 +# 组件动画 +- category: 动画 - order: 0 -动画效果示例。 - --- -````jsx +Ant Design 提供了一些预设的组件动画样式。 + +
    + +## 组件动画 + +通过设置组件的 `transitionName` 指定组件动画。 + +| 组件 | 中文名 | 采用动画 | +|--------------|---------------------|-------------------------------------------------| +| popover | 气泡浮出层 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| popconfirm | 气泡确认框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| tooltip | 文字提示框 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| modal | 弹出框 | `zoom` | +| confirm | 弹出确认框 | `zoom` | +| message | 信息提示条 | `move-up` | +| dropdown | 下拉菜单 | `slide-up` | +| select | 选择框 | `slide-up` | +| datepicker | 日期选择框 | `slide-up` | + + +`````jsx var cssAnimation = require('css-animation'); var motions = []; motions = motions.concat([[{ @@ -196,7 +216,7 @@ var Test = React.createClass({ }); React.render(, document.getElementById('components-motion-demo-basic')); -```` +````` + diff --git a/spec/page-transition.md b/spec/page-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..9622dbb4f05d7a4b89a4decaa646ff5bfe01cf93 --- /dev/null +++ b/spec/page-transition.md @@ -0,0 +1,57 @@ +# 转场动画 + +- category: 动画 +- order: 1 + +--- + +### 单页面转场动画 + +从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 + +### 视觉连贯性三元素 + +- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 + +- Receding:  与当前页无关的信息元素应采用适当方式移除。 + +- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 + + +### 转场动画 + +大页面转场可采用左出右入的形式。 + +小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一。 + +如不是单页面，页面动画可以为只右入和间隔性出现。 + + + + +
    + +
    + + +### 可折叠面板 + +对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 + +1.被展开的信息区域内容按照一定的路劲依次进场。 + +2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。 + + +
    + +
    + + +### 弹出框动效 + +从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。 + +
    + +
    diff --git a/spec/typography.md b/spec/typography.md new file mode 100644 index 0000000000000000000000000000000000000000..51286993d4bbe7f6336dc1dd6ffc8bbd164f6b88 --- /dev/null +++ b/spec/typography.md @@ -0,0 +1,6 @@ +# 排版 + +- category: 文字 +- order: 1 + +--- diff --git a/static/motion.js b/static/motion.js index de5f0b9758f9d040b70edc46726f438838db7e07..7e360a2511b67a8251e44e6df012e4e03d44ca90 100644 --- a/static/motion.js +++ b/static/motion.js @@ -647,7 +647,7 @@ $(function (){ var video=self.videoBox.eq(i).find("video"); video.css({"width":"100%"}); video.append(svg); - svg.css({"position":"absolute","top":0}); + svg.css({"position":"absolute","top":0,"left":0}); var playBox=_playBox(svg); svg.addChild(playBox); playBox.addEventListener("click",function (e){ @@ -670,4 +670,4 @@ $(function (){ } }; motionVideo.init(); -}); \ No newline at end of file +}); diff --git a/static/style.css b/static/style.css index d5042ddec832b927b2743bad65f5f0609df16a02..16551f50bd7cdd5a3e36c0cda8dace18034d1d06 100644 --- a/static/style.css +++ b/static/style.css @@ -477,6 +477,7 @@ footer ul li > a { -webkit-animation: xRightMatrix .5s ease-out; animation: xRightMatrix .5s ease-out; background: #fff; + min-height: 500px; } .main-container-center { diff --git a/style/components/alert.less b/style/components/alert.less new file mode 100644 index 0000000000000000000000000000000000000000..1afd6f82546db329797df0e8e6226637c3f0e3a2 --- /dev/null +++ b/style/components/alert.less @@ -0,0 +1,155 @@ +@import "../mixins/index"; + +@alertPrefixClass: ~"@{css-prefix}alert"; +@alertTitlePrefixClass: ~"@{css-prefix}alert-with-description"; + +.@{alertPrefixClass} { + position: relative; + padding: 8px 8px 8px 16px; + border-radius: @border-radius-base; + color: @text-color; + font-size: 12px; + line-height: 16px; + margin-bottom: 10px; + + &-icon { + margin-right: 8px; + font-size: 14px; + } + + &-description { + font-size: 12px; + line-height: 16px; + } + + &-success { + border: 1px solid tint(@success-color, 80%); + background-color: tint(@success-color, 90%); + .anticon { + color: @success-color; + } + } + + &-info { + border: 1px solid tint(@primary-color, 80%); + background-color: tint(@primary-color, 90%); + .anticon { + color: @primary-color; + } + } + + &-warn { + border: 1px solid tint(@warning-color, 80%); + background-color: tint(@warning-color, 90%); + .anticon { + color: @warning-color; + } + } + + &-error { + border: 1px solid tint(@error-color, 80%); + background-color: tint(@error-color, 90%); + .anticon { + color: @error-color; + } + } + + &-close-icon, &-with-description-close-icon { + .iconfont-size-under-12px(10px); + position: absolute; + right: 8px; + top: 50%; + margin-top: -6px; + transition: color .3s ease; + color: #999; + width: 12px; + height: 12px; + overflow: hidden; + + &-x { + position: absolute; + top: -3px; + &:before { + font-weight: 700; + text-shadow: 0 1px 0 #fff; + content: "\e61e"; + font-family: "anticon"; + } + } + + &:hover { + color: #444; + } + } + + &-close-text { + position: absolute; + right: 16px; + } + + &-with-description { + padding: 16px 16px 16px 69px; + position: relative; + border-radius: @border-radius-base; + margin-bottom: 10px; + color: @text-color; + + &-icon { + position: absolute; + top: 50%; + left: 24px; + margin-top: -22px; + font-size: 29px; + } + + &-close-icon { + position: absolute; + top: 17px; + right: 16px; + cursor: pointer; + .iconfont-size-under-12px(10px); + } + + &-message { + font-size: 14px; + color: @text-color; + } + + &-description { + font-size: 12px; + color: @legend-color; + } + + &-success { + border: 1px solid tint(@success-color, 80%); + background-color: tint(@success-color, 90%); + .anticon { + color: @success-color; + } + } + + &-info { + border: 1px solid tint(@primary-color, 80%); + background-color: tint(@primary-color, 90%); + .anticon { + color: @primary-color; + } + } + + &-warn { + border: 1px solid tint(@warning-color, 80%); + background-color: tint(@warning-color, 90%); + .anticon { + color: @warning-color; + } + } + + &-error { + border: 1px solid tint(@error-color, 80%); + background-color: tint(@error-color, 90%); + .anticon { + color: @error-color; + } + } + } +} diff --git a/style/components/confirm.less b/style/components/confirm.less index 1b3c0327fcbdd32fb78614efe7943c53f34ba6ea..a9fa33dbb8703dcbe621f259177fbce9d45d41cc 100644 --- a/style/components/confirm.less +++ b/style/components/confirm.less @@ -13,12 +13,14 @@ .@{confirmPrefixCls}-body { .@{confirmPrefixCls}-title { color: @text-color; + font-weight: bold; + font-size: 14px; } .@{confirmPrefixCls}-content { margin-left: 37px; - font-size: 12px; - color: #999; + font-size: @font-size-base; + color: @text-color; } .anticon { diff --git a/style/components/dialog/Dialog.less b/style/components/dialog/Dialog.less index 5eb6196bb82f0ef2da0e4151aac72e760bffb66b..006783aedfc25cdcef3378d1e87a45cc418e2aca 100644 --- a/style/components/dialog/Dialog.less +++ b/style/components/dialog/Dialog.less @@ -40,10 +40,9 @@ line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; - filter: alpha(opacity=20); - opacity: .2; text-decoration: none; - transition: opacity .3s ease; + transition: color .3s ease; + color: #999; &-x { position: absolute; @@ -57,8 +56,7 @@ height: 12px; .iconfont-size-under-12px(10px); line-height: 12px; - color:#000; - top:18px; + top: 18px; right: 18px; &:before { @@ -69,9 +67,7 @@ } &:hover { - color:#000; - opacity: 1; - filter: alpha(opacity=100); + color: #444; text-decoration: none; } } diff --git a/style/components/index.less b/style/components/index.less index 57251051c99687ac458c2d5fac669a15a5452b88..284e6605ba65a6d315fae864babb0d0240e565cf 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -25,3 +25,4 @@ @import "slider"; @import "radio"; @import "notification"; +@import "alert";