mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
merge from master
This commit is contained in:
afc163
commit
a16903009e
75
CHANGELOG.md
75
CHANGELOG.md
@ -9,8 +9,13 @@
|
||||
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
|
||||
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
|
||||
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
|
||||
- 修复 Transfer 搜索功能失效的问题。
|
||||
- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
|
||||
- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
|
||||
|
||||
## 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)
|
||||
@ -24,14 +29,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`。
|
||||
@ -109,11 +118,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) 报错问题，并增加了相关演示。
|
||||
@ -121,7 +134,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)。
|
||||
@ -129,7 +144,9 @@
|
||||
- 对演示和样式代码增加了 lint 检查。
|
||||
|
||||
|
||||
## 0.10.2 `2015-11-25`
|
||||
## 0.10.2
|
||||
|
||||
`2015-11-25`
|
||||
|
||||
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
|
||||
- 优化 Badge 动画效果。
|
||||
@ -140,7 +157,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` 来使用。
|
||||
@ -153,7 +172,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/) 组件。
|
||||
@ -223,12 +244,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)
|
||||
@ -236,7 +261,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 下的兼容性问题。
|
||||
@ -255,7 +282,9 @@
|
||||
* 部分组件交互和视觉效果修正。
|
||||
|
||||
|
||||
## 0.9.0 `2015-09-14`
|
||||
## 0.9.0
|
||||
|
||||
`2015-09-14`
|
||||
|
||||
* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
|
||||
* 优化弹出层类组件的动画效果，使其更加流畅。
|
||||
@ -294,7 +323,9 @@
|
||||
* 支持和 react-router 结合使用。
|
||||
|
||||
|
||||
## 0.8.0 `2015-08-25`
|
||||
## 0.8.0
|
||||
|
||||
`2015-08-25`
|
||||
|
||||
这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
|
||||
|
||||
@ -306,12 +337,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 组件。
|
||||
@ -319,14 +354,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/) 和入门文档。
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要表示开关状态/两种状态之间的切换时；
|
||||
- 和 `switch`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
|
||||
- 在一组可选项中进行多项选择时；
|
||||
- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -64,6 +64,7 @@ function createPicker(TheCalendar, defaultFormat) {
|
||||
|
||||
const calendarClassName = classNames({
|
||||
['ant-calendar-time']: this.props.showTime,
|
||||
['ant-calendar-month']: MonthCalendar === TheCalendar,
|
||||
});
|
||||
|
||||
const calendar = (
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
ul.anticons-list {
|
||||
margin: 20px 0;
|
||||
list-style: none;
|
||||
width: 120%;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul.anticons-list li {
|
||||
@ -152,7 +151,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
|
||||
|
||||
const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
|
||||
|
||||
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
|
||||
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
|
||||
|
||||
|
||||
ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
## 设计理念
|
||||
|
||||
<div class="row demo-row" >
|
||||
<div class="row demo-row">
|
||||
<div class="col-24 demo-col demo-col-1">
|
||||
100%
|
||||
</div>
|
||||
|
||||
78
components/modal/Modal.jsx
Normal file
78
components/modal/Modal.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'rc-dialog';
|
||||
import { Dom } from 'rc-util';
|
||||
import Button from '../button';
|
||||
|
||||
function noop() {}
|
||||
|
||||
let mousePosition;
|
||||
let mousePositionEventBinded;
|
||||
|
||||
let AntModal = React.createClass({
|
||||
getDefaultProps() {
|
||||
return {
|
||||
prefixCls: 'ant-modal',
|
||||
onOk: noop,
|
||||
onCancel: noop,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
width: 520,
|
||||
transitionName: 'zoom',
|
||||
maskAnimation: 'fade',
|
||||
confirmLoading: false,
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.props.onCancel();
|
||||
},
|
||||
|
||||
handleOk() {
|
||||
this.props.onOk();
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
if (mousePositionEventBinded) {
|
||||
return;
|
||||
}
|
||||
// 只有点击事件支持从鼠标位置动画展开
|
||||
Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
|
||||
mousePosition = {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
// 20ms 内发生过点击事件，则从点击位置动画展示
|
||||
// 否则直接 zoom 展示
|
||||
// 这样可以兼容非点击方式展开
|
||||
setTimeout(() => mousePosition = null, 20);
|
||||
});
|
||||
mousePositionEventBinded = true;
|
||||
},
|
||||
|
||||
render() {
|
||||
let props = this.props;
|
||||
let defaultFooter = [
|
||||
<Button key="cancel"
|
||||
type="ghost"
|
||||
size="large"
|
||||
onClick={this.handleCancel}>
|
||||
{props.cancelText}
|
||||
</Button>,
|
||||
<Button key="confirm"
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={props.confirmLoading}
|
||||
onClick={this.handleOk}>
|
||||
{props.okText}
|
||||
</Button>
|
||||
];
|
||||
let footer = props.footer || defaultFooter;
|
||||
return (
|
||||
<Dialog onClose={this.handleCancel} footer={footer} {...props}
|
||||
visible={props.visible} mousePosition={mousePosition} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default AntModal;
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Dialog from './index';
|
||||
import Dialog from './Modal';
|
||||
import Icon from '../icon';
|
||||
import Button from '../button';
|
||||
import objectAssign from 'object-assign';
|
||||
|
||||
@ -1,82 +1,6 @@
|
||||
import React from 'react';
|
||||
import Dialog from 'rc-dialog';
|
||||
import { Dom } from 'rc-util';
|
||||
import objectAssign from 'object-assign';
|
||||
import AntModal from './Modal';
|
||||
import confirm from './confirm';
|
||||
import Button from '../button';
|
||||
|
||||
function noop() {}
|
||||
|
||||
let mousePosition;
|
||||
let mousePositionEventBinded;
|
||||
|
||||
let AntModal = React.createClass({
|
||||
getDefaultProps() {
|
||||
return {
|
||||
prefixCls: 'ant-modal',
|
||||
onOk: noop,
|
||||
onCancel: noop,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
width: 520,
|
||||
transitionName: 'zoom',
|
||||
maskAnimation: 'fade',
|
||||
confirmLoading: false,
|
||||
visible: false,
|
||||
closable: true,
|
||||
};
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.props.onCancel();
|
||||
},
|
||||
|
||||
handleOk() {
|
||||
this.props.onOk();
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
if (mousePositionEventBinded) {
|
||||
return;
|
||||
}
|
||||
// 只有点击事件支持从鼠标位置动画展开
|
||||
Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
|
||||
mousePosition = {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
// 20ms 内发生过点击事件，则从点击位置动画展示
|
||||
// 否则直接 zoom 展示
|
||||
// 这样可以兼容非点击方式展开
|
||||
setTimeout(() => mousePosition = null, 20);
|
||||
});
|
||||
mousePositionEventBinded = true;
|
||||
},
|
||||
|
||||
render() {
|
||||
let props = this.props;
|
||||
let defaultFooter = [
|
||||
<Button key="cancel"
|
||||
type="ghost"
|
||||
size="large"
|
||||
onClick={this.handleCancel}>
|
||||
{props.cancelText}
|
||||
</Button>,
|
||||
<Button key="confirm"
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={props.confirmLoading}
|
||||
onClick={this.handleOk}>
|
||||
{props.okText}
|
||||
</Button>
|
||||
];
|
||||
let footer = props.footer || defaultFooter;
|
||||
return (
|
||||
<Dialog onClose={this.handleCancel} footer={footer} {...props}
|
||||
visible={props.visible} mousePosition={mousePosition} />
|
||||
);
|
||||
}
|
||||
});
|
||||
import objectAssign from 'object-assign';
|
||||
|
||||
AntModal.info = function (props) {
|
||||
const config = objectAssign({}, props, {
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
| onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 | function(value, option) | 无 |
|
||||
| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
|
||||
| allowClear | 显示清除按钮 | boolean | false |
|
||||
| onSearch | 文本框值变化时回调 | function(value: String) | |
|
||||
| placeholder | 选择框默认文字 | string | 无 |
|
||||
| searchPlaceholder | 搜索框默认文字 | string | 无 |
|
||||
|
||||
@ -81,6 +81,22 @@ class TransferList extends Component {
|
||||
[prefixCls + '-with-footer']: !!footerDom,
|
||||
});
|
||||
|
||||
const showItems = dataSource.map((item) => {
|
||||
// apply filter
|
||||
const itemText = this.props.render(item);
|
||||
const filterResult = this.matchFilter(itemText, filter);
|
||||
const renderedText = this.props.render(item);
|
||||
|
||||
if (filterResult) {
|
||||
return (
|
||||
<li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
|
||||
<Checkbox checked={checkedKeys.some(key => key === item.key)} />
|
||||
{renderedText}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}).filter(item => !!item);
|
||||
|
||||
return (
|
||||
<div className={listCls} {...this.props}>
|
||||
<div className={`${prefixCls}-header`}>
|
||||
@ -89,50 +105,18 @@ class TransferList extends Component {
|
||||
checked: checkStatus === 'all',
|
||||
checkPart: checkStatus === 'part',
|
||||
checkable: <span className={`ant-transfer-checkbox-inner`}></span>
|
||||
})}
|
||||
<span className={`${prefixCls}-header-selected`}>
|
||||
<span>
|
||||
{
|
||||
(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length
|
||||
} 条
|
||||
</span>
|
||||
<span className={`${prefixCls}-header-title`}>{titleText}</span>
|
||||
</span>
|
||||
})}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length} 条</span>
|
||||
<span className={`${prefixCls}-header-title`}>{titleText}</span></span>
|
||||
</div>
|
||||
{ bodyDom ? bodyDom :
|
||||
<div className={
|
||||
showSearch ?
|
||||
`${prefixCls}-body ${prefixCls}-body-with-search` :
|
||||
`${prefixCls}-body`
|
||||
}>
|
||||
<div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
|
||||
{ showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
|
||||
<Search prefixCls={`${prefixCls}-search`}
|
||||
onChange={this.handleFilter.bind(this)}
|
||||
handleClear={this.handleClear.bind(this)}
|
||||
value={filter} />
|
||||
<Search prefixCls={`${prefixCls}-search`} onChange={this.handleFilter.bind(this)} handleClear={this.handleClear.bind(this)} value={filter} />
|
||||
</div> : null }
|
||||
<Animate component="ul"
|
||||
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
||||
transitionLeave={false}>
|
||||
{dataSource.length > 0 ?
|
||||
dataSource.map((item) => {
|
||||
// apply filter
|
||||
const itemText = this.props.render(item);
|
||||
const filterResult = this.matchFilter(itemText, filter);
|
||||
|
||||
const renderedText = this.props.render(item);
|
||||
|
||||
if (filterResult) {
|
||||
return (
|
||||
<li onClick={this.handleSelect.bind(this, item)}
|
||||
key={item.key} title={renderedText}>
|
||||
<Checkbox checked={checkedKeys.some(key => key === item.key)} />
|
||||
{renderedText}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}) : <div className={`${prefixCls}-body-not-found`}>Not Found</div>
|
||||
}
|
||||
{showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>Not Found</div>}
|
||||
</Animate>
|
||||
</div>}
|
||||
{ footerDom ? <div className={`${prefixCls}-footer`}>
|
||||
|
||||
@ -12,16 +12,19 @@ class Search extends Component {
|
||||
this.props.onChange(e);
|
||||
}
|
||||
|
||||
handleClear(e) {
|
||||
e.preventDefault();
|
||||
this.props.handleClear(e);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { placeholder, value, prefixCls } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<input placeholder={placeholder} className={ prefixCls + ' ant-input' }
|
||||
value={ value } ref="input"
|
||||
<input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
|
||||
onChange={this.handleChange.bind(this)}/>
|
||||
{ value && value.length > 0 ?
|
||||
<a href="javascirpt:;" className={ prefixCls + '-action' }
|
||||
onClick={this.props.handleClear}>
|
||||
<a href="#" className={ prefixCls + '-action' } onClick={this.handleClear.bind(this)}>
|
||||
<Icon type="cross-circle" />
|
||||
</a>
|
||||
: <span className={ prefixCls + '-action' }><Icon type="search" /></span>
|
||||
@ -34,12 +37,14 @@ class Search extends Component {
|
||||
Search.defaultProps = {
|
||||
placeholder: '请输入搜索内容',
|
||||
onChange: noop,
|
||||
handleClear: noop,
|
||||
};
|
||||
|
||||
Search.propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
onChange: PropTypes.func
|
||||
onChange: PropTypes.func,
|
||||
handleClear: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Search;
|
||||
|
||||
56
docs/pattern/advanced-search.md
Normal file
56
docs/pattern/advanced-search.md
Normal file
@ -0,0 +1,56 @@
|
||||
# 高级搜索
|
||||
|
||||
- category: 6
|
||||
- order: 6
|
||||
|
||||
---
|
||||
|
||||
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
|
||||
|
||||
## 常规型
|
||||
|
||||
### 交互
|
||||
|
||||
<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
|
||||
|
||||
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
|
||||
|
||||
『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
|
||||
|
||||
当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
|
||||
|
||||
### 排列规则
|
||||
|
||||
<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
|
||||
|
||||
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
|
||||
|
||||
### 规格
|
||||
|
||||
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
|
||||
|
||||
- 横向排版
|
||||
|
||||
在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
|
||||
|
||||
- 纵向排版
|
||||
|
||||
使用 `16px` 作为间距。
|
||||
|
||||
|
||||
## 字段型
|
||||
|
||||
### 交互
|
||||
|
||||
<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png">
|
||||
|
||||
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
|
||||
|
||||
|
||||
## 案例（敬请期待）
|
||||
52
docs/pattern/complex-table.md
Normal file
52
docs/pattern/complex-table.md
Normal file
@ -0,0 +1,52 @@
|
||||
# 表格：复杂数据
|
||||
|
||||
- category: 5
|
||||
- order: 5
|
||||
|
||||
---
|
||||
|
||||
表格也用于展示复杂和高度结构化数据。
|
||||
|
||||
## 案例
|
||||
|
||||
### 多列数据
|
||||
|
||||
<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
|
||||
|
||||
通过按钮，可实现更多列数据的加载以及左右切换。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
|
||||
|
||||
提供用户自定义列的功能，方便用户查看需要的列。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
|
||||
|
||||
固定表头列，通过横向滚动条来查看剩余内容。
|
||||
|
||||
### 带图标的表格
|
||||
|
||||
<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
|
||||
|
||||
通过图标强化信息的传递，适用在表达数据变化趋势。
|
||||
|
||||
### 带图表的表格
|
||||
|
||||
<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
|
||||
|
||||
通过图表来强化信息的传递，适用在表达数据变化趋势。
|
||||
|
||||
### 二维表格
|
||||
|
||||
<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
|
||||
|
||||
横向和纵向各一个标题来展现数据。
|
||||
|
||||
### 小表格
|
||||
|
||||
<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
|
||||
|
||||
适用在卡片、弹出框等空间较小的场景中。
|
||||
163
docs/pattern/form.md
Normal file
163
docs/pattern/form.md
Normal file
@ -0,0 +1,163 @@
|
||||
# 表单
|
||||
|
||||
- category: 2
|
||||
- order: 2
|
||||
|
||||
---
|
||||
|
||||
作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
|
||||
|
||||
设计者进行表单设计时，应当注意这几点：
|
||||
|
||||
1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
|
||||
|
||||
为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
|
||||
|
||||
2. 让用户能在上下文中获取信息，帮助他完成输入。
|
||||
|
||||
使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
|
||||
|
||||
3. 对错误敏感，并尽可能宽容。
|
||||
|
||||
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
|
||||
|
||||
4. 不要提出不必要的问题。
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
|
||||
|
||||
通常表单会有四个部分组成。
|
||||
|
||||
1. 标签
|
||||
2. 输入框
|
||||
3. 校验反馈
|
||||
4. 动作
|
||||
|
||||
> 注：`*` 表明该项为必填项。
|
||||
|
||||
## 交互
|
||||
|
||||
### 填空
|
||||
|
||||
<img class="preview-img" align="right" alt="填空示例" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
|
||||
|
||||
在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
|
||||
|
||||
### 组合输入框
|
||||
|
||||
<img class="preview-img" align="right" alt="组合输入框示例" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
|
||||
|
||||
当两个输入框关联性很强时，可以前后拼接，减少页面空间。
|
||||
|
||||
### 对齐方式
|
||||
|
||||
<img class="preview-img" align="right" alt="对齐方式示例" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
|
||||
|
||||
在页面设计表单时，按钮组必须和输入框左对齐。
|
||||
|
||||
### 禁用主按钮
|
||||
|
||||
当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="未达字符标准时，主按钮禁用状态" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="达到字符标准时，主按钮可用状态" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
|
||||
|
||||
当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
|
||||
|
||||
当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
|
||||
|
||||
### 结构化的格式
|
||||
|
||||
<img class="preview-img" align="right" alt="结构化的格式示例" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
|
||||
|
||||
用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
|
||||
|
||||
### 输入提示 & 输入提醒
|
||||
|
||||
<img class="preview-img" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
|
||||
<img class="preview-img" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
|
||||
|
||||
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
|
||||
|
||||
输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
|
||||
|
||||
### 密码加强计
|
||||
|
||||
<img class="preview-img" align="right" alt="密码强度示例" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
|
||||
|
||||
提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
|
||||
|
||||
### 校验
|
||||
|
||||
<img class="preview-img" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
|
||||
<img class="preview-img" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
|
||||
|
||||
<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://os.alipayobjects.com/rmsportal/PLdlPvaebRdJOgu.png">
|
||||
|
||||
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
|
||||
|
||||
### 字数校验框
|
||||
|
||||
<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
|
||||
|
||||
用于统计当前输入长度，以及是否超过系统阈值。
|
||||
|
||||
|
||||
## 规格
|
||||
|
||||
### 间距
|
||||
|
||||
<img class="preview-img" align="right" alt="间隔示例" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
|
||||
|
||||
典型表单的间隔规范。
|
||||
|
||||
### 输入框宽度
|
||||
|
||||
<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png" good>
|
||||
<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png" bad>
|
||||
|
||||
当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
|
||||
|
||||
<br>
|
||||
|
||||
### 对齐方式
|
||||
|
||||
无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="右对齐（推荐）" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
|
||||
|
||||
右对齐（推荐）。
|
||||
|
||||
- 优点：节约垂直空间。
|
||||
- 缺点：降低可读性；标签长度和输入框弹性小。
|
||||
- 场景：既要减少垂直空间，又要加快填写速度。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="顶部对齐" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
|
||||
|
||||
顶部对齐。
|
||||
|
||||
- 优点：有最快的浏览和处理速度；标签长度弹性大。
|
||||
- 缺点：非常占垂直空间。
|
||||
- 场景：希望用户快速填写表单，完成任务。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="左对齐" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
|
||||
|
||||
左对齐。
|
||||
|
||||
- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
|
||||
- 缺点：填写速度慢；标签长度和输入框弹性小。
|
||||
- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
|
||||
@ -1,9 +1,9 @@
|
||||
# 设计模式
|
||||
# 典型页面
|
||||
|
||||
- category: 模式
|
||||
- category: 0
|
||||
- order: 0
|
||||
- disabled: true
|
||||
|
||||
---
|
||||
|
||||
敬请期待。
|
||||
|
||||
101
docs/pattern/list.md
Normal file
101
docs/pattern/list.md
Normal file
@ -0,0 +1,101 @@
|
||||
# 列表
|
||||
|
||||
- category: 3
|
||||
- order: 3
|
||||
|
||||
---
|
||||
|
||||
列表是非常常见的界面元素，有多种使用场景：
|
||||
|
||||
- 获取概览
|
||||
- 逐项浏览
|
||||
- 查找特定列表项
|
||||
- 排序与过滤
|
||||
- 重新安排、添加、删除或重新分类列表项
|
||||
|
||||
## 交互
|
||||
|
||||
### 显示详情信息
|
||||
|
||||
<img class="preview-img" align="right" alt="气泡显示示例" description="使用『点击』触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。<hr>使用『悬停』触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
|
||||
|
||||
气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="列表嵌入示例3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
|
||||
|
||||
列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="弹出层显示示例" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
|
||||
|
||||
弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="双面板选择器示例" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
|
||||
|
||||
双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="单窗口深入示例（窗口未弹出）" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="单窗口深入示例（窗口弹出）" description="用户通过点击，该列表项的详情信息会替换列表所在的显示区域；用户通过『面包屑』、按钮或者浏览器自带返回按钮，从详情返回列表。" src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
|
||||
|
||||
|
||||
单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
|
||||
|
||||
### 显示更多文本
|
||||
|
||||
<img class="preview-img" align="right" alt="宽行示例" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
|
||||
|
||||
宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="对等网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
|
||||
|
||||
对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
|
||||
|
||||
### 显示图片
|
||||
|
||||
<img class="preview-img" align="right" alt="走马灯示例" noPadding src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
|
||||
|
||||
走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" alt="缩略图网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
|
||||
|
||||
缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
|
||||
|
||||
### 显示长列表
|
||||
|
||||
<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
|
||||
|
||||
分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的个人所有的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
|
||||
|
||||
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
|
||||
|
||||
### 显示分类或者层级的列表
|
||||
|
||||
<img class="preview-img" align="right" alt="两层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="多层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="两层折叠面板表格" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
|
||||
|
||||
<br />
|
||||
|
||||
## 案例（敬请期待）
|
||||
94
docs/pattern/navigation.md
Normal file
94
docs/pattern/navigation.md
Normal file
@ -0,0 +1,94 @@
|
||||
# 导航
|
||||
|
||||
- category: 1
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
|
||||
|
||||
1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
|
||||
2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
|
||||
3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
|
||||
|
||||
## 常见导航
|
||||
|
||||
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>侧栏导航</th>
|
||||
<th>顶部导航</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>优点</th>
|
||||
<td>导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。</td>
|
||||
<td>人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>缺点</th>
|
||||
<td>内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。</td>
|
||||
<td>目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>总结</th>
|
||||
<td>一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。</td>
|
||||
<td>适用在操作性强、中后台管理性质的应用。</td>
|
||||
</tr>
|
||||
</Table>
|
||||
|
||||
我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
|
||||
|
||||
前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。
|
||||
|
||||
## 侧栏导航
|
||||
|
||||
---
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/DKtNtqOckLayIpj.png">
|
||||
|
||||
导航的结构由以下几部分组成。
|
||||
|
||||
1. 产品 Logo 和名称
|
||||
2. 业务类目
|
||||
3. 登陆工具
|
||||
4. 面包屑（可选）
|
||||
|
||||
> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
|
||||
> 2. 面包屑可以分为这几类：
|
||||
> - 路径型：是一个动态显示用户到达页面经过的途径。
|
||||
> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
|
||||
> - 属性型：属性型给出当前页面的分类信息。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
|
||||
|
||||
我们定义了不同类目层级所对应的导航样式。
|
||||
|
||||
|
||||
## 顶部导航
|
||||
|
||||
---
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
|
||||
|
||||
导航的结构由以下几部分组成。
|
||||
|
||||
1. 产品 Logo 和名称
|
||||
2. 业务类目
|
||||
3. 登陆工具
|
||||
4. 面包屑（可选）
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
|
||||
|
||||
不同类目层级。
|
||||
157
docs/pattern/table.md
Normal file
157
docs/pattern/table.md
Normal file
@ -0,0 +1,157 @@
|
||||
# 表格
|
||||
|
||||
- category: 4
|
||||
- order: 4
|
||||
|
||||
---
|
||||
|
||||
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
|
||||
|
||||
通常表格的组成元素以及相关元素会有，这几部分组成。
|
||||
|
||||
1. 按钮组
|
||||
2. 搜索条件
|
||||
3. 排序
|
||||
4. 筛选
|
||||
5. 状态点
|
||||
6. 单行操作
|
||||
7. 分页器／无限加载（可选）
|
||||
|
||||
### 筛选
|
||||
|
||||
<img class="preview-img" align="right" alt="筛选示例" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
|
||||
|
||||
当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
|
||||
|
||||
### 状态点
|
||||
|
||||
<img class="preview-img" align="right" alt="状态示例" src="https://os.alipayobjects.com/rmsportal/EYmtSshUxKydwns.png">
|
||||
|
||||
一般用四种颜色来表明系统的不同状态。
|
||||
|
||||
### 更多操作
|
||||
|
||||
<img class="preview-img" align="right" alt="更多操作示例" description="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
|
||||
|
||||
该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
|
||||
|
||||
### 跳转至详情
|
||||
|
||||
<img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">
|
||||
|
||||
把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
|
||||
|
||||
- 优点：节省空间；
|
||||
- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="查看跳转示例" src="https://os.alipayobjects.com/rmsportal/zjDqNVTzSrzXaWg.png">
|
||||
|
||||
在操作中增加一列『查看』，点击后进行跳转至详情。
|
||||
|
||||
- 优点：可发现性高；点击范围固定，不受影响；
|
||||
- 缺点：比较占空间。
|
||||
|
||||
<br>
|
||||
|
||||
结论：可根据业务系统中表格的实际情况，统一使用一种类型。
|
||||
|
||||
## 交互
|
||||
|
||||
### 显示长表格
|
||||
|
||||
参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
|
||||
|
||||
### 全选数据
|
||||
|
||||
<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态二" description="点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态三" description="点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
|
||||
|
||||
当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
|
||||
|
||||
### 跨页选数据
|
||||
|
||||
<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
|
||||
|
||||
当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
|
||||
|
||||
### 固定按钮组
|
||||
|
||||
<img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="底部固定示例" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
|
||||
|
||||
用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
|
||||
|
||||
### 某一项内容过长
|
||||
|
||||
<img class="preview-img" align="right" alt="气泡显示示例" description="当过长信息可以被隐藏时，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
|
||||
|
||||
某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
|
||||
|
||||
### 模块编辑
|
||||
|
||||
<img class="preview-img" align="right" alt="模块编辑示例" description="启动和禁用要尽可能相似（对称性交互）；保证启用和禁用切换时，页面不在水平方向不错位。" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
|
||||
|
||||
适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
|
||||
|
||||
### 直接编辑
|
||||
|
||||
<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
|
||||
|
||||
适用在易编辑性高于易读性时。
|
||||
|
||||
### 悬浮层编辑
|
||||
|
||||
<img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
|
||||
|
||||
悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
|
||||
|
||||
|
||||
## 规格
|
||||
|
||||
### 行高
|
||||
|
||||
<img class="preview-img" align="right" alt="标准" src="https://os.alipayobjects.com/rmsportal/OXTCkOkAtaWtzNA.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="适中" src="https://os.alipayobjects.com/rmsportal/irjamuwZFdQLYWJ.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="紧凑" src="https://os.alipayobjects.com/rmsportal/SdlTVIAoxickNMM.png">
|
||||
|
||||
提供了多种规格的行高，适用在页面、弹出框等场景中。
|
||||
|
||||
### 列宽
|
||||
|
||||
<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TbuuZNfOTrSflVg.png" bad>
|
||||
|
||||
<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/cSSSfNrFMioHDBJ.png" good>
|
||||
|
||||
一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
|
||||
|
||||
1. 表头不换行；
|
||||
2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
|
||||
|
||||
### 对齐方式
|
||||
|
||||
<img class="preview-img" align="right" alt="对齐示例" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">
|
||||
|
||||
数值右对齐（带小数则按小数点对齐），其余左对齐。
|
||||
|
||||
|
||||
## 案例（敬请期待）
|
||||
9
docs/practice/bussiness.md
Normal file
9
docs/practice/bussiness.md
Normal file
@ -0,0 +1,9 @@
|
||||
# 业务组件
|
||||
|
||||
- category: 1
|
||||
- order: 1
|
||||
- disabled: true
|
||||
|
||||
---
|
||||
|
||||
占位。
|
||||
115
docs/practice/cases.md
Normal file
115
docs/practice/cases.md
Normal file
@ -0,0 +1,115 @@
|
||||
# 实践案例
|
||||
|
||||
- category: 0
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
|
||||
|
||||
## 最佳实践
|
||||
|
||||
---
|
||||
|
||||
### 金融云
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/UkUJgmsRKhxwvSR.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
|
||||
|
||||
金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
|
||||
|
||||
<a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a>
|
||||
|
||||
---
|
||||
|
||||
### OceanBase Cloud Platform
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/StdoWgtFplToSgd.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
|
||||
|
||||
OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
|
||||
|
||||
<a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">立即访问</a>
|
||||
|
||||
---
|
||||
|
||||
### 服务宝体验平台
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/khisYONMFbBTOdh.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
|
||||
|
||||
体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
|
||||
|
||||
<a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">立即访问</a>
|
||||
|
||||
---
|
||||
|
||||
### AntV
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
|
||||
|
||||
AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
|
||||
|
||||
<a class="outside-link internal" href="http://antv.alipay.net/" target="_blank">立即访问</a>
|
||||
|
||||
<style>
|
||||
.preview-image-boxes {
|
||||
margin-top: -36px;
|
||||
}
|
||||
.preview-image-wrapper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
.outside-link.internal {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var links = Array.apply(null, document.querySelectorAll('.outside-link.internal'));
|
||||
var checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
|
||||
ping(checkImgUrl, function(status) {
|
||||
if (status === 'responded') {
|
||||
links.forEach(function(link) {
|
||||
link.style.display = 'block';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function ping(url, callback) {
|
||||
var img = new Image();
|
||||
var done;
|
||||
var finish = function(status) {
|
||||
if (!done) {
|
||||
done = true;
|
||||
img.src = '';
|
||||
callback(status);
|
||||
}
|
||||
}
|
||||
img.onload = function() {
|
||||
finish('responded');
|
||||
};
|
||||
img.onerror = function(e) {
|
||||
finish('error');
|
||||
};
|
||||
img.src = url;
|
||||
setTimeout(function() {
|
||||
console.log('timeout');
|
||||
finish('timeout');
|
||||
}, 1500);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
## 第一个例子
|
||||
|
||||
最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
|
||||
最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
|
||||
|
||||
- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)
|
||||
|
||||
@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
|
||||
margin-top: -42px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
## 特性
|
||||
|
||||
- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
|
||||
- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
|
||||
- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
|
||||
- 基于 npm + webpack + babel 的工作流，支持 ES2015。
|
||||
|
||||
@ -71,9 +71,10 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less'
|
||||
## 谁在使用
|
||||
|
||||
- 蚂蚁金服
|
||||
- 口碑
|
||||
|
||||
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
|
||||
|
||||
## 如何贡献
|
||||
|
||||
我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
|
||||
在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://t.cn/R4XEpoQ) 或 [提问](https://github.com/ant-design/ant-design/issues)。
|
||||
108
docs/resource/download.md
Normal file
108
docs/resource/download.md
Normal file
@ -0,0 +1,108 @@
|
||||
# 资源下载
|
||||
|
||||
- order: 0
|
||||
- category: 0
|
||||
|
||||
---
|
||||
|
||||
这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
|
||||
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/cnmjGfbBWUZPFiO.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Axure Components</span>
|
||||
<span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/0.11.2/AntD_Box_v1.2.rp" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/UuYRXxndGMKdaiE.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Axure Box</span>
|
||||
<span class="resource-card-description">强大的 Ant Design 组件拼装方式</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://ux.ant.design" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Ant UX</span>
|
||||
<span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/UEpOFKUQTZaUfnW.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Web Font</span>
|
||||
<span class="resource-card-description">网络字体图标的本地文件包</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" class="resource-card disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/CxXbSpIXckHOtWl.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Cool</span>
|
||||
<span class="resource-card-description">一个机智的设计资源共享工具</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.resource-card {
|
||||
max-width: 350px;
|
||||
width: 40%;
|
||||
height: 130px;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
display: inline-block;
|
||||
margin: 20px 40px 10px 0;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
box-shadow: 0 1px 4px rgba(64,64,64,.2);
|
||||
}
|
||||
|
||||
.resource-card:hover .resource-card-title {
|
||||
color: #2db7f5;
|
||||
}
|
||||
|
||||
.resource-card.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resource-card img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
margin: 0 20px 0 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.resource-card-content {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 92px;
|
||||
}
|
||||
|
||||
.resource-card-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.resource-card-description {
|
||||
display: block;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
7
docs/resource/github.md
Normal file
7
docs/resource/github.md
Normal file
@ -0,0 +1,7 @@
|
||||
# GitHub
|
||||
|
||||
- order: 3
|
||||
- category: 3
|
||||
- link: https://github.com/ant-design/ant-design
|
||||
|
||||
---
|
||||
126
docs/resource/reference.md
Normal file
126
docs/resource/reference.md
Normal file
@ -0,0 +1,126 @@
|
||||
# 文献素材
|
||||
|
||||
- order: 1
|
||||
- category: 1
|
||||
|
||||
---
|
||||
|
||||
在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
|
||||
|
||||
<a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">About Face 4</span>
|
||||
<span class="resource-card-description">作者: Alan.cooper</span>
|
||||
<span class="resource-card-description">出版社: 电子工业出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Web界面设计</span>
|
||||
<span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
|
||||
<span class="resource-card-description">出版社: 电子工业出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/25716088/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/oRxdwgZMwfEFeJa.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">界面设计模式</span>
|
||||
<span class="resource-card-description">作者: Tidwell,J.</span>
|
||||
<span class="resource-card-description">出版社: 电子工业出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">写给大家看的设计书</span>
|
||||
<span class="resource-card-description">作者: Robin Williams</span>
|
||||
<span class="resource-card-description">出版社: 人民邮电出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/26102860/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/txGrSvGFMTTrwjY.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">设计心理学 1</span>
|
||||
<span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
|
||||
<span class="resource-card-description">出版社: 中信出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/26424688/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/cZQyAARFxzaKEOG.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">设计心理学 3</span>
|
||||
<span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
|
||||
<span class="resource-card-description">出版社: 中信出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Web表单设计：点石成金的艺术</span>
|
||||
<span class="resource-card-description">作者: Luke Wroblewski</span>
|
||||
<span class="resource-card-description">出版社: 清华大学出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.resource-card {
|
||||
max-width: 350px;
|
||||
width: 40%;
|
||||
height: 130px;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
display: inline-block;
|
||||
margin: 20px 40px 10px 0;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
box-shadow: 0 1px 4px rgba(64,64,64,.2);
|
||||
}
|
||||
|
||||
.resource-card:hover .resource-card-title {
|
||||
color: #2db7f5;
|
||||
}
|
||||
|
||||
.resource-card.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resource-card img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 64px;
|
||||
margin: 0 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.resource-card-content {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 106px;
|
||||
}
|
||||
|
||||
.resource-card-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.resource-card-description {
|
||||
display: block;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
---
|
||||
|
||||
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
|
||||
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
|
||||
|
||||
<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
|
||||
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
|
||||
|
||||
@ -16,6 +16,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设
|
||||
## 谁在使用
|
||||
|
||||
- 蚂蚁金服
|
||||
- 口碑
|
||||
|
||||
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
|
||||
|
||||
@ -61,7 +61,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-aside'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
@ -32,7 +32,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-ceiling'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
@ -77,7 +77,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top-aside'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
@ -54,7 +54,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top'));
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
@ -136,7 +136,7 @@ motions = motions.concat([[{
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '右方滑入',
|
||||
name: '右方滑出',
|
||||
value: 'move-right',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
@ -73,6 +73,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",
|
||||
|
||||
110
scripts/demo.js
110
scripts/demo.js
@ -145,4 +145,114 @@ window.BrowserDemo = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
const { Modal, Carousel } = antd;
|
||||
const PriviewImg = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
visible: false,
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
showImageModal() {
|
||||
this.setState({
|
||||
visible: true
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.setState({
|
||||
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 imgStyle = {};
|
||||
if (this.props.noPadding) {
|
||||
imgStyle.padding = '0';
|
||||
imgStyle.background = 'none';
|
||||
}
|
||||
const current = this.state.current;
|
||||
const arrows = imgsPack.length > 1;
|
||||
const createMarkup = () => { return { __html: this.props.description } };
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />
|
||||
</div>
|
||||
<div className="preview-image-title">{this.props.alt}</div>
|
||||
<div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()} />
|
||||
<Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
|
||||
<Carousel afterChange={this.handleImgChange} adaptiveHeight arrows={arrows}>
|
||||
{
|
||||
imgsPack.map((img, i) =>
|
||||
<div key={i}>
|
||||
<div className="image-modal-container">
|
||||
<img src={img.src} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Carousel>
|
||||
<div className="preview-image-title">{imgsPack[current].alt}</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
InstantClickChangeFns.push(function() {
|
||||
const previewImageBoxes = $('.preview-img').parent();
|
||||
previewImageBoxes.each(function(i, box) {
|
||||
box = $(box);
|
||||
let priviewImgs = [];
|
||||
const priviewImgNodes = box.find('.preview-img');
|
||||
|
||||
// 判断是否要做成图片集合
|
||||
// 指定了封面图片就是
|
||||
let coverImg;
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
if (img.hasAttribute('as-cover')) {
|
||||
coverImg = img;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (coverImg) {
|
||||
const imgs = [];
|
||||
priviewImgNodes.each((i, img) => imgs.push(img));
|
||||
priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs} />;
|
||||
} else {
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
|
||||
noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
|
||||
good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 计算宽度
|
||||
let width = '';
|
||||
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 = $('<div class="preview-image-boxes ' + (coverImg ? 'pack' : '') + '" style="width: ' + width + '"></div>')[0];
|
||||
box.replaceWith(mountNode);
|
||||
ReactDOM.render(<span>{priviewImgs}</span>, mountNode);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = antd;
|
||||
|
||||
108
scripts/home.js
Normal file
108
scripts/home.js
Normal file
@ -0,0 +1,108 @@
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
import { QueueAnim, Icon, Button } from '../index';
|
||||
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
|
||||
// 导航处理
|
||||
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, '');
|
||||
}
|
||||
}
|
||||
|
||||
$(window).off('scroll.scrollNavEvent');
|
||||
$(window).on('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 (
|
||||
<div>
|
||||
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
|
||||
<h2 key="h2">ANT <p>DESIGN</p></h2>
|
||||
<p key="content">一个 UI 设计语言</p>
|
||||
<span className="line" key="line"/>
|
||||
<a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
|
||||
</QueueAnim>
|
||||
<TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
|
||||
<Icon type="down"/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Banner />, document.getElementById('banner'));
|
||||
|
||||
// page1
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
|
||||
style={{transform: 'translateX(-100px)', opacity: 0}}/>
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
|
||||
<h2 key="h2">最佳实践</h2>
|
||||
<p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
|
||||
<div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
|
||||
type="right"/></Button></div>
|
||||
</QueueAnim>
|
||||
</ScrollOverPack>
|
||||
), document.getElementById('page1'));
|
||||
|
||||
//page2
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
|
||||
<h2 key="h2">设计模式</h2>
|
||||
<p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
|
||||
<div key="button"><Button type="primary" size="large"
|
||||
onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
|
||||
style={{transform: 'translateX(100px)', opacity: 0}}/>
|
||||
</ScrollOverPack>
|
||||
), document.getElementById('page2'));
|
||||
|
||||
// page3
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
|
||||
style={{transform: 'translateX(-100px)', opacity: 0}}/>
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
|
||||
<h2 key="h2">丰富的基础组件</h2>
|
||||
<p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
|
||||
<div key="button"><Button type="primary" size="large"
|
||||
onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
|
||||
type="right"/></Button></div>
|
||||
</QueueAnim>
|
||||
</ScrollOverPack>
|
||||
), document.getElementById('page3'));
|
||||
|
||||
// page4
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
|
||||
<h2 key="h2">微小·确定·幸福</h2>
|
||||
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
|
||||
</QueueAnim>
|
||||
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
|
||||
style={{transform: 'translateY(50px)', opacity: 0}}/>
|
||||
</ScrollOverPack>
|
||||
), document.getElementById('page4'));
|
||||
@ -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 = $("<canvas id='myC' style='display:block'></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;
|
||||
});
|
||||
@ -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 = $("<div class='load-main-box'>" +
|
||||
"<div class='load-box'>" +
|
||||
"<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
|
||||
"<span>Ant Design</span>" +
|
||||
"</div>" +
|
||||
"<div class='load-bar'></div>" +
|
||||
"</div>").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("<p class='" + _class + "'>" + t + "</p>")
|
||||
}
|
||||
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()
|
||||
});
|
||||
});
|
||||
@ -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');
|
||||
@ -27,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');
|
||||
@ -42,20 +44,61 @@ InstantClickChangeFns.push(function() {
|
||||
});
|
||||
|
||||
function hashChange() {
|
||||
if (location.hash.indexOf('#demo-') === 0) {
|
||||
$('.demos-anchor a').removeClass('current');
|
||||
$('.demos-anchor a[href="' + location.hash + '"]').addClass('current');
|
||||
}
|
||||
$('.demos-anchor a').removeClass('current');
|
||||
$('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current');
|
||||
}
|
||||
|
||||
hashChange();
|
||||
|
||||
// 高亮侧边演示菜单
|
||||
$(window).off('hashchange');
|
||||
$(window).on('hashchange', hashChange);
|
||||
|
||||
// 移动 API 文档到演示下方
|
||||
$('.markdown #api').nextAll().andSelf().appendTo('.api-container');
|
||||
|
||||
// 滚动时固定锚点、高亮当前项
|
||||
if ($('.demos-anchor')[0]) {
|
||||
var doc = $(document);
|
||||
var tocTop = $('.toc').offset().top;
|
||||
function onScroll() {
|
||||
var top = doc.scrollTop();
|
||||
if (top >= tocTop) {
|
||||
$('.toc').addClass('sticky');
|
||||
} else {
|
||||
$('.toc').removeClass('sticky');
|
||||
}
|
||||
}
|
||||
onScroll();
|
||||
$(window).off('scroll');
|
||||
$(window).on('scroll', onScroll);
|
||||
}
|
||||
|
||||
// 添加上一页下一页
|
||||
if ($('.aside-container li > a').length > 0) {
|
||||
var links = $('.aside-container li > a');
|
||||
var currentLinkIndex = -1;
|
||||
links.each(function(i, item) {
|
||||
if ($(item).parent().hasClass('current')) {
|
||||
currentLinkIndex = i;
|
||||
}
|
||||
});
|
||||
var prevNextNavNode = $('<div class="prev-next-nav"></div>');
|
||||
var prevLink = links[currentLinkIndex - 1];
|
||||
var nextLink = links[currentLinkIndex + 1];
|
||||
if (prevLink) {
|
||||
prevNextNavNode.append('<a class="prev-page" href="' + prevLink.href + '">' + prevLink.innerHTML + '</a>');
|
||||
} else {
|
||||
prevNextNavNode.append('<span class="prev-page"></span>');
|
||||
}
|
||||
if (nextLink) {
|
||||
prevNextNavNode.append('<a class="next-page" href="' + nextLink.href + '">' + nextLink.innerHTML + '</a>');
|
||||
} else {
|
||||
prevNextNavNode.append('<span class="next-page"></span>');
|
||||
}
|
||||
prevNextNavNode.appendTo('.main-container');
|
||||
}
|
||||
|
||||
$('.nav-phone-icon').click(function() {
|
||||
$(this).prev().toggle();
|
||||
});
|
||||
@ -77,6 +120,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");
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,9 @@
|
||||
{%- if category.pages.length === 1 %}
|
||||
{%- for item in category.pages|splitComponentsByType(category.name) %}
|
||||
<li class="{%- if item.title === post.title %}current{%- endif %}">
|
||||
<a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
|
||||
<a href="{%- if item.meta.link %}{{item.meta.link}}{%- else %}{{permalink_url(item)}}{%- endif %}"
|
||||
{%- if item.meta.link %}target="_blank"{%- endif %}
|
||||
class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
|
||||
{{item.title}}
|
||||
<span class="chinese">{{item.meta.chinese}}</span>
|
||||
</a>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<ul class="toc demos-anchor">
|
||||
{%- for item in items %}
|
||||
{%- set post = item.meta.filepath|parsePost %}
|
||||
<li>
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
<a target="_blank" href="http://t.cn/R4XEpoQ">报告 Bug</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>©2015 蚂蚁金服体验技术部出品</h3>
|
||||
<h3>文档版本：<span id="versions-select"></span></h3>
|
||||
<div>©2015 蚂蚁金服体验技术部出品</div>
|
||||
<div>文档版本：<span id="versions-select"></span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
@ -1,39 +1,251 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block styles %}
|
||||
<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyAttribute %}class="index-page"{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="main-box" id="main">
|
||||
<div class="banner-box">
|
||||
<div id="bannerAnim"></div>
|
||||
<div class="banner-entry fn-hide">
|
||||
<div class="entry-title">Ant</div>
|
||||
<div class="entry-title">Design</div>
|
||||
<div class="entry-slogan">
|
||||
{{ config.site.description }}
|
||||
</div>
|
||||
<a class="entry-link" href="{{static_url('../spec/introduce')}}">
|
||||
<i class="anticon anticon-smile"></i>
|
||||
开始探索
|
||||
</a>
|
||||
</div>
|
||||
<div class="banner-img fn-alpha-out"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{static_url('homeLoad.js')}}"></script>
|
||||
<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
|
||||
<section id="banner"></section>
|
||||
<section id="page1" class="page"></section>
|
||||
<section id="page2" class="page"></section>
|
||||
<section id="page3" class="page"></section>
|
||||
<section id="page4" class="page"></section>
|
||||
<style>
|
||||
.main-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: calc(100% - 190px);
|
||||
min-height: 500px;
|
||||
background: #fff;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
|
||||
}
|
||||
.main-wrapper {
|
||||
background: transparent;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
overflow: unset;
|
||||
display: inline;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
#home-page,
|
||||
#home-page > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
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);
|
||||
}
|
||||
|
||||
header .nav ul li a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.nav ul li a {
|
||||
transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
.search {
|
||||
border-left-color: rgba(235, 237, 238, .5);
|
||||
transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
.search #autoComplete .ant-select-selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#banner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("https://t.alipayobjects.com/images/T1OhFkXfpgXXXXXXXX.png") no-repeat center / cover;
|
||||
}
|
||||
|
||||
.banner-text-wrapper {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 58%;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #EBEDEE;
|
||||
}
|
||||
|
||||
.home-nav-bottom .search {
|
||||
border-left-color: #EBEDEE;
|
||||
}
|
||||
|
||||
.home-nav-bottom .nav a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.banner-text-wrapper h2 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
.banner-text-wrapper h2 p {
|
||||
color: #FF3171;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.banner-text-wrapper .line {
|
||||
width: 0.8px;
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.banner-text-wrapper > p {
|
||||
margin: 10px auto 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a {
|
||||
float: right;
|
||||
width: 155px;
|
||||
height: 45px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #00AAEE;
|
||||
color: #00AAEE;
|
||||
font-size: 18px;
|
||||
background: transparent;
|
||||
transition: box-shadow .45s ease-out;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a:hover {
|
||||
box-shadow: 0 0 10px #00AAEE;
|
||||
}
|
||||
|
||||
.banner-text-wrapper a span {
|
||||
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%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1850px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-wrapper .image-wrapper {
|
||||
width: 65%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px;
|
||||
height: 511px;
|
||||
top: 50%;
|
||||
margin-top: -256px;
|
||||
}
|
||||
|
||||
.image2 {
|
||||
background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px;
|
||||
height: 474px;
|
||||
top: 50%;
|
||||
margin-top: -266px;
|
||||
}
|
||||
|
||||
.image3 {
|
||||
padding-right: 10%;
|
||||
background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px;
|
||||
background-origin: content-box;
|
||||
height: 500px;
|
||||
top: 50%;
|
||||
margin-top: -250px;
|
||||
}
|
||||
|
||||
.image4 {
|
||||
background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px;
|
||||
height: 364px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper {
|
||||
width: 35%;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper h2,
|
||||
.content-wrapper .text-wrapper-bottom h2 {
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.content-wrapper .text-wrapper p {
|
||||
margin: 10px 0 20px;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content-wrapper .left-text {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.text-wrapper-bottom {
|
||||
text-align: center;
|
||||
margin: 10% auto 40px;
|
||||
}
|
||||
|
||||
.text-wrapper-bottom p {
|
||||
margin: 20px auto;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.anticon-right {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
footer,
|
||||
footer ul li > h2 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
footer ul li > a {
|
||||
color: #eee;
|
||||
}
|
||||
</style>
|
||||
<script src="{{static_url('../dist/home.js')}}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@ -64,16 +64,22 @@
|
||||
<span class="bar"></span>
|
||||
<ul>
|
||||
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
|
||||
<a href="{{static_url('../')}}" data-no-instant>首页</a>
|
||||
<a href="{{static_url('../')}}">首页</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
|
||||
<a href="{{static_url('../spec/introduce')}}">设计</a>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs/practice']) %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/practice/cases')}}">实践</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/introduce')}}">React UI</a>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs/pattern']) %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/pattern/navigation')}}">模式</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs/react','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/react/introduce')}}">组件</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/spec/introduce')}}">语言</a>
|
||||
</li>
|
||||
<li class="{%- if post.directory|rootDirectoryIn(['docs/resource']) %}current{%- endif %}">
|
||||
<a href="{{static_url('../docs/resource/download')}}">资源</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
<section class="main-container">
|
||||
<article class="markdown">
|
||||
<h1>{{ post.title }} {{ post.meta.chinese }}</h1>
|
||||
<div class="toc">{{ post.toc }}</div>
|
||||
{{ post.html|add_anchor }}
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -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,7 +79,7 @@ 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;
|
||||
@ -153,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('-');
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
# 资源下载
|
||||
|
||||
- category: 资源
|
||||
|
||||
---
|
||||
|
||||
这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
|
||||
|
||||
### 交互部件库
|
||||
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="download-link">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/sJkbErZhOdoiRia.svg" width="30" style="position: relative; top: -2px;">
|
||||
Axure Widgets
|
||||
</a>
|
||||
|
||||
### 组件视觉稿
|
||||
|
||||
<a target="_blank" href="" class="download-link disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
|
||||
Sketch
|
||||
</a>
|
||||
|
||||
### 图标
|
||||
|
||||
<a target="_blank" href="" class="download-link disabled">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
|
||||
AI
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="download-link">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/ytqOwOOWgYrDPfT.svg" width="32">
|
||||
Web font
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.download-link {
|
||||
width: 220px;
|
||||
height: 130px;
|
||||
border: 1px solid #e9e9e9;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
line-height: 130px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.download-link.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
.download-link img {
|
||||
margin-right: 8px;
|
||||
opacity: 0.
|
||||
}
|
||||
</style>
|
||||
@ -14,3 +14,4 @@
|
||||
@import "datepicker/MonthPanel";
|
||||
@import "datepicker/YearPanel";
|
||||
@import "datepicker/DecadePanel";
|
||||
@import "datepicker/MonthPicker";
|
||||
|
||||
6
style/components/datepicker/MonthPicker.less
Normal file
6
style/components/datepicker/MonthPicker.less
Normal file
@ -0,0 +1,6 @@
|
||||
.@{calendar-prefix-cls}-month {
|
||||
.@{calendar-prefix-cls}-month-panel,
|
||||
.@{calendar-prefix-cls}-year-panel {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@ -28,7 +28,6 @@
|
||||
|
||||
&-part {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-left {
|
||||
|
||||
@ -179,6 +179,7 @@
|
||||
.@{iconfont-css-prefix}-caret-circle-up:before {content:"\e606";}
|
||||
.@{iconfont-css-prefix}-caret-circle-down:before {content:"\e607";}
|
||||
.@{iconfont-css-prefix}-qrcode:before {content:"\e6a5";}
|
||||
.@{iconfont-css-prefix}-scan:before {content:"\e6af";}
|
||||
.@{iconfont-css-prefix}-like:before {content:"\e6a3";}
|
||||
.@{iconfont-css-prefix}-dislike:before {content:"\e6a2";}
|
||||
.@{iconfont-css-prefix}-pay-circle:before {content:"\e6a8";}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
// ICONFONT
|
||||
@iconfont-css-prefix : anticon;
|
||||
@icon-url : "//at.alicdn.com/t/font_1450842624_7594283";
|
||||
@icon-url : "//at.alicdn.com/t/font_1452596235_7047422";
|
||||
|
||||
// LINK
|
||||
@link-color : #2db7f5;
|
||||
@ -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);
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user