mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
偏右
commit
6799ee278f
30
.github/ISSUE_TEMPLATE.md
vendored
30
.github/ISSUE_TEMPLATE.md
vendored
@ -1,5 +1,3 @@
|
||||
> 特别提示：报告 bug 前请确保你的问题是可复现的，并务必提供复现步骤，否则恕难解决。
|
||||
|
||||
If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)
|
||||
|
||||
If you are going to report a bug, please answer the following questions, thank you!
|
||||
@ -25,3 +23,31 @@ If you are going to report a bug, please answer the following questions, thank y
|
||||
- The version of antd(e.g. 0.12.0):
|
||||
- Your operating system and it's version(e.g. OSX 10.11.0):
|
||||
- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
|
||||
|
||||
---
|
||||
|
||||
提问之前，建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
|
||||
|
||||
如果是报告 bug，请按照下列格式编辑问题，务必提供复现步骤，否则恕难解决，非常感谢！
|
||||
|
||||
## 你做了什么？
|
||||
|
||||
（例如，我吃了一个汉堡）
|
||||
|
||||
## 你期待的结果是：
|
||||
|
||||
（例如，我应该饱了）
|
||||
|
||||
## 实际上的结果和抱怨：
|
||||
|
||||
（例如，我还是饿的，肯定是哪里出问题了）
|
||||
|
||||
## 可重现的在线演示
|
||||
|
||||
(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
|
||||
|
||||
## 本地环境信息
|
||||
|
||||
- antd 版本:
|
||||
- 操作系统及其版本：
|
||||
- 浏览器及其版本:
|
||||
|
||||
@ -24,7 +24,7 @@ timeline: true
|
||||
- Modal
|
||||
- 修复弹出时背景依然跟随滚动的问题。[#1751](https://github.com/ant-design/ant-design/issues/1751)
|
||||
- 修复关闭按钮获得焦点时的样式问题。[#1668](https://github.com/ant-design/ant-design/issues/1668)
|
||||
- 修复 Form 搜索输入框样式问题。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 将搜索输入框相关样式移到 Input 组件下。[7b7f846](https://github.com/ant-design/ant-design/commit/7b7f8461611e53f4f96ae8d64d37fe28ee8d2553)
|
||||
- 修复 Select 获得焦点时的样式问题。[#1684](https://github.com/ant-design/ant-design/issues/1684)
|
||||
- 修复 TreeSelect 占位符样式问题。[#1657](https://github.com/ant-design/ant-design/issues/1657)
|
||||
- 修复了类型定义以更好地支持 `TypeScript`。[#1696](https://github.com/ant-design/ant-design/pull/1696) [@xujihui1985](https://github.com/xujihui1985)
|
||||
|
||||
35
README.md
35
README.md
@ -20,7 +20,7 @@ An enterprise-class UI design language and React-based implementation.
|
||||
npm install antd
|
||||
```
|
||||
|
||||
## Usage example
|
||||
## Usage
|
||||
|
||||
### Use prebuilt bundle
|
||||
|
||||
@ -29,7 +29,7 @@ import { DatePicker } from 'antd';
|
||||
ReactDOM.render(<DatePicker />, mountNode);
|
||||
```
|
||||
|
||||
Import style:
|
||||
And import style manually:
|
||||
|
||||
```jsx
|
||||
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
@ -37,23 +37,28 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
|
||||
### Use modularized antd
|
||||
|
||||
- Use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) (Recommended)
|
||||
|
||||
```js
|
||||
// .babelrc
|
||||
{
|
||||
"plugins": [["antd", { style: "css" }]]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from antd directly.
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-antd
|
||||
import { DatePicker } from 'antd';
|
||||
```
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'antd/lib/date-picker'; // just for js
|
||||
```
|
||||
|
||||
We recommend use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) with config:
|
||||
|
||||
```js
|
||||
['antd', {
|
||||
style: 'css'
|
||||
}]
|
||||
```
|
||||
|
||||
```jsx
|
||||
import { DatePicker } from 'antd'; // automatically parse and require js and css modularly
|
||||
```
|
||||
|
||||
No need to import style manually.
|
||||
|
||||
## Browser Support
|
||||
|
||||
|
||||
@ -76,6 +76,7 @@ export default class Affix extends React.Component {
|
||||
position: 'fixed',
|
||||
top: offsetTop,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -88,6 +89,7 @@ export default class Affix extends React.Component {
|
||||
position: 'fixed',
|
||||
bottom: offsetBottom,
|
||||
left: elemOffset.left,
|
||||
width: ReactDOM.findDOMNode(this).offsetWidth,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { createElement } from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import { isCssAnimationSupported } from 'css-animation';
|
||||
import isCssAnimationSupported from '../util/isCssAnimationSupported';
|
||||
|
||||
function getNumberArray(num) {
|
||||
return num ?
|
||||
@ -38,7 +38,7 @@ export default class ScrollNumber extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!isCssAnimationSupported) {
|
||||
if (!isCssAnimationSupported()) {
|
||||
findDOMNode(this).className += ' not-support-css-animation';
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ title: Button
|
||||
|
||||
To trigger an operation.
|
||||
|
||||
## Occasion
|
||||
## When To Use
|
||||
|
||||
A button means an operation(or a series of operations). Click a button will trigger corresponding business logic.
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ export default class Checkbox extends React.Component {
|
||||
return (
|
||||
<label className={classString} style={style}>
|
||||
<RcCheckbox {...restProps} prefixCls={prefixCls} children={null} />
|
||||
{children ? <span>{children}</span> : null}
|
||||
{children !== undefined ? <span>{children}</span> : null}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ ReactDOM.render(
|
||||
<FormItem
|
||||
label="标签输入框："
|
||||
labelCol={{ span: 6 }}
|
||||
validateStatus="success"
|
||||
wrapperCol={{ span: 16 }}>
|
||||
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
|
||||
</FormItem>
|
||||
|
||||
@ -102,13 +102,12 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
|
||||
| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
|
||||
|
||||
|
||||
### Form.Item
|
||||
|
||||
> 一个 Form.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|------------------------------------------|------------|-------|--------|
|
||||
|-----------|------------------------------------------|-----------|-------|--------|
|
||||
| label | label 标签的文本 | string | | |
|
||||
| labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object | | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object | | |
|
||||
@ -116,7 +115,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string | | |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bool | | false |
|
||||
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
|
||||
| hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool | | false |
|
||||
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | bool | | false |
|
||||
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | | 'ant-form' |
|
||||
|
||||
### Input
|
||||
|
||||
@ -27,11 +27,6 @@ label {
|
||||
color: @label-required-color;
|
||||
}
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.ant-input-group {
|
||||
.input-group(~"ant-input");
|
||||
}
|
||||
|
||||
// Radio && Checkbox
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@ -41,6 +36,7 @@ input[type="checkbox"] {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// These classes are used directly on <label>s
|
||||
.ant-radio-inline,
|
||||
.ant-radio-vertical,
|
||||
@ -201,40 +197,6 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-search-input-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ant-search-input {
|
||||
&.ant-input-group .ant-input:first-child {
|
||||
border-radius: @border-radius-base;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
.ant-search-btn {
|
||||
.btn-default;
|
||||
border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
|
||||
left: -1px;
|
||||
position: relative;
|
||||
border-width: 0 0 0 1px;
|
||||
z-index: 2;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
form & {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
&&-focus .ant-search-btn-noempty,
|
||||
&:hover .ant-search-btn-noempty {
|
||||
.btn-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Form layout
|
||||
//== Horizontal Form
|
||||
.@{form-prefix-cls}-horizontal {
|
||||
@ -302,9 +264,10 @@ form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
visibility: visible;
|
||||
font-family: "anticon" !important;
|
||||
.square(@input-height-lg);
|
||||
line-height: @input-height-lg;
|
||||
line-height: @input-height-lg + 2;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
animation: zoomIn .3s @ease-out-back;
|
||||
@ -330,7 +293,6 @@ form {
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.form-control-validation(@success-color; @input-hover-border-color;);
|
||||
.ant-input {
|
||||
border-color: @input-border-color;
|
||||
box-shadow: none;
|
||||
|
||||
@ -41,7 +41,7 @@ english: Icon
|
||||
|
||||
```__react
|
||||
import IconSet from '../../site/component/IconSet';
|
||||
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
|
||||
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
|
||||
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons1} key="icons1" />, mountNode);
|
||||
```
|
||||
@ -57,7 +57,7 @@ ReactDOM.render(<IconSet className="icons" icons={icons2} key="icons2" />, mount
|
||||
### 三. 网站通用图标
|
||||
|
||||
```__react
|
||||
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-o', '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', 'heart-o', 'heart', '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', 'calculator'];
|
||||
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', 'file-pdf','file-excel', 'file-jpg', 'file-ppt', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', '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', 'heart-o', 'heart', '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', 'calculator', 'pushpin', 'pushpin-o'];
|
||||
|
||||
ReactDOM.render(<IconSet className="icons" icons={icons3} key="icons3" />, mountNode);
|
||||
```
|
||||
|
||||
@ -7,3 +7,8 @@
|
||||
.ant-input {
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.ant-input-group {
|
||||
.input-group(~"ant-input");
|
||||
}
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
}
|
||||
|
||||
&-wrap > * {
|
||||
display: block;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
|
||||
import animation from '../common/openAnimation';
|
||||
import animation from '../util/openAnimation';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import classNames from 'classnames';
|
||||
import { isCssAnimationSupported } from 'css-animation';
|
||||
import isCssAnimationSupported from '../util/isCssAnimationSupported';
|
||||
import warning from 'warning';
|
||||
|
||||
export default class Spin extends React.Component {
|
||||
@ -29,7 +29,7 @@ export default class Spin extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
warning(!('spining' in this.props), '`spining` property of Popover is a spell mistake, use `spinning` instead.');
|
||||
if (!isCssAnimationSupported) {
|
||||
if (!isCssAnimationSupported()) {
|
||||
// Show text in IE8/9
|
||||
findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "~normalize.css/normalize.css";
|
||||
@import (inline) "~normalize.css/normalize.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -84,6 +84,11 @@
|
||||
.@{iconfont-css-prefix}-filter:before {content:"\e66f";}
|
||||
.@{iconfont-css-prefix}-file-text:before {content:"\e66c";}
|
||||
.@{iconfont-css-prefix}-file:before {content:"\e66b";}
|
||||
.@{iconfont-css-prefix}-file-unknown:before {content:"\e6a6";}
|
||||
.@{iconfont-css-prefix}-file-excel:before {content:"\e6ac";}
|
||||
.@{iconfont-css-prefix}-file-pdf:before {content:"\e6ab";}
|
||||
.@{iconfont-css-prefix}-file-jpg:before {content:"\e6aa";}
|
||||
.@{iconfont-css-prefix}-file-ppt:before {content:"\e6a7";}
|
||||
.@{iconfont-css-prefix}-exception:before {content:"\e66a";}
|
||||
.@{iconfont-css-prefix}-export:before {content:"\e669";}
|
||||
.@{iconfont-css-prefix}-desktop:before {content:"\e662";}
|
||||
@ -135,6 +140,7 @@
|
||||
.@{iconfont-css-prefix}-verticle-right:before {content:"\e62c";}
|
||||
.@{iconfont-css-prefix}-verticle-left:before {content:"\e62b";}
|
||||
.@{iconfont-css-prefix}-rollback:before {content:"\e62a";}
|
||||
.@{iconfont-css-prefix}-enter:before {content:"\e6b6";}
|
||||
.@{iconfont-css-prefix}-retweet:before {content:"\e627";}
|
||||
.@{iconfont-css-prefix}-shrink:before {content:"\e628";}
|
||||
.@{iconfont-css-prefix}-arrow-salt:before {content:"\e629";}
|
||||
@ -183,10 +189,11 @@
|
||||
.@{iconfont-css-prefix}-pay-circle:before {content:"\e6a8";}
|
||||
.@{iconfont-css-prefix}-pay-circle-o:before {content:"\e6a9";}
|
||||
.@{iconfont-css-prefix}-message:before {content:"\e6a4";}
|
||||
.@{iconfont-css-prefix}-file-unknown:before {content:"\e6a6";}
|
||||
.@{iconfont-css-prefix}-heart:before {content:"\e68c";}
|
||||
.@{iconfont-css-prefix}-heart-o:before {content:"\e6b0";}
|
||||
.@{iconfont-css-prefix}-calculator:before {content:"\e6b1";}
|
||||
.@{iconfont-css-prefix}-pushpin:before {content:"\e6b5";}
|
||||
.@{iconfont-css-prefix}-pushpin-o:before {content:"\e6b3";}
|
||||
.@{iconfont-css-prefix}-loading:before {
|
||||
display: inline-block;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
// ICONFONT
|
||||
@iconfont-css-prefix : anticon;
|
||||
@icon-url : "https://at.alicdn.com/t/font_1461567603_8950496";
|
||||
@icon-url : "https://at.alicdn.com/t/font_1463992151_360388";
|
||||
|
||||
// LINK
|
||||
@link-color : #2db7f5;
|
||||
|
||||
@ -505,6 +505,9 @@ export default class Table extends React.Component {
|
||||
className: 'ant-table-selection-column',
|
||||
};
|
||||
}
|
||||
if (columns.some(column => column.fixed === 'left' || column.fixed === true)) {
|
||||
selectionColumn.fixed = 'left';
|
||||
}
|
||||
if (columns[0] && columns[0].key === 'selection-column') {
|
||||
columns[0] = selectionColumn;
|
||||
} else {
|
||||
|
||||
@ -373,10 +373,6 @@
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
&-fixed-left,
|
||||
&-fixed-right {
|
||||
position: absolute;
|
||||
|
||||
@ -39,7 +39,7 @@ english: TreeSelect
|
||||
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | bool/Function(inputValue:string, treeNode:TreeNode) (函数需要返回bool值) | Function |
|
||||
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' |
|
||||
| treeNodeLabelProp | 作为显示的prop设置 | String | 'title' |
|
||||
| treeData | treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置`key`其值为整个树范围内的唯一id | array<{value, label, children}> | [] |
|
||||
| treeData | treeNodes数据，如果设置则不需要手动构造TreeNode节点（value在整个树范围内唯一）| array<{value, label, children, [disabled]}> | [] |
|
||||
|treeDataSimpleMode | 使用简单格式的treeData，具体设置参考可设置的类型 (此时treeData应变为这样的数据结构: [{"id":1, "pId":0, "label":"test1"},...], `pId`是父节点的id) | bool/object{id:'id', pId:'pId', rootPId:null} | false |
|
||||
| loadData | 异步加载数据 | function(node) | - |
|
||||
|
||||
@ -50,6 +50,6 @@ english: TreeSelect
|
||||
|-----------|------------------------------------------|------------|--------|
|
||||
| disabled | 是否禁用 | Boolean | false |
|
||||
| key | 此项必须设置（其值在整个树范围内唯一） | String | - |
|
||||
| value | 默认根据此属性值进行筛选 | String | - |
|
||||
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | String | - |
|
||||
| title | 树节点显示的内容 | String/element | '---' |
|
||||
| isLeaf | 是否是叶子节点 | bool | false |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import RcTree from 'rc-tree';
|
||||
import animation from '../common/openAnimation';
|
||||
import animation from '../util/openAnimation';
|
||||
|
||||
export default class Tree extends React.Component {
|
||||
static TreeNode = RcTree.TreeNode;
|
||||
|
||||
@ -5,6 +5,8 @@ title: 限制用户上传的文件
|
||||
|
||||
可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。
|
||||
|
||||
也支持异步检查，`beforeUpload` 的返回值可以是一个 Promise：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
|
||||
|
||||
````jsx
|
||||
import { Upload, Button, Icon, message } from 'antd';
|
||||
|
||||
|
||||
@ -6,11 +6,9 @@ import Progress from '../progress';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
|
||||
const previewFile = function (file, callback) {
|
||||
const previewFile = (file, callback) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
callback(reader.result);
|
||||
};
|
||||
reader.onloadend = () => callback(reader.result);
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
@ -70,10 +68,14 @@ export default class UploadList extends React.Component {
|
||||
icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
|
||||
}
|
||||
} else {
|
||||
icon = (<a className={`${prefixCls}-list-item-thumbnail`}
|
||||
onClick={(e) => this.handlePreview(file, e)}
|
||||
icon = (
|
||||
<a
|
||||
className={`${prefixCls}-list-item-thumbnail`}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
href={file.url}
|
||||
target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
|
||||
target="_blank">
|
||||
<img src={file.thumbUrl || file.url} alt={file.name} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -93,14 +95,28 @@ export default class UploadList extends React.Component {
|
||||
<div className={infoUploadingClass} key={file.uid}>
|
||||
<div className={`${prefixCls}-list-item-info`}>
|
||||
{icon}
|
||||
{file.url
|
||||
? <a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" className={`${prefixCls}-list-item-name`}>{file.name}</a>
|
||||
: <span className={`${prefixCls}-list-item-name`}>{file.name}</span>}
|
||||
{
|
||||
file.url
|
||||
? (
|
||||
<a
|
||||
onClick={(e) => this.handlePreview(file, e)}
|
||||
href={file.url} target="_blank"
|
||||
className={`${prefixCls}-list-item-name`}>
|
||||
{file.name}
|
||||
</a>
|
||||
) : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
|
||||
}
|
||||
{
|
||||
this.props.listType === 'picture-card' && file.status !== 'uploading'
|
||||
? (
|
||||
<span>
|
||||
<a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}><Icon type="eye-o" /></a>
|
||||
<a
|
||||
onClick={(e) => this.handlePreview(file, e)}
|
||||
href={file.url}
|
||||
target="_blank"
|
||||
style={{ pointerEvents: file.url ? '' : 'none' }}>
|
||||
<Icon type="eye-o" />
|
||||
</a>
|
||||
<Icon type="delete" onClick={() => this.handleClose(file)} />
|
||||
</span>
|
||||
) : <Icon type="cross" onClick={() => this.handleClose(file)} />
|
||||
|
||||
24
components/util/isCssAnimationSupported.js
Normal file
24
components/util/isCssAnimationSupported.js
Normal file
@ -0,0 +1,24 @@
|
||||
let animation;
|
||||
|
||||
function isCssAnimationSupported() {
|
||||
if (animation !== undefined) {
|
||||
return animation;
|
||||
}
|
||||
const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
|
||||
const elm = document.createElement('div');
|
||||
if (elm.style.animationName !== undefined) {
|
||||
animation = true;
|
||||
}
|
||||
if (animation !== undefined) {
|
||||
for (let i = 0; i < domPrefixes.length; i++) {
|
||||
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
|
||||
animation = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
animation = animation || false;
|
||||
return animation;
|
||||
}
|
||||
|
||||
export default isCssAnimationSupported;
|
||||
@ -7,6 +7,8 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
---
|
||||
|
||||
在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)。
|
||||
|
||||
## 第一个例子
|
||||
|
||||
最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
|
||||
@ -34,44 +36,49 @@ $ npm install antd-init -g
|
||||
|
||||
```bash
|
||||
$ mkdir antd-demo && cd antd-demo
|
||||
$ antd-init
|
||||
$ npm install
|
||||
$ antd-init --type plain-react
|
||||
```
|
||||
|
||||
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`.
|
||||
antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
|
||||
|
||||
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
|
||||
|
||||
### 3. 使用组件
|
||||
|
||||
编辑 `src/component/App.jsx`，用 React 的方式直接使用 Ant Design React 的组件。
|
||||
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
|
||||
|
||||
直接用下面的代码替换 `src/entries/index.js` 的内容，用 React 的方式直接使用 antd 组件。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { DatePicker, message } from 'antd';
|
||||
|
||||
const App = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
date: ''
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
date: '',
|
||||
};
|
||||
},
|
||||
handleChange(value) {
|
||||
message.info('您选择的日期是: ' + value.toString());
|
||||
this.setState({
|
||||
date: value
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return <div style={{width: 400, margin: '100px auto'}}>
|
||||
<DatePicker onChange={this.handleChange} />
|
||||
<div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
handleChange(date) {
|
||||
message.info('您选择的日期是: ' + date.toString());
|
||||
this.setState({ date });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div style={{ width: 400, margin: '100px auto' }}>
|
||||
<DatePicker onChange={value => this.handleChange(value)} />
|
||||
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
你可以在 [这里](/components/button) 选用更多组件。
|
||||
> 你可以在左侧菜单选用更多组件。
|
||||
|
||||
### 4. 开发调试
|
||||
|
||||
@ -95,7 +102,7 @@ $ npm run build
|
||||
|
||||
Ant Design React 支持所有的现代浏览器和 IE8+。
|
||||
|
||||
对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
|
||||
对于 IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本，并提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
|
||||
|
||||
<div class="code-line-highlight"></div>
|
||||
|
||||
|
||||
@ -36,7 +36,6 @@
|
||||
"dependencies": {
|
||||
"array-tree-filter": "~1.0.0",
|
||||
"classnames": "~2.2.0",
|
||||
"css-animation": "~1.2.3",
|
||||
"gregorian-calendar": "~4.1.0",
|
||||
"gregorian-calendar-format": "~4.1.0",
|
||||
"normalize.css": "^4.1.1",
|
||||
@ -72,7 +71,7 @@
|
||||
"warning": "~2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"antd-tools": "^0.7.0",
|
||||
"antd-tools": "^0.8.0",
|
||||
"babel-eslint": "^6.0.2",
|
||||
"babel-jest": "^12.0.2",
|
||||
"babel-plugin-antd": "^0.4.0",
|
||||
@ -120,6 +119,7 @@
|
||||
"clean": "antd-tools run clean",
|
||||
"start": "antd-tools run start",
|
||||
"site": "antd-tools run site",
|
||||
"pre-deploy": "cp CNAME _site && rsync -R components/*/demo/*.json _site",
|
||||
"deploy": "antd-tools run update-self && antd-tools run deploy",
|
||||
"just-deploy": "antd-tools run just-deploy",
|
||||
"lint": "npm run srclint && npm run demolint && npm run lesshint",
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
/* eslint-disable */
|
||||
'use strict';
|
||||
|
||||
|
||||
// Build a entry less file to dist/antd.less
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
|
||||
.markdown.api-container table {
|
||||
font-family: consolas;
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,12 @@
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user