├── CNAME ├── components ├── queue-anim │ ├── style │ │ └── index.js │ ├── index.jsx │ └── demo │ │ └── simple.md ├── validation │ ├── style │ │ └── index.js │ └── index.jsx ├── locale-provider │ ├── style │ │ └── index.js │ ├── demo │ │ └── basic.md │ ├── index.jsx │ ├── en_US.js │ └── ru_RU.js ├── icon │ ├── style │ │ └── index.js │ └── index.jsx ├── calendar │ ├── Constants.js │ ├── locale │ │ ├── en_US.js │ │ ├── ru_RU.js │ │ └── zh_CN.js │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── card.md │ │ ├── locale.md │ │ └── custom-render.md ├── col │ ├── index.js │ └── style │ │ └── index.js ├── row │ ├── index.js │ └── style │ │ └── index.js ├── style │ ├── index.less │ ├── index.js │ ├── core │ │ ├── index.less │ │ ├── motion │ │ │ ├── other.less │ │ │ ├── fade.less │ │ │ └── swing.less │ │ └── motion.less │ └── mixins │ │ ├── size.less │ │ ├── opacity.less │ │ ├── index.less │ │ ├── clearfix.less │ │ ├── iconfont.less │ │ └── motion.less ├── tag │ ├── style │ │ └── index.js │ ├── demo │ │ ├── colorful.md │ │ └── basic.md │ └── index.md ├── affix │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── demo │ │ ├── basic.md │ │ ├── bottom.md │ │ ├── offset.md │ │ └── on-change.md │ └── index.md ├── alert │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── close-text.md │ │ ├── style.md │ │ ├── closable.md │ │ ├── description.md │ │ └── icon.md │ └── index.md ├── badge │ ├── style │ │ └── index.js │ ├── demo │ │ ├── link.md │ │ ├── 99plus.md │ │ ├── no-wrapper.md │ │ ├── overflow.md │ │ ├── dot.md │ │ └── basic.md │ └── index.md ├── button │ ├── style │ │ └── index.js │ ├── index.jsx │ ├── button-group.jsx │ └── demo │ │ ├── size.md │ │ ├── disabled.md │ │ └── icon.md ├── card │ ├── style │ │ └── index.js │ ├── demo │ │ ├── loading.md │ │ ├── simple.md │ │ ├── basic.md │ │ ├── border-less.md │ │ ├── no-padding.md │ │ └── grid.md │ └── index.md ├── carousel │ ├── style │ │ └── index.js │ └── demo │ │ ├── autoplay.md │ │ ├── vertical.md │ │ ├── fade.md │ │ └── basic.md ├── checkbox │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── demo │ │ ├── disable.md │ │ ├── basic.md │ │ └── group.md │ ├── index.jsx │ └── index.md ├── collapse │ ├── style │ │ └── index.js │ ├── index.jsx │ ├── demo │ │ ├── accordion.md │ │ ├── basic.md │ │ └── mix.md │ └── index.md ├── input │ ├── style │ │ ├── index.js │ │ ├── index.less │ │ └── search-input.less │ ├── index.jsx │ ├── demo │ │ ├── basic.md │ │ ├── add-on.md │ │ ├── size.md │ │ └── group.md │ └── Group.jsx ├── layout │ ├── style │ │ └── index.js │ ├── index.jsx │ └── demo │ │ ├── sort.md │ │ ├── reponsive.md │ │ ├── flex-order.md │ │ ├── reponsive-more.md │ │ ├── offset.md │ │ ├── basic.md │ │ └── gutter.md ├── menu │ └── style │ │ └── index.js ├── message │ ├── style │ │ └── index.js │ └── demo │ │ ├── info.md │ │ ├── duration.md │ │ ├── loading.md │ │ └── other.md ├── popover │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── triggerType.md │ │ └── control.md ├── progress │ ├── style │ │ └── index.js │ ├── demo │ │ ├── circle-mini.md │ │ ├── line.md │ │ ├── line-mini.md │ │ ├── format.md │ │ ├── circle.md │ │ └── dynamic.md │ ├── index.jsx │ └── index.md ├── radio │ ├── style │ │ └── index.js │ ├── index.jsx │ ├── demo │ │ ├── basic.md │ │ ├── radiogroup.md │ │ └── disable.md │ ├── radioButton.jsx │ └── radio.jsx ├── rate │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── half.md │ │ ├── disabled.md │ │ └── text.md │ ├── index.jsx │ └── index.md ├── spin │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── size.md │ │ ├── tip.md │ │ ├── inside.md │ │ └── nested.md │ └── index.md ├── steps │ ├── style │ │ └── index.js │ ├── demo │ │ ├── icon.md │ │ ├── vertical-small.md │ │ ├── simple.md │ │ ├── small-size.md │ │ ├── vertical.md │ │ └── error.md │ └── index.jsx ├── switch │ ├── style │ │ └── index.js │ ├── demo │ │ ├── size.md │ │ ├── basic.md │ │ ├── text.md │ │ └── disabled.md │ ├── index.jsx │ └── index.md ├── tabs │ ├── style │ │ └── index.js │ └── demo │ │ ├── disabled.md │ │ ├── size.md │ │ ├── icon.md │ │ ├── extra.md │ │ ├── basic.md │ │ ├── card.md │ │ ├── slide.md │ │ └── card-top.md ├── timeline │ ├── style │ │ └── index.js │ ├── index.jsx │ ├── demo │ │ ├── basic.md │ │ ├── pending.md │ │ ├── custom.md │ │ └── color.md │ └── Timeline.jsx ├── tooltip │ ├── style │ │ └── index.js │ ├── demo │ │ └── basic.md │ └── index.md ├── breadcrumb │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── index.jsx │ ├── demo │ │ ├── basic.md │ │ ├── separator.md │ │ └── withIcon.md │ └── BreadcrumbItem.jsx ├── input-number │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── digit.md │ │ ├── size.md │ │ └── disabled.md │ ├── index.jsx │ └── index.md ├── notification │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── duration.md │ │ ├── with-icon.md │ │ └── with-btn.md ├── pagination │ ├── locale │ │ ├── en_US.js │ │ └── zh_CN.js │ ├── index.jsx │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── more.md │ │ ├── simple.md │ │ ├── jump.md │ │ ├── total.md │ │ ├── changer.md │ │ ├── mini.md │ │ └── controlled.md │ └── MiniSelect.jsx ├── popconfirm │ ├── style │ │ └── index.js │ └── demo │ │ ├── locale.md │ │ └── basic.md ├── modal │ ├── style │ │ ├── index.less │ │ └── index.js │ ├── locale.js │ └── demo │ │ ├── confirm.md │ │ ├── confirm-promise.md │ │ ├── basic.md │ │ └── info.md ├── form │ ├── style │ │ └── index.js │ ├── index.jsx │ └── ValueMixin.jsx ├── cascader │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── change-on-select.md │ │ ├── disabled-option.md │ │ ├── default-value.md │ │ ├── hover.md │ │ ├── size.md │ │ └── custom-trigger.md ├── dropdown │ ├── style │ │ └── index.js │ ├── index.jsx │ ├── dropdown.jsx │ └── demo │ │ ├── sub-menu.md │ │ ├── event.md │ │ ├── trigger.md │ │ ├── item.md │ │ ├── basic.md │ │ └── dropdown-button.md ├── select │ ├── style │ │ └── index.js │ └── demo │ │ ├── search.md │ │ ├── tags.md │ │ ├── multiple.md │ │ ├── label-in-value.md │ │ ├── optgroup.md │ │ ├── basic.md │ │ └── combobox.md ├── slider │ ├── style │ │ └── index.js │ ├── demo │ │ ├── tip-formatter.md │ │ ├── event.md │ │ ├── basic.md │ │ └── mark.md │ └── index.jsx ├── tree │ ├── style │ │ ├── index.js │ │ └── mixin.less │ └── index.jsx ├── upload │ ├── style │ │ └── index.js │ ├── getFileItem.js │ └── demo │ │ ├── beforeUpload.md │ │ ├── multiple.md │ │ ├── defaultFileList.md │ │ ├── basic.md │ │ └── drag.md ├── time-picker │ ├── style │ │ └── index.js │ ├── locale │ │ ├── zh_CN.js │ │ ├── en_US.js │ │ └── ru_RU.js │ └── demo │ │ ├── disabled.md │ │ ├── without-seconds.md │ │ ├── basic.md │ │ ├── size.md │ │ ├── value.md │ │ ├── hide-options.md │ │ └── disable-options.md ├── date-picker │ ├── style │ │ ├── MonthPicker.less │ │ ├── index.js │ │ ├── index.less │ │ └── TimePicker.less │ ├── demo │ │ ├── disabled.md │ │ ├── formatter.md │ │ ├── month-picker.md │ │ ├── basic.md │ │ ├── size.md │ │ ├── time.md │ │ ├── disabled-date.md │ │ ├── locale.md │ │ └── range.md │ ├── Calendar.jsx │ ├── index.jsx │ └── locale │ │ ├── en_US.js │ │ ├── ru_RU.js │ │ └── zh_CN.js ├── tree-select │ └── style │ │ └── index.js ├── transfer │ ├── style │ │ └── index.js │ └── index.md ├── table │ ├── style │ │ └── index.js │ ├── util.js │ └── demo │ │ ├── fixed-header.md │ │ ├── nopagination.md │ │ ├── size.md │ │ ├── expand.md │ │ ├── bordered.md │ │ ├── paging.md │ │ └── row-selection-props.md └── _util │ ├── isCssAnimationSupported.js │ └── openAnimation.js ├── .babelrc ├── webpack.config.js ├── .travis.yml ├── docs ├── resource │ ├── download.en-US.md │ └── github.md ├── pattern │ └── classic.md ├── practice │ └── bussiness.md └── spec │ ├── repetition.md │ └── layout │ └── index.md ├── typings.json ├── scripts ├── update-rc.js └── lesshint-report.js ├── .editorconfig ├── site ├── theme │ ├── template │ │ ├── Content │ │ │ └── index.jsx │ │ ├── NotFound.jsx │ │ ├── BrowserDemo.jsx │ │ ├── IconSet │ │ │ ├── index.jsx │ │ │ └── CopyableIcon.jsx │ │ └── Home │ │ │ ├── Link.jsx │ │ │ └── Page4.jsx │ ├── zh-CN.js │ ├── static │ │ ├── new-version-info-modal.less │ │ ├── style.js │ │ ├── footer.less │ │ ├── not-found.less │ │ ├── page-nav.less │ │ └── motion.less │ ├── en-US.js │ └── index.js ├── bisheng-plugin-antd │ └── lib │ │ ├── node.js │ │ ├── VideoPlayer.jsx │ │ ├── process-doc.js │ │ └── template.html └── bisheng.config.js ├── .gitignore ├── .github └── PULL_REQUEST_TEMPLATE.md ├── .lesshintrc ├── index.js └── tests ├── icon.test.js └── layout.test.js /CNAME: -------------------------------------------------------------------------------- 1 | ant.design 2 | -------------------------------------------------------------------------------- /components/queue-anim/style/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/validation/style/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/locale-provider/style/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /components/icon/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | -------------------------------------------------------------------------------- /components/calendar/Constants.js: -------------------------------------------------------------------------------- 1 | export const PREFIX_CLS = 'ant-fullcalendar'; 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('antd-tools/lib/getWebpackConfig'); 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - "5" 7 | -------------------------------------------------------------------------------- /components/col/index.js: -------------------------------------------------------------------------------- 1 | import { Col } from '../layout'; 2 | export default Col; 3 | -------------------------------------------------------------------------------- /components/row/index.js: -------------------------------------------------------------------------------- 1 | import { Row } from '../layout'; 2 | export default Row; 3 | -------------------------------------------------------------------------------- /components/style/index.less: -------------------------------------------------------------------------------- 1 | @import "./themes/default"; 2 | @import "./core/index.less"; 3 | -------------------------------------------------------------------------------- /components/tag/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/affix/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/alert/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/badge/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/button/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/card/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/carousel/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/checkbox/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/collapse/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/layout/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/menu/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/message/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/popover/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/progress/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/radio/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/rate/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/spin/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/steps/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/style/index.js: -------------------------------------------------------------------------------- 1 | import 'normalize.css/normalize.css'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/switch/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/tabs/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/timeline/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/tooltip/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/breadcrumb/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/calendar/locale/en_US.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../date-picker/locale/en_US'); 2 | -------------------------------------------------------------------------------- /components/calendar/locale/ru_RU.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../date-picker/locale/ru_RU'); 2 | -------------------------------------------------------------------------------- /components/calendar/locale/zh_CN.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../date-picker/locale/zh_CN'); 2 | -------------------------------------------------------------------------------- /components/input-number/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/notification/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/pagination/locale/en_US.js: -------------------------------------------------------------------------------- 1 | module.exports = require('rc-pagination/lib/locale/en_US'); 2 | -------------------------------------------------------------------------------- /components/pagination/locale/zh_CN.js: -------------------------------------------------------------------------------- 1 | module.exports = require('rc-pagination/lib/locale/zh_CN'); 2 | -------------------------------------------------------------------------------- /components/popconfirm/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../popover/style'; 3 | -------------------------------------------------------------------------------- /components/col/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../layout/style/index.less'; 3 | -------------------------------------------------------------------------------- /components/pagination/index.jsx: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination'; 2 | 3 | export default Pagination; 4 | -------------------------------------------------------------------------------- /components/row/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../layout/style/index.less'; 3 | -------------------------------------------------------------------------------- /docs/resource/download.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | chinese: 资源下载 4 | english: Download 5 | --- 6 | 7 | TBD 8 | -------------------------------------------------------------------------------- /components/modal/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "./modal"; 3 | @import "./confirm"; 4 | -------------------------------------------------------------------------------- /docs/resource/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | link: //github.com/ant-design/ant-design 4 | english: GitHub 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /components/checkbox/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "./mixin"; 3 | 4 | .antCheckboxFn(); 5 | -------------------------------------------------------------------------------- /docs/pattern/classic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | disabled: true 4 | chinese: 典型页面 5 | english: Classic 6 | --- 7 | 8 | 敬请期待。 9 | -------------------------------------------------------------------------------- /docs/practice/bussiness.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | disabled: true 4 | chinese: 业务组件 5 | english: Business 6 | --- 7 | 8 | 占位。 9 | -------------------------------------------------------------------------------- /components/layout/index.jsx: -------------------------------------------------------------------------------- 1 | import Row from './row'; 2 | import Col from './col'; 3 | 4 | export { 5 | Row, 6 | Col, 7 | }; 8 | -------------------------------------------------------------------------------- /components/style/core/index.less: -------------------------------------------------------------------------------- 1 | @import "../mixins/index"; 2 | @import "base"; 3 | @import "iconfont"; 4 | @import "motion"; 5 | -------------------------------------------------------------------------------- /components/input/index.jsx: -------------------------------------------------------------------------------- 1 | import Input from './Input'; 2 | import Group from './Group'; 3 | 4 | Input.Group = Group; 5 | export default Input; 6 | -------------------------------------------------------------------------------- /components/affix/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | .ant-affix { 4 | position: fixed; 5 | z-index: @zindex-affix; 6 | } 7 | -------------------------------------------------------------------------------- /components/form/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../layout/style'; 6 | -------------------------------------------------------------------------------- /components/cascader/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /components/dropdown/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../button/style'; 6 | -------------------------------------------------------------------------------- /components/modal/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../button/style'; 6 | -------------------------------------------------------------------------------- /components/select/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /components/slider/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../tooltip/style'; 6 | -------------------------------------------------------------------------------- /components/tree/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../checkbox/style'; 6 | -------------------------------------------------------------------------------- /components/upload/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../progress/style'; 6 | -------------------------------------------------------------------------------- /components/time-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /components/button/index.jsx: -------------------------------------------------------------------------------- 1 | import Button from './button'; 2 | import ButtonGroup from './button-group'; 3 | 4 | Button.Group = ButtonGroup; 5 | export default Button; 6 | -------------------------------------------------------------------------------- /components/timeline/index.jsx: -------------------------------------------------------------------------------- 1 | import Timeline from './Timeline'; 2 | import TimelineItem from './TimelineItem'; 3 | 4 | Timeline.Item = TimelineItem; 5 | export default Timeline; 6 | -------------------------------------------------------------------------------- /components/dropdown/index.jsx: -------------------------------------------------------------------------------- 1 | import Dropdown from './dropdown'; 2 | import DropdownButton from './dropdown-button'; 3 | 4 | Dropdown.Button = DropdownButton; 5 | export default Dropdown; 6 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "react": "registry:dt/react#0.14.0+20160526134601", 4 | "react-dom": "registry:dt/react-dom#0.14.0+20160412154040" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /components/calendar/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../radio/style'; 7 | -------------------------------------------------------------------------------- /components/date-picker/style/MonthPicker.less: -------------------------------------------------------------------------------- 1 | .@{calendar-prefix-cls}-month { 2 | .@{calendar-prefix-cls}-month-panel, 3 | .@{calendar-prefix-cls}-year-panel { 4 | top: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /components/pagination/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../input/style'; 7 | -------------------------------------------------------------------------------- /components/breadcrumb/index.jsx: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './Breadcrumb'; 2 | import BreadcrumbItem from './BreadcrumbItem'; 3 | 4 | Breadcrumb.Item = BreadcrumbItem; 5 | export default Breadcrumb; 6 | -------------------------------------------------------------------------------- /components/date-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | import '../../time-picker/style'; 7 | -------------------------------------------------------------------------------- /components/tree-select/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../checkbox/style'; 7 | -------------------------------------------------------------------------------- /components/rate/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法。 7 | 8 | ````jsx 9 | import { Rate } from 'antd'; 10 | 11 | ReactDOM.render(, mountNode); 12 | ```` 13 | -------------------------------------------------------------------------------- /components/style/mixins/size.less: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | .size(@width; @height) { 4 | width: @width; 5 | height: @height; 6 | } 7 | 8 | .square(@size) { 9 | .size(@size; @size); 10 | } 11 | -------------------------------------------------------------------------------- /scripts/update-rc.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /* eslint strict:0, camelcase:0 */ 4 | 'use strict'; 5 | 6 | require('antd-tools/lib/updateComponents')((name) => { 7 | return !!name.match(/^rc-/); 8 | }); 9 | -------------------------------------------------------------------------------- /components/radio/index.jsx: -------------------------------------------------------------------------------- 1 | import Radio from './radio'; 2 | import Group from './group'; 3 | import Button from './radioButton'; 4 | 5 | Radio.Button = Button; 6 | Radio.Group = Group; 7 | export default Radio; 8 | -------------------------------------------------------------------------------- /components/style/mixins/opacity.less: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | .opacity(@opacity) { 4 | opacity: @opacity; 5 | // IE8 filter 6 | @opacity-ie: (@opacity * 100); 7 | filter: ~"alpha(opacity=@{opacity-ie})"; 8 | } 9 | -------------------------------------------------------------------------------- /components/radio/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法。 7 | 8 | ````jsx 9 | import { Radio } from 'antd'; 10 | 11 | ReactDOM.render(Radio, mountNode); 12 | ```` 13 | -------------------------------------------------------------------------------- /components/spin/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本用法 4 | --- 5 | 6 | 一个简单的 loading 状态。 7 | 8 | ````jsx 9 | import { Spin } from 'antd'; 10 | 11 | ReactDOM.render(, mountNode); 12 | ```` 13 | -------------------------------------------------------------------------------- /components/time-picker/locale/zh_CN.js: -------------------------------------------------------------------------------- 1 | import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN'; 2 | 3 | const locale = { 4 | placeholder: '请选择时间', 5 | ... TimepickerLocale, 6 | }; 7 | 8 | export default locale; 9 | -------------------------------------------------------------------------------- /components/transfer/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../checkbox/style'; 6 | import '../../button/style'; 7 | import '../../input/style'; 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_style = space 9 | indent_size = 2 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /components/input/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本使用 4 | --- 5 | 6 | 基本使用。 7 | 8 | ````jsx 9 | import { Input } from 'antd'; 10 | 11 | ReactDOM.render(, mountNode); 12 | ```` 13 | 14 | -------------------------------------------------------------------------------- /components/rate/demo/half.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 半星 4 | --- 5 | 6 | 支持选中半星。 7 | 8 | ````jsx 9 | import { Rate } from 'antd'; 10 | 11 | ReactDOM.render(, mountNode); 12 | ```` 13 | -------------------------------------------------------------------------------- /components/time-picker/locale/en_US.js: -------------------------------------------------------------------------------- 1 | import TimepickerLocale from 'rc-time-picker/lib/locale/en_US'; 2 | 3 | const locale = { 4 | placeholder: 'Select a time', 5 | ... TimepickerLocale, 6 | }; 7 | 8 | export default locale; 9 | -------------------------------------------------------------------------------- /components/rate/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 只读 4 | --- 5 | 6 | 只读，无法进行鼠标交互。 7 | 8 | ````jsx 9 | import { Rate } from 'antd'; 10 | 11 | ReactDOM.render(, mountNode); 12 | ```` 13 | -------------------------------------------------------------------------------- /components/icon/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default props => { 4 | let { type, className = '', ...other } = props; 5 | className += ` anticon anticon-${type}`; 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /components/style/mixins/index.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | @import "opacity.less"; 4 | @import "size.less"; 5 | @import "compatibility"; 6 | @import "clearfix"; 7 | @import "iconfont"; 8 | @import "motion"; 9 | -------------------------------------------------------------------------------- /components/alert/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法，适用于简短的警告提示。 7 | 8 | ````jsx 9 | import { Alert } from 'antd'; 10 | 11 | ReactDOM.render( 12 | , mountNode); 13 | ```` 14 | -------------------------------------------------------------------------------- /components/pagination/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 基础分页。 7 | 8 | ````jsx 9 | import { Pagination } from 'antd'; 10 | 11 | ReactDOM.render( 12 | , 13 | mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/pagination/demo/more.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 更多 4 | --- 5 | 6 | 更多分页。 7 | 8 | ````jsx 9 | import { Pagination } from 'antd'; 10 | 11 | ReactDOM.render( 12 | , 13 | mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/style/core/motion/other.less: -------------------------------------------------------------------------------- 1 | @keyframes loadingCircle { 2 | 0% { 3 | transform-origin: 50% 50%; 4 | transform: rotate(0deg); 5 | } 6 | 100% { 7 | transform-origin: 50% 50%; 8 | transform: rotate(360deg); 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /components/pagination/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 简洁 4 | --- 5 | 6 | 简单地翻页。 7 | 8 | ````jsx 9 | import { Pagination } from 'antd'; 10 | 11 | ReactDOM.render( 12 | , 13 | mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/time-picker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 禁用 4 | --- 5 | 6 | 禁用时间选择。 7 | 8 | ````jsx 9 | import { TimePicker } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | , mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/date-picker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 禁用 4 | --- 5 | 6 | 选择框的不可用状态。 7 | 8 | ````jsx 9 | import { DatePicker } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | , mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/pagination/demo/jump.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 跳转 4 | --- 5 | 6 | 快速跳转到某一页。 7 | 8 | ````jsx 9 | import { Pagination } from 'antd'; 10 | 11 | ReactDOM.render( 12 | , 13 | mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/affix/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法。 7 | 8 | ````jsx 9 | import { Affix, Button } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | 14 | 15 | , mountNode); 16 | ```` 17 | -------------------------------------------------------------------------------- /components/time-picker/demo/without-seconds.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 不展示秒 4 | --- 5 | 6 | 不展示秒，也不允许选择。 7 | 8 | ````jsx 9 | import { TimePicker } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | , mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/tooltip/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法。 7 | 8 | ````jsx 9 | import { Tooltip } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | 鼠标移上来就会出现提示 14 | 15 | , mountNode); 16 | ```` 17 | -------------------------------------------------------------------------------- /components/alert/demo/close-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 自定义关闭 4 | --- 5 | 6 | 可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 7 | 8 | ````jsx 9 | import { Alert } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | , mountNode); 14 | ```` 15 | -------------------------------------------------------------------------------- /components/table/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../radio/style'; 6 | import '../../checkbox/style'; 7 | import '../../dropdown/style'; 8 | import '../../spin/style'; 9 | import '../../pagination/style'; 10 | -------------------------------------------------------------------------------- /components/input/demo/add-on.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 前置/后置标签 4 | --- 5 | 6 | 用于配置一些固定组合。 7 | 8 | ````jsx 9 | import { Input } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | , mountNode); 14 | ```` 15 | 16 | 17 | -------------------------------------------------------------------------------- /components/pagination/MiniSelect.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Select from '../select'; 3 | 4 | export default class MiniSelect extends React.Component { 5 | static Option = Select.Option; 6 | 7 | render() { 8 | return ` 输入框定义了三种尺寸（大、默认、小），高度分别为 `32px`、`28px` 和 `22px`。 7 | 8 | 注意： 在表单里面，我们只使用大尺寸的输入框。 9 | 10 | ````jsx 11 | import { Input } from 'antd'; 12 | 13 | ReactDOM.render( 14 |
15 | 16 | 17 | 18 |
19 | , mountNode); 20 | ```` 21 | 22 | ````css 23 | .example-input .ant-input { 24 | width: 200px; 25 | margin: 0 8px 8px 0; 26 | } 27 | ```` -------------------------------------------------------------------------------- /components/spin/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 加载中 4 | type: Other 5 | english: Spin 6 | --- 7 | 8 | 用于页面和区块的加载中状态。 9 | 10 | ## 何时使用 11 | 12 | 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 13 | 14 | 15 | ## API 16 | 17 | 18 | | 参数 | 类型 | 默认值 | 说明 | 19 | |------------|----------------|-------------|--------------| 20 | | size | enum | default | spin组件中点的大小，可选值为 small default large | 21 | | spinning | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 | 22 | | tip | string | 无 | 自定义描述文案 | 23 | -------------------------------------------------------------------------------- /components/slider/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。 7 | 8 | ````jsx 9 | import { Slider } from 'antd'; 10 | 11 | ReactDOM.render(
12 | 13 | 14 | 15 |
16 | , mountNode); 17 | ```` 18 | 19 | 27 | -------------------------------------------------------------------------------- /.lesshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "propertyOrdering": false, 3 | "hexLength": "short", 4 | "stringQuotes": false, 5 | "decimalZero": false, 6 | "importantRule": false, 7 | "zeroUnit": "no_unit", 8 | "qualifyingElement": false, 9 | "duplicateProperty": false, 10 | "importPath": false, 11 | "finalNewline": false, 12 | "excludedFiles": [ 13 | "components/layout/style/mixin.less", 14 | "components/style/core/base.less", 15 | "components/style/core/iconfont.less", 16 | "components/style/core/normalize.less", 17 | "components/style/mixins/compatibility.less" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /site/theme/static/footer.less: -------------------------------------------------------------------------------- 1 | footer { 2 | clear: both; 3 | border-top: 1px solid #eee; 4 | font-size: 12px; 5 | background: #fff; 6 | position: relative; 7 | z-index: 1; 8 | color: #666; 9 | box-shadow: 0 1000px 0 1000px #fff; 10 | } 11 | 12 | footer ul { 13 | overflow: hidden; 14 | margin: 0 2%; 15 | } 16 | 17 | footer ul li { 18 | float: left; 19 | width: 25%; 20 | padding: 24px 2%; 21 | } 22 | 23 | footer ul li > h2 { 24 | font-size: 14px; 25 | margin: 0 auto 8px; 26 | font-weight: 500; 27 | } 28 | 29 | footer ul li > div { 30 | margin: 0 8px 5px 0; 31 | } 32 | -------------------------------------------------------------------------------- /components/steps/demo/vertical-small.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 竖直方向的小型步骤条 4 | --- 5 | 6 | 简单的竖直方向的小型步骤条。 7 | 8 | ````jsx 9 | import { Steps } from 'antd'; 10 | const Step = Steps.Step; 11 | 12 | const steps = [{ 13 | title: '已完成', 14 | description: '这里是信息的描述', 15 | }, { 16 | title: '进行中', 17 | description: '这里是信息的描述', 18 | }, { 19 | title: '待运行', 20 | description: '这里是信息的描述', 21 | }].map((s, i) => ); 22 | 23 | ReactDOM.render({steps}, 24 | mountNode); 25 | ```` 26 | -------------------------------------------------------------------------------- /components/affix/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 固钉 4 | type: Other 5 | english: Affix 6 | --- 7 | 8 | 将页面元素钉在可视范围。 9 | 10 | ## 何时使用 11 | 12 | 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 13 | 14 | 页面可视范围过小时，慎用此功能以免遮挡页面内容。 15 | 16 | ## API 17 | 18 | 19 | | 成员 | 说明 | 类型 | 默认值 | 20 | |-------------|----------------|--------------------|--------------| 21 | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | 22 | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | 23 | | onChange | 固定状态改变时触发的回调函数 | Function | 无 | 24 | -------------------------------------------------------------------------------- /components/alert/demo/closable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 可关闭的警告提示 4 | --- 5 | 6 | 显示关闭按钮，点击可关闭警告提示。 7 | 8 | ````jsx 9 | import { Alert } from 'antd'; 10 | 11 | const onClose = function (e) { 12 | console.log(e, '我要被关闭啦！'); 13 | }; 14 | 15 | ReactDOM.render(
16 | 20 | 25 |
, mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/card/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 卡片 4 | type: Presentation 5 | cols: 1 6 | english: Card 7 | --- 8 | 9 | 通用卡片容器。 10 | 11 | ## 何时使用 12 | 13 | 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 14 | 15 | ## API 16 | 17 | ```html 18 | 卡片内容 19 | ``` 20 | 21 | | 参数 | 说明 | 类型 | 默认值 | 22 | |----------|----------------|----------|--------------| 23 | | title | 卡片标题 | React.Element | - | 24 | | extra | 卡片右上角的操作区域 | React.Element | - | 25 | | bordered | 是否有边框 | Boolean | true | 26 | | bodyStyle | 内容区域自定义样式 | Object | - | 27 | -------------------------------------------------------------------------------- /components/breadcrumb/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | @breadcrumb-prefix-cls: ant-breadcrumb; 4 | 5 | .@{breadcrumb-prefix-cls} { 6 | color: #999; 7 | font-size: @font-size-base; 8 | 9 | a { 10 | color: @text-color; 11 | } 12 | 13 | & > span:last-child { 14 | font-weight: bold; 15 | color: @text-color; 16 | } 17 | 18 | & > span:last-child &-separator { 19 | display: none; 20 | } 21 | 22 | &-separator { 23 | margin: 0 8px; 24 | color: @border-color-base; 25 | } 26 | 27 | .anticon + span { 28 | margin-left: 4px; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /components/calendar/demo/card.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 10 3 | title: 4 | zh-CN: 卡片模式 5 | en-US: Card 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用于嵌套在空间有限的容器中。 11 | 12 | ## en-US 13 | 14 | Nested inside a container element for rendering in limited space. 15 | 16 | ````jsx 17 | import { Calendar } from 'antd'; 18 | 19 | function onPanelChange(value, mode) { 20 | console.log(value, mode); 21 | } 22 | 23 | ReactDOM.render( 24 |
25 | 26 |
27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/pagination/demo/controlled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 受控 4 | --- 5 | 6 | 受控制的页码。 7 | 8 | ````jsx 9 | import { Pagination } from 'antd'; 10 | 11 | const Container = React.createClass({ 12 | getInitialState() { 13 | return { 14 | current: 3, 15 | }; 16 | }, 17 | onChange(page) { 18 | console.log(page); 19 | this.setState({ 20 | current: page, 21 | }); 22 | }, 23 | render() { 24 | return ; 25 | }, 26 | }); 27 | 28 | ReactDOM.render(, mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/calendar/demo/locale.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 国际化 5 | en-US: locale 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN 11 | 12 | ## en_US 13 | 14 | To set the properties like time zone, language and etc. en_US, zh_CN are supported by default. 15 | 16 | ````jsx 17 | import { Calendar } from 'antd'; 18 | import enUS from 'antd/lib/calendar/locale/en_US'; 19 | 20 | function onPanelChange(value, mode) { 21 | console.log(value, mode); 22 | } 23 | 24 | ReactDOM.render( 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/steps/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本用法 4 | --- 5 | 6 | 简单的步骤条。 7 | 8 | ````jsx 9 | import { Steps } from 'antd'; 10 | const Step = Steps.Step; 11 | 12 | const steps = [{ 13 | title: '已完成', 14 | description: '这里是多信息的描述啊', 15 | }, { 16 | title: '进行中', 17 | description: '这里是多信息的耶哦耶哦哦耶哦耶', 18 | }, { 19 | title: '又一个待运行', 20 | description: '描述啊描述啊', 21 | }, { 22 | title: '待运行', 23 | description: '这里是多信息的描述啊', 24 | }].map((s, i) => ); 25 | 26 | ReactDOM.render({steps}, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/dropdown/dropdown.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RcDropdown from 'rc-dropdown'; 3 | 4 | export default class Dropdown extends React.Component { 5 | static defaultProps = { 6 | transitionName: 'slide-up', 7 | prefixCls: 'ant-dropdown', 8 | mouseEnterDelay: 0.15, 9 | mouseLeaveDelay: 0.1, 10 | } 11 | 12 | render() { 13 | const { overlay, ...otherProps } = this.props; 14 | const menu = React.cloneElement(overlay, { 15 | openTransitionName: 'zoom-big', 16 | }); 17 | return ( 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/rate/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 评分 4 | type: Form Control 5 | english: Rate 6 | --- 7 | 8 | 评分组件。 9 | 10 | ## 何时使用 11 | 12 | - 对评价进行展示。 13 | - 对事物进行快速的评级操作。 14 | 15 | ## API 16 | 17 | | 属性 | 说明 | 类型 | 默认值 | 18 | |------------|----------------|-------------------|-------------| 19 | | count | star 总数 | Number | 5 | 20 | | value | 当前数，受控值 | Number | - | 21 | | defaultValue | 默认值 | Number | 0 | 22 | | onChange(value: Number) | 回调 | Function | - | 23 | | allowHalf | 是否允许半选 | Boolean | false | 24 | | disabled | 只读，无法进行交互 | Boolean | false | 25 | -------------------------------------------------------------------------------- /components/steps/demo/small-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 迷你版 4 | --- 5 | 6 | 迷你版的步骤条，通过设置 `` 启用. 7 | 8 | ````jsx 9 | import { Steps } from 'antd'; 10 | const Step = Steps.Step; 11 | 12 | const steps = [{ 13 | status: 'finish', 14 | title: '已完成', 15 | }, { 16 | status: 'process', 17 | title: '进行中', 18 | }, { 19 | status: 'wait', 20 | title: '待运行', 21 | }, { 22 | status: 'wait', 23 | title: '待运行', 24 | }].map((s, i) => ); 25 | 26 | ReactDOM.render({steps}, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/date-picker/demo/range.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 日期范围二 4 | --- 5 | 6 | 使用 `RangePicker` 实现日期范围选择有更好的交互体验。 7 | 8 | ````jsx 9 | import { DatePicker } from 'antd'; 10 | const RangePicker = DatePicker.RangePicker; 11 | 12 | function onChange(value, dateString) { 13 | console.log('From: ', value[0], ', to: ', value[1]); 14 | console.log('From: ', dateString[0], ', to: ', dateString[1]); 15 | } 16 | ReactDOM.render(
17 | 18 |
19 | 20 |
, mountNode); 21 | ```` 22 | -------------------------------------------------------------------------------- /components/form/ValueMixin.jsx: -------------------------------------------------------------------------------- 1 | const ValueMixin = { 2 | setValue(field, e) { 3 | let v = e; 4 | const target = e && e.target; 5 | if (target) { 6 | if ((`${target.nodeName}`).toLowerCase() === 'input' && 7 | target.type === 'checkbox') { 8 | v = target.checked; 9 | } else { 10 | v = e.target.value; 11 | } 12 | } 13 | const newFormData = {}; 14 | newFormData[field] = v; 15 | this.setState({ 16 | formData: { 17 | ...this.state.formData, 18 | ...newFormData, 19 | }, 20 | }); 21 | }, 22 | }; 23 | 24 | export default ValueMixin; 25 | -------------------------------------------------------------------------------- /components/progress/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Progress from './progress'; 3 | import warning from 'warning'; 4 | 5 | const AntProgress = Progress; 6 | 7 | // For downward compatibility 8 | AntProgress.Line = (props) => { 9 | warning(false, ' is deprecated, use instead.'); 10 | return ; 11 | }; 12 | AntProgress.Circle = (props) => { 13 | warning(false, ' is deprecated, use instead.'); 14 | return ; 15 | }; 16 | 17 | export default AntProgress; 18 | -------------------------------------------------------------------------------- /components/style/core/motion/fade.less: -------------------------------------------------------------------------------- 1 | .fade-motion(@className, @keyframeName) { 2 | .make-motion(@className, @keyframeName); 3 | .@{className}-enter, 4 | .@{className}-appear { 5 | opacity: 0; 6 | animation-timing-function: linear; 7 | } 8 | .@{className}-leave { 9 | animation-timing-function: linear; 10 | } 11 | } 12 | 13 | .fade-motion(fade, antFade); 14 | 15 | @keyframes antFadeIn { 16 | 0% { 17 | opacity: 0; 18 | } 19 | 100% { 20 | opacity: 1; 21 | } 22 | } 23 | 24 | @keyframes antFadeOut { 25 | 0% { 26 | opacity: 1; 27 | } 28 | 100% { 29 | opacity: 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /components/date-picker/index.jsx: -------------------------------------------------------------------------------- 1 | import RcCalendar from 'rc-calendar'; 2 | import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; 3 | import createPicker from './createPicker'; 4 | import wrapPicker from './wrapPicker'; 5 | import RangePicker from './RangePicker'; 6 | import Calendar from './Calendar'; 7 | 8 | const DatePicker = wrapPicker(createPicker(RcCalendar)); 9 | const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM'); 10 | 11 | DatePicker.Calendar = Calendar; 12 | DatePicker.RangePicker = wrapPicker(RangePicker, 'yyyy-MM-dd'); 13 | DatePicker.MonthPicker = MonthPicker; 14 | 15 | export default DatePicker; 16 | -------------------------------------------------------------------------------- /components/date-picker/locale/en_US.js: -------------------------------------------------------------------------------- 1 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US'; 2 | import CalendarLocale from 'rc-calendar/lib/locale/en_US'; 3 | import TimePickerLocale from '../../time-picker/locale/en_US'; 4 | 5 | // 统一合并为完整的 Locale 6 | const locale = { ...GregorianCalendarLocale }; 7 | locale.lang = { 8 | placeholder: 'Select date', 9 | rangePlaceholder: ['Start date', 'End date'], 10 | ...CalendarLocale, 11 | }; 12 | 13 | locale.timePickerLocale = { ...TimePickerLocale }; 14 | 15 | // All settings at: 16 | // https://github.com/ant-design/ant-design/issues/424 17 | 18 | export default locale; 19 | -------------------------------------------------------------------------------- /components/tag/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 标签 4 | type: Presentation 5 | english: Tag 6 | --- 7 | 8 | 进行标记和分类的小标签。 9 | 10 | ## 何时使用 11 | 12 | - 用于标记事物的属性和维度。 13 | - 进行分类。 14 | 15 | ## API 16 | 17 | | 参数 | 说明 | 类型 | 默认值 | 18 | |----------------|-------------------------------|------|--------| 19 | | closable | 标签是否可以关闭 | boolean | false | 20 | | onClose | 关闭时的回调 | function(event) | - | 21 | | afterClose | 动画关闭后的回调 | function(event) | - | 22 | | color | 标签的色彩：`blue` `green` `yellow` `red` | string | - | 23 | -------------------------------------------------------------------------------- /components/steps/demo/vertical.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 竖直方向的步骤条 4 | --- 5 | 6 | 简单的竖直方向的步骤条。 7 | 8 | ````jsx 9 | import { Steps } from 'antd'; 10 | const Step = Steps.Step; 11 | 12 | const steps = [{ 13 | title: '已完成', 14 | description: '这里是信息的描述', 15 | }, { 16 | title: '进行中', 17 | description: '这里是信息的描述', 18 | }, { 19 | title: '待运行', 20 | description: '这里是信息的描述', 21 | }, { 22 | title: '又一个待运行', 23 | description: '这里是信息的描述', 24 | }].map((s, i) => ); 25 | 26 | ReactDOM.render({steps}, 27 | mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /docs/spec/repetition.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 十大原则 3 | order: 4 4 | subtitle: Repetition 5 | english: 重复 6 | --- 7 | 8 | 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 9 | 10 | --- 11 | 12 | ## 重复元素 13 | 14 | 线框重复示例 15 | 16 | 设计要素重复示例 17 | 18 | 文案格式重复示例 19 | 20 | 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 21 | -------------------------------------------------------------------------------- /components/modal/demo/confirm-promise.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 确认对话框 4 | --- 5 | 6 | 使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭 7 | 8 | ````jsx 9 | import { Modal, Button } from 'antd'; 10 | const confirm = Modal.confirm; 11 | 12 | function showConfirm() { 13 | confirm({ 14 | title: '您是否确认要删除这项内容', 15 | content: '点确认 1 秒后关闭', 16 | onOk() { 17 | return new Promise((resolve) => { 18 | setTimeout(resolve, 1000); 19 | }); 20 | }, 21 | onCancel() {}, 22 | }); 23 | } 24 | 25 | ReactDOM.render( 26 | 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/select/demo/search.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 带搜索框 4 | --- 5 | 6 | 展开后可对选项进行搜索。 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | function handleChange(value) { 13 | console.log(`selected ${value}`); 14 | } 15 | 16 | ReactDOM.render( 17 | 27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/select/demo/tags.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 标签 4 | --- 5 | 6 | tags select，随意输入的内容（scroll the menu） 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | let children = []; 13 | for (let i = 10; i < 36; i++) { 14 | children.push(); 15 | } 16 | 17 | function handleChange(value) { 18 | console.log(`selected ${value}`); 19 | } 20 | 21 | ReactDOM.render( 22 | 28 | , mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/steps/demo/error.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 步骤运行错误 4 | --- 5 | 6 | 使用 Steps 的 `status` 属性来指定当前步骤的状态。 7 | 8 | ````jsx 9 | import { Steps } from 'antd'; 10 | const Step = Steps.Step; 11 | 12 | const steps = [{ 13 | title: '已完成', 14 | description: '这里是多信息的描述啊', 15 | }, { 16 | title: '错误示例', 17 | description: '这里是多信息的耶哦耶哦哦耶哦耶', 18 | }, { 19 | title: '又一个待运行', 20 | description: '描述啊描述啊', 21 | }, { 22 | title: '待运行', 23 | description: '这里是多信息的描述啊', 24 | }].map((s, i) => ); 25 | 26 | ReactDOM.render({steps}, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/steps/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RcSteps from 'rc-steps'; 3 | 4 | export default class Steps extends React.Component { 5 | static Step = RcSteps.Step; 6 | 7 | static defaultProps = { 8 | prefixCls: 'ant-steps', 9 | iconPrefix: 'ant', 10 | maxDescriptionWidth: 100, 11 | current: 0, 12 | } 13 | 14 | render() { 15 | let maxDescriptionWidth = this.props.maxDescriptionWidth; 16 | if (this.props.direction === 'vertical') { 17 | maxDescriptionWidth = 'auto'; 18 | } 19 | return ( 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /components/layout/demo/offset.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 左右偏移 4 | --- 5 | 6 | 列偏移。 7 | 8 | 使用 `offset` 可以将列向右侧偏。例如，`offset={4}` 将元素向右侧偏移了 4 个列（column）的宽度。 9 | 10 | ````jsx 11 | import { Row, Col } from 'antd'; 12 | 13 | ReactDOM.render( 14 |
15 | 16 | .col-8 17 | .col-8 18 | 19 | 20 | .col-6 .col-offset-6 21 | .col-6 .col-offset-6 22 | 23 | 24 | .col-12 .col-offset-6 25 | 26 |
, 27 | mountNode 28 | ); 29 | ```` 30 | -------------------------------------------------------------------------------- /site/theme/template/BrowserDemo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function BrowserDemo(props) { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 | {props.children} 16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /components/dropdown/demo/sub-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 多级菜单 4 | --- 5 | 6 | 传入的菜单里有多个层级。 7 | 8 | ````jsx 9 | import { Menu, Dropdown, Icon } from 'antd'; 10 | const SubMenu = Menu.SubMenu; 11 | 12 | const menu = ( 13 | 14 | 第一个菜单项 15 | 第二个菜单项 16 | 17 | 第三个菜单项 18 | 第四个菜单项 19 | 20 | 21 | ); 22 | 23 | ReactDOM.render( 24 | 25 | 26 | 多级菜单 27 | 28 | 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/popover/demo/triggerType.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 三种触发方式 4 | --- 5 | 6 | 鼠标移入、聚集、点击。 7 | 8 | ````jsx 9 | import { Popover, Button } from 'antd'; 10 | 11 | const content = ( 12 |
13 |

内容

14 |

内容

15 |
16 | ); 17 | 18 | ReactDOM.render( 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/queue-anim/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 默认 4 | --- 5 | 6 | 最简单的进场例子。 7 | 8 | ````jsx 9 | import { QueueAnim } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 |
依次进场
14 |
依次进场
15 |
依次进场
16 |
依次进场
17 |
依次进场
18 |
依次进场
19 | 20 | , mountNode); 21 | ```` 22 | 23 | ````css 24 | .code-box-demo > div { 25 | overflow: hidden; 26 | } 27 | 28 | .code-box-demo .buttons { 29 | text-align: center; 30 | margin: 0 auto; 31 | margin-bottom: 20px; 32 | } 33 | ```` 34 | -------------------------------------------------------------------------------- /site/theme/template/IconSet/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import CopyableIcon from './CopyableIcon'; 4 | 5 | export default class IconSet extends React.Component { 6 | static defaultProps = { 7 | icons: [], 8 | } 9 | 10 | render() { 11 | const className = this.props.className; 12 | const listClassName = classNames({ 13 | 'anticons-list': true, 14 | clearfix: true, 15 | [className]: !!className, 16 | }); 17 | return ( 18 |
    19 | {this.props.icons.map((type, i) => )} 20 |
21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /site/bisheng-plugin-antd/lib/VideoPlayer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SublimeVideo from 'react-sublime-video'; 3 | 4 | export default function VideoPlayer({ video }) { 5 | const { alt, description, src } = video; 6 | const videoClassName = video.class; 7 | 8 | return ( 9 |
10 |
11 | 12 |
13 |
{alt}
14 |
16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /components/select/demo/multiple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 多选 4 | --- 5 | 6 | 多选，从已有条目中选择（scroll the menu） 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | let children = []; 13 | for (let i = 10; i < 36; i++) { 14 | children.push(); 15 | } 16 | 17 | function handleChange(value) { 18 | console.log(`selected ${value}`); 19 | } 20 | 21 | ReactDOM.render( 22 | 28 | , mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/date-picker/locale/ru_RU.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Andrey Gayvoronsky on 13/04/16. 3 | */ 4 | 5 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU'; 6 | import CalendarLocale from 'rc-calendar/lib/locale/ru_RU'; 7 | import TimePickerLocale from '../../time-picker/locale/ru_RU'; 8 | 9 | const locale = { ...GregorianCalendarLocale }; 10 | locale.lang = { 11 | placeholder: 'Выберите дату', 12 | rangePlaceholder: ['Начальная дата', 'Конечная дата'], 13 | ...CalendarLocale, 14 | }; 15 | 16 | locale.timePickerLocale = { ...TimePickerLocale }; 17 | 18 | // All settings at: 19 | // https://github.com/ant-design/ant-design/issues/424 20 | 21 | export default locale; 22 | -------------------------------------------------------------------------------- /components/dropdown/demo/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 触发事件 4 | --- 5 | 6 | 点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。 7 | 8 | ````jsx 9 | import { Menu, Dropdown, Icon } from 'antd'; 10 | const onClick = function ({ key }) { 11 | console.log(`点击了菜单${key}`); 12 | }; 13 | 14 | const menu = ( 15 | 16 | 第一个菜单项 17 | 第二个菜单项 18 | 第三个菜单项 19 | 20 | ); 21 | 22 | ReactDOM.render( 23 | 24 | 25 | 鼠标移入，点击菜单 26 | 27 | 28 | , mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/input-number/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import RcInputNumber from 'rc-input-number'; 4 | 5 | export default class InputNumber extends React.Component { 6 | static defaultProps = { 7 | prefixCls: 'ant-input-number', 8 | step: 1, 9 | } 10 | 11 | render() { 12 | const { className, size, ...other } = this.props; 13 | const inputNumberClass = classNames({ 14 | [`${this.props.prefixCls}-lg`]: size === 'large', 15 | [`${this.props.prefixCls}-sm`]: size === 'small', 16 | [className]: !!className, 17 | }); 18 | 19 | return ; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/rate/demo/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 文案展现 4 | --- 5 | 6 | 给评分组件加上文案展示。 7 | 8 | ````jsx 9 | import { Rate } from 'antd'; 10 | 11 | const Rater = React.createClass({ 12 | getInitialState() { 13 | return { 14 | value: 3, 15 | count: null, 16 | }; 17 | }, 18 | handleChange(value) { 19 | this.setState({ value }); 20 | }, 21 | render() { 22 | const { value } = this.state; 23 | return ( 24 | 25 | 26 | {value && {value} 星} 27 | 28 | ); 29 | }, 30 | }); 31 | 32 | ReactDOM.render(, mountNode); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/button/button-group.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | const prefix = 'ant-btn-group-'; 5 | 6 | export default function ButtonGroup(props) { 7 | const { size, className, ...others } = props; 8 | 9 | // large => lg 10 | // small => sm 11 | const sizeCls = ({ 12 | large: 'lg', 13 | small: 'sm', 14 | })[size] || ''; 15 | 16 | const classes = classNames({ 17 | 'ant-btn-group': true, 18 | [prefix + sizeCls]: sizeCls, 19 | [className]: className, 20 | }); 21 | 22 | return
; 23 | } 24 | 25 | ButtonGroup.propTypes = { 26 | size: React.PropTypes.oneOf(['large', 'small']), 27 | }; 28 | -------------------------------------------------------------------------------- /site/bisheng-plugin-antd/lib/process-doc.js: -------------------------------------------------------------------------------- 1 | const JsonML = require('jsonml.js/lib/utils'); 2 | 3 | module.exports = (markdownData) => { 4 | const contentChildren = JsonML.getChildren(markdownData.content); 5 | const apiStartIndex = contentChildren.findIndex((node) => { 6 | return JsonML.getTagName(node) === 'h2' && 7 | JsonML.getChildren(node)[0] === 'API'; 8 | }); 9 | 10 | if (apiStartIndex > -1) { 11 | const content = contentChildren.slice(0, apiStartIndex); 12 | markdownData.content = ['section'].concat(content); 13 | 14 | const api = contentChildren.slice(apiStartIndex); 15 | markdownData.api = ['section'].concat(api); 16 | } 17 | 18 | return markdownData; 19 | }; 20 | -------------------------------------------------------------------------------- /components/date-picker/locale/zh_CN.js: -------------------------------------------------------------------------------- 1 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN'; 2 | import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; 3 | import TimePickerLocale from '../../time-picker/locale/zh_CN'; 4 | 5 | // 统一合并为完整的 Locale 6 | const locale = { ...GregorianCalendarLocale }; 7 | locale.lang = { 8 | placeholder: '请选择日期', 9 | rangePlaceholder: ['开始日期', '结束日期'], 10 | ...CalendarLocale, 11 | }; 12 | 13 | locale.timePickerLocale = { ...TimePickerLocale }; 14 | 15 | // should add whitespace between char in Button 16 | locale.lang.ok = '确 定'; 17 | 18 | // All settings at: 19 | // https://github.com/ant-design/ant-design/issues/424 20 | 21 | export default locale; 22 | -------------------------------------------------------------------------------- /components/timeline/demo/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 圆圈颜色 4 | --- 5 | 6 | 圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。 7 | 8 | ````jsx 9 | import { Timeline } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | 创建服务现场 2015-09-01 14 | 创建服务现场 2015-09-01 15 | 16 |

初步排除网络异常1

17 |

初步排除网络异常2

18 |

初步排除网络异常3 2015-09-01

19 | 20 | 21 |

技术测试异常1

22 |

技术测试异常2

23 |

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

24 | 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/message/demo/other.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 其他提示类型 4 | --- 5 | 6 | 包括成功、失败、警告。 7 | 8 | ````jsx 9 | import { message, Button } from 'antd'; 10 | 11 | const success = function () { 12 | message.success('这是一条成功提示'); 13 | }; 14 | 15 | const error = function () { 16 | message.error('这是一条报错提示'); 17 | }; 18 | 19 | const warning = function () { 20 | message.warning('这是一条警告提示'); 21 | }; 22 | 23 | ReactDOM.render(
24 | 25 | 26 | 27 |
, mountNode); 28 | ```` 29 | 30 | 35 | -------------------------------------------------------------------------------- /components/switch/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 不可用 4 | --- 5 | 6 | Switch 失效状态。 7 | 8 | ````jsx 9 | import { Switch, Button } from 'antd'; 10 | 11 | const Test = React.createClass({ 12 | getInitialState() { 13 | return { 14 | disabled: true, 15 | }; 16 | }, 17 | toggle() { 18 | this.setState({ 19 | disabled: !this.state.disabled, 20 | }); 21 | }, 22 | render() { 23 | return ( 24 |
25 | 26 |
27 |
28 | 29 |
30 | ); 31 | }, 32 | }); 33 | 34 | ReactDOM.render(, mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /components/tabs/demo/slide.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 滑动 4 | --- 5 | 6 | 可以左右滑动，容纳更多标签。 7 | 8 | ````jsx 9 | import { Tabs } from 'antd'; 10 | const TabPane = Tabs.TabPane; 11 | 12 | ReactDOM.render( 13 | 14 | 选项卡一 15 | 选项卡二 16 | 选项卡三 17 | 选项卡四 18 | 选项卡五 19 | 选项卡六 20 | 选项卡七 21 | 选项卡八 22 | 选项卡九 23 | 24 | , mountNode); 25 | ```` 26 | -------------------------------------------------------------------------------- /components/_util/isCssAnimationSupported.js: -------------------------------------------------------------------------------- 1 | let animation; 2 | 3 | function isCssAnimationSupported() { 4 | if (animation !== undefined) { 5 | return animation; 6 | } 7 | const domPrefixes = 'Webkit Moz O ms Khtml'.split(' '); 8 | const elm = document.createElement('div'); 9 | if (elm.style.animationName !== undefined) { 10 | animation = true; 11 | } 12 | if (animation !== undefined) { 13 | for (let i = 0; i < domPrefixes.length; i++) { 14 | if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) { 15 | animation = true; 16 | break; 17 | } 18 | } 19 | } 20 | animation = animation || false; 21 | return animation; 22 | } 23 | 24 | export default isCssAnimationSupported; 25 | -------------------------------------------------------------------------------- /components/alert/demo/description.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 含有辅助性文字介绍 4 | --- 5 | 6 | 含有辅助性文字介绍的警告提示。 7 | 8 | ````jsx 9 | import { Alert } from 'antd'; 10 | 11 | ReactDOM.render(
12 | 15 | 18 | 22 | 26 |
, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/input-number/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 三种大小 4 | --- 5 | 6 | 三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` 7 | 8 | ````jsx 9 | import { InputNumber } from 'antd'; 10 | 11 | function onChange(value) { 12 | console.log('changed', value); 13 | } 14 | 15 | ReactDOM.render( 16 |
17 | 18 | 19 | 20 |
21 | , mountNode); 22 | ```` 23 | 24 | ````css 25 | .ant-input-number { 26 | margin-right: 10px; 27 | } 28 | ```` 29 | -------------------------------------------------------------------------------- /components/layout/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基础布局 4 | --- 5 | 6 | 从堆叠到水平排列。 7 | 8 | 使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。 9 | 10 | ````jsx 11 | import { Row, Col } from 'antd'; 12 | 13 | ReactDOM.render( 14 |
15 | 16 | .col-12 17 | .col-12 18 | 19 | 20 | .col-8 21 | .col-8 22 | .col-8 23 | 24 | 25 | .col-6 26 | .col-6 27 | .col-6 28 | .col-6 29 | 30 |
, 31 | mountNode 32 | ); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/time-picker/demo/hide-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 只显示部分选项 4 | --- 5 | 6 | 通过 `hideDisabledOptions` 将不可选的选项隐藏。 7 | 8 | ````jsx 9 | import { TimePicker } from 'antd'; 10 | 11 | function newArray(start, end) { 12 | let result = []; 13 | for (let i = start; i < end; i++) { 14 | result.push(i); 15 | } 16 | return result; 17 | } 18 | 19 | function disabledMinutes() { 20 | return newArray(0, 60).filter(value => value % 10 !== 0); 21 | } 22 | 23 | function disabledSeconds() { 24 | return newArray(0, 60).filter(value => value % 30 !== 0); 25 | } 26 | 27 | ReactDOM.render( 28 | 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/card/demo/no-padding.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 更灵活的内容展示 4 | --- 5 | 6 | 可以调整默认边距，设定宽度。 7 | 8 | ````jsx 9 | import { Card } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 |
14 | example 15 |
16 |
17 |

欧美街拍

18 |

www.instagram.com

19 |
20 | 21 | , mountNode); 22 | ```` 23 | 24 | ````css 25 | .custom-image img { 26 | display: block; 27 | } 28 | .custom-card { 29 | padding: 10px 16px; 30 | } 31 | .custom-card p { 32 | color: #999; 33 | } 34 | ```` 35 | -------------------------------------------------------------------------------- /components/select/demo/label-in-value.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 10 3 | title: 获得选项的文本 4 | --- 5 | 6 | 默认情况下 `onChange` 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 `labelInValue` 属性。 7 | 8 | 选中项的 label 会被包装到 value 中传递给 `onChange` 等函数，此时 value 是一个对象。 9 | 10 | ````jsx 11 | import { Select } from 'antd'; 12 | const Option = Select.Option; 13 | 14 | function handleChange(value) { 15 | console.log(value); // { key: "lucy", label: "Lucy (101)" } 16 | } 17 | 18 | ReactDOM.render( 19 |
20 | 24 |
25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/dropdown/demo/trigger.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 触发方式 4 | --- 5 | 6 | 默认是移入触发菜单，可以点击触发。 7 | 8 | ````jsx 9 | import { Menu, Dropdown, Icon } from 'antd'; 10 | 11 | const menu = ( 12 | 13 | 14 | 第一个菜单项 15 | 16 | 17 | 第二个菜单项 18 | 19 | 20 | 第三个菜单项 21 | 22 | ); 23 | 24 | ReactDOM.render(
25 | 26 | 27 | 点击触发 28 | 29 | 30 |
, mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/dropdown/demo/item.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 其他元素 4 | --- 5 | 6 | 分割线和不可用菜单项。 7 | 8 | ````jsx 9 | import { Menu, Dropdown, Icon } from 'antd'; 10 | 11 | const menu = ( 12 | 13 | 14 | 第一个菜单项 15 | 16 | 17 | 第二个菜单项 18 | 19 | 20 | 第三个菜单项（不可用） 21 | 22 | ); 23 | 24 | ReactDOM.render( 25 | 26 | 27 | 鼠标移入 28 | 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/dropdown/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的下拉菜单。 7 | 8 | ````jsx 9 | import { Menu, Dropdown, Icon } from 'antd'; 10 | 11 | const menu = ( 12 | 13 | 14 | 第一个菜单项 15 | 16 | 17 | 第二个菜单项 18 | 19 | 20 | 第三个菜单项 21 | 22 | 23 | ); 24 | 25 | ReactDOM.render( 26 | 27 | 28 | 触发链接 29 | 30 | 31 | , mountNode); 32 | ```` 33 | -------------------------------------------------------------------------------- /site/theme/static/not-found.less: -------------------------------------------------------------------------------- 1 | #page-404 { 2 | background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); 3 | width: 100%; 4 | height: 100%; 5 | background-repeat: no-repeat; 6 | background-attachment: fixed; 7 | background-position: center; 8 | background-size: 100%; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | z-index: 100; 15 | 16 | section { 17 | position: absolute; 18 | top: 48%; 19 | left: 55%; 20 | margin: -103px 0 0 -120px; 21 | 22 | text-align: center; 23 | } 24 | 25 | h1 { 26 | color: #2DB7F5; 27 | font-size: 120px; 28 | font-weight: 500; 29 | } 30 | 31 | p { 32 | color: #666; 33 | font-size: 18px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/select/demo/optgroup.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 分组 4 | --- 5 | 6 | 用 `OptGroup` 进行选项分组。 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | const OptGroup = Select.OptGroup; 12 | 13 | function handleChange(value) { 14 | console.log(`selected ${value}`); 15 | } 16 | 17 | ReactDOM.render( 18 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/tree/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RcTree from 'rc-tree'; 3 | import animation from '../_util/openAnimation'; 4 | 5 | export default class Tree extends React.Component { 6 | static TreeNode = RcTree.TreeNode; 7 | 8 | static defaultProps = { 9 | prefixCls: 'ant-tree', 10 | checkable: false, 11 | showIcon: false, 12 | openAnimation: animation, 13 | } 14 | 15 | render() { 16 | const props = this.props; 17 | let checkable = props.checkable; 18 | if (checkable) { 19 | checkable = ; 20 | } 21 | return ( 22 | 23 | {this.props.children} 24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /site/theme/template/Home/Link.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ScrollLink from 'rc-scroll-anim/lib/ScrollLink'; 3 | import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen'; 4 | 5 | export default class Link extends React.Component { 6 | componentDidMount() { 7 | scrollScreen.init({ docHeight: 4746 }); 8 | } 9 | 10 | render() { 11 | return ( 12 |
13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/button/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 按钮尺寸 5 | en-US: Size 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 按钮有大、中、小三种尺寸。 11 | 12 | 通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 13 | 14 | ## en-US 15 | 16 | Ant Design supports a default button size as well as a large and small size. 17 | 18 | If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size. 19 | 20 | ````jsx 21 | import { Button } from 'antd'; 22 | 23 | ReactDOM.render(
24 | 25 | 26 | 27 |
, mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/upload/demo/beforeUpload.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | title: 限制用户上传的文件 4 | --- 5 | 6 | 可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。 7 | 8 | 也支持异步检查，`beforeUpload` 的返回值可以是一个 Promise：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。 9 | 10 | ````jsx 11 | import { Upload, Button, Icon, message } from 'antd'; 12 | 13 | const props = { 14 | action: '/upload.do', 15 | beforeUpload(file) { 16 | const isJPG = file.type === 'image/jpeg'; 17 | if (!isJPG) { 18 | message.error('只能上传 JPG 文件哦！'); 19 | } 20 | return isJPG; 21 | }, 22 | }; 23 | 24 | ReactDOM.render( 25 | 26 | 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/calendar/demo/custom-render.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 自定义渲染 5 | en-US: Custom Render 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。 11 | 12 | ## en-US 13 | 14 | This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need. 15 | 16 | ````jsx 17 | import { Calendar } from 'antd'; 18 | 19 | function dateCellRender(value) { 20 | return
自定义日数据 {value.getDayOfMonth()}
; 21 | } 22 | 23 | function monthCellRender(value) { 24 | return
自定义月数据 {value.getMonth()}
; 25 | } 26 | 27 | ReactDOM.render( 28 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/table/demo/fixed-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 16 3 | title: 固定表头 4 | --- 5 | 6 | 方便一页内展示大量数据。 7 | 8 | 需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。 9 | 10 | ````jsx 11 | import { Table } from 'antd'; 12 | 13 | const columns = [{ 14 | title: '姓名', 15 | dataIndex: 'name', 16 | width: 150, 17 | }, { 18 | title: '年龄', 19 | dataIndex: 'age', 20 | width: 150, 21 | }, { 22 | title: '住址', 23 | dataIndex: 'address', 24 | }]; 25 | 26 | const data = []; 27 | for (let i = 0; i < 100; i++) { 28 | data.push({ 29 | key: i, 30 | name: `李大嘴${i}`, 31 | age: 32, 32 | address: `西湖区湖底公园${i}号`, 33 | }); 34 | } 35 | 36 | ReactDOM.render( 37 | 38 | , mountNode); 39 | ```` 40 | -------------------------------------------------------------------------------- /components/dropdown/demo/dropdown-button.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 带下拉框的按钮 4 | --- 5 | 6 | 左边是按钮，右边是额外的相关功能菜单。 7 | 8 | ````jsx 9 | import { Menu, Dropdown } from 'antd'; 10 | const DropdownButton = Dropdown.Button; 11 | 12 | function handleButtonClick(e) { 13 | console.log('click left button', e); 14 | } 15 | 16 | function handleMenuClick(e) { 17 | console.log('click', e); 18 | } 19 | 20 | const menu = ( 21 | 22 | 第一个菜单项 23 | 第二个菜单项 24 | 第三个菜单项 25 | 26 | ); 27 | 28 | ReactDOM.render( 29 | 30 | 某功能按钮 31 | 32 | , mountNode); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/select/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本使用 4 | --- 5 | 6 | 基本使用。 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | function handleChange(value) { 13 | console.log(`selected ${value}`); 14 | } 15 | 16 | ReactDOM.render( 17 |
18 | 24 | 27 |
28 | , mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/collapse/demo/accordion.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 手风琴 4 | --- 5 | 6 | 手风琴，每次只打开一个tab。默认打开第一个。 7 | 8 | ````jsx 9 | import { Collapse } from 'antd'; 10 | const Panel = Collapse.Panel; 11 | 12 | const text = ` 13 | A dog is a type of domesticated animal. 14 | Known for its loyalty and faithfulness, 15 | it can be found as a welcome guest in many households across the world. 16 | `; 17 | 18 | ReactDOM.render( 19 | 20 | 21 |

{text}

22 | 23 | 24 |

{text}

25 | 26 | 27 |

{text}

28 | 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/input-number/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 不可用 4 | --- 5 | 6 | 点击按钮切换可用状态。 7 | 8 | ````jsx 9 | import { InputNumber, Button } from 'antd'; 10 | 11 | const Test = React.createClass({ 12 | getInitialState() { 13 | return { 14 | disabled: true, 15 | }; 16 | }, 17 | toggle() { 18 | this.setState({ 19 | disabled: !this.state.disabled, 20 | }); 21 | }, 22 | render() { 23 | return ( 24 |
25 | 26 |
27 | 28 |
29 |
30 | ); 31 | }, 32 | }); 33 | 34 | ReactDOM.render(, mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /components/style/core/motion/swing.less: -------------------------------------------------------------------------------- 1 | .swing-motion(@className, @keyframeName) { 2 | .@{className}-enter, 3 | .@{className}-appear { 4 | .motion-common(); 5 | animation-play-state: paused; 6 | } 7 | .@{className}-enter.@{className}-enter-active, 8 | .@{className}-appear.@{className}-appear-active { 9 | animation-name: ~"@{keyframeName}In"; 10 | animation-play-state: running; 11 | } 12 | } 13 | 14 | .swing-motion(swing, antSwing); 15 | 16 | @keyframes antSwingIn { 17 | 0%, 18 | 100% { 19 | transform: translateX(0px); 20 | } 21 | 20% { 22 | transform: translateX(-10px); 23 | } 24 | 40% { 25 | transform: translateX(10px); 26 | } 27 | 60% { 28 | transform: translateX(-5px); 29 | } 30 | 80% { 31 | transform: translateX(5px); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /site/theme/static/page-nav.less: -------------------------------------------------------------------------------- 1 | .prev-next-nav { 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | width: 100%; 6 | overflow: hidden; 7 | font-size: 16px; 8 | border-top: 1px solid #e9e9e9; 9 | } 10 | 11 | .prev-next-nav > .prev-page, 12 | .prev-next-nav > .next-page { 13 | padding: 0 24px; 14 | width: 50%; 15 | float: left; 16 | line-height: 72px; 17 | height: 72px; 18 | } 19 | 20 | .prev-next-nav > a.prev-page:before { 21 | font-family: 'anticon'; 22 | content: '\e601'; 23 | font-size: 12px; 24 | margin-right: 1em; 25 | } 26 | 27 | .prev-next-nav > .next-page { 28 | text-align: right; 29 | float: right; 30 | } 31 | 32 | .prev-next-nav > a.next-page:after { 33 | font-family: 'anticon'; 34 | content: '\e600'; 35 | font-size: 12px; 36 | margin-left: 1em; 37 | } -------------------------------------------------------------------------------- /components/table/demo/nopagination.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 不显示分页 4 | --- 5 | 6 | 传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [{ 12 | title: '姓名', 13 | dataIndex: 'name', 14 | }, { 15 | title: '年龄', 16 | dataIndex: 'age', 17 | }, { 18 | title: '住址', 19 | dataIndex: 'address', 20 | }]; 21 | 22 | const data = [{ 23 | key: '1', 24 | name: '胡彦斌', 25 | age: 32, 26 | address: '西湖区湖底公园1号', 27 | }, { 28 | key: '2', 29 | name: '胡彦祖', 30 | age: 42, 31 | address: '西湖区湖底公园1号', 32 | }, { 33 | key: '3', 34 | name: '李大嘴', 35 | age: 32, 36 | address: '西湖区湖底公园1号', 37 | }]; 38 | 39 | ReactDOM.render(
40 | , mountNode); 41 | ```` 42 | -------------------------------------------------------------------------------- /components/time-picker/demo/disable-options.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 禁止选项 4 | --- 5 | 6 | 限制选择 `20:30` 到 `23:30` 这个时间段。 7 | 8 | ````jsx 9 | import { TimePicker } from 'antd'; 10 | 11 | function newArray(start, end) { 12 | let result = []; 13 | for (let i = start; i < end; i++) { 14 | result.push(i); 15 | } 16 | return result; 17 | } 18 | 19 | function disabledHours() { 20 | let hours = newArray(0, 60); 21 | hours.splice(20, 4); 22 | return hours; 23 | } 24 | 25 | function disabledMinutes(h) { 26 | if (h === 20) { 27 | return newArray(0, 31); 28 | } else if (h === 23) { 29 | return newArray(30, 60); 30 | } 31 | return []; 32 | } 33 | 34 | ReactDOM.render( 35 | 36 | , mountNode); 37 | ```` 38 | -------------------------------------------------------------------------------- /components/cascader/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 省市区级联。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | children: [{ 26 | value: 'nanjing', 27 | label: '南京', 28 | children: [{ 29 | value: 'zhonghuamen', 30 | label: '中华门', 31 | }], 32 | }], 33 | }]; 34 | 35 | function onChange(value) { 36 | console.log(value); 37 | } 38 | 39 | ReactDOM.render( 40 | 41 | , mountNode); 42 | ```` 43 | -------------------------------------------------------------------------------- /components/switch/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 开关 4 | type: Form Control 5 | english: Switch 6 | --- 7 | 8 | 开关选择器。 9 | 10 | ## 何时使用 11 | 12 | - 需要表示开关状态/两种状态之间的切换时； 13 | - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 14 | 15 | ## API 16 | 17 | ### Switch 18 | 19 | | 参数 | 说明 | 类型 | 可选值 |默认值 | 20 | |-----------|------------------------------------------|------------|-------|--------| 21 | | checked | 指定当前是否选中 | boolean | | false | 22 | | defaultChecked | 初始是否选中 | boolean | | false | 23 | | onChange | 变化时回调函数 | Function(checked:boolean) | | | 24 | | checkedChildren | 选中时的内容 | React Node | | | 25 | | unCheckedChildren | 非选中时的内容 | React Node | | | 26 | | size | 开关大小 | string | 'default' or 'small' | 'default' | 27 | -------------------------------------------------------------------------------- /components/card/demo/grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 栅格卡片 4 | --- 5 | 6 | 在系统概览页面常常和栅格进行配合。 7 | 8 | ````jsx 9 | import { Card, Col, Row } from 'antd'; 10 | 11 | ReactDOM.render( 12 |
13 | 14 |
15 | 卡片的内容 16 | 17 | 18 | 卡片的内容 19 | 20 | 21 | 卡片的内容 22 | 23 | 24 | 25 | , mountNode); 26 | ```` 27 | 28 | ````css 29 | /* 增加 16px 栅格间距 */ 30 | .code-box-demo .row { 31 | margin-left: -8px; 32 | margin-right: -8px; 33 | } 34 | .code-box-demo .row > div { 35 | padding: 0 8px; 36 | } 37 | ```` 38 | -------------------------------------------------------------------------------- /components/radio/radio.jsx: -------------------------------------------------------------------------------- 1 | import RcRadio from 'rc-radio'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | 5 | export default class Radio extends React.Component { 6 | static defaultProps = { 7 | prefixCls: 'ant-radio', 8 | } 9 | render() { 10 | const { prefixCls, children, checked, disabled, className, style } = this.props; 11 | const classString = classNames({ 12 | [`${prefixCls}`]: true, 13 | [`${prefixCls}-checked`]: checked, 14 | [`${prefixCls}-disabled`]: disabled, 15 | [className]: !!className, 16 | }); 17 | return ( 18 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/upload/demo/multiple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | hidden: true 4 | title: 多文件选择 5 | --- 6 | 7 | 按住 ctrl 可选择多个文件，`ie10+` 支持。 8 | 9 | ````jsx 10 | import { Upload, message, Button, Icon } from 'antd'; 11 | 12 | const props = { 13 | action: '/upload.do', 14 | multiple: true, 15 | onChange(info) { 16 | if (info.file.status !== 'uploading') { 17 | console.log(info.file, info.fileList); 18 | } 19 | if (info.file.status === 'done') { 20 | message.success(`${info.file.name} 上传成功。`); 21 | } else if (info.file.status === 'error') { 22 | message.error(`${info.file.name} 上传失败。`); 23 | } 24 | }, 25 | }; 26 | 27 | ReactDOM.render( 28 | 29 | 32 | 33 | , mountNode); 34 | ```` 35 | -------------------------------------------------------------------------------- /components/cascader/demo/change-on-select.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 选择即改变 4 | --- 5 | 6 | 这种交互允许只选中父级选项。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | children: [{ 26 | value: 'nanjing', 27 | label: '南京', 28 | children: [{ 29 | value: 'zhonghuamen', 30 | label: '中华门', 31 | }], 32 | }], 33 | }]; 34 | 35 | function onChange(value) { 36 | console.log(value); 37 | } 38 | 39 | ReactDOM.render( 40 | 41 | , mountNode); 42 | ```` 43 | -------------------------------------------------------------------------------- /components/spin/demo/nested.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 卡片加载中 4 | --- 5 | 6 | 可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。 7 | 8 | ````jsx 9 | import { Spin, Switch, Alert } from 'antd'; 10 | 11 | const Card = React.createClass({ 12 | getInitialState() { 13 | return { loading: false }; 14 | }, 15 | toggle(value) { 16 | this.setState({ loading: value }); 17 | }, 18 | render() { 19 | const container = ( 20 | 23 | ); 24 | return ( 25 |
26 | {container} 27 | 切换加载状态： 28 |
29 | ); 30 | }, 31 | }); 32 | 33 | ReactDOM.render(, mountNode); 34 | ```` 35 | -------------------------------------------------------------------------------- /components/badge/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 徽标数 4 | type: Presentation 5 | english: Badge 6 | --- 7 | 8 | 图标右上角的圆形徽标数字。 9 | 10 | ## 何时使用 11 | 12 | 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。 13 | 14 | ## API 15 | 16 | ```jsx 17 | 18 | 19 | 20 | ``` 21 | 22 | 23 | ```jsx 24 | 25 | ``` 26 | 27 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 28 | |----------------|----------------------------------|------------|---------|--------| 29 | | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | | 30 | | overflowCount | 展示封顶的数字值 | Number | | 99 | 31 | | dot | 不展示数字，只有一个小红点 | boolean | | false | 32 | -------------------------------------------------------------------------------- /components/cascader/demo/disabled-option.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 禁用选项 4 | --- 5 | 6 | 通过指定 options 里的 `disabled` 字段。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | disabled: true, 26 | children: [{ 27 | value: 'nanjing', 28 | label: '南京', 29 | children: [{ 30 | value: 'zhonghuamen', 31 | label: '中华门', 32 | }], 33 | }], 34 | }]; 35 | 36 | function onChange(value) { 37 | console.log(value); 38 | } 39 | 40 | ReactDOM.render( 41 | 42 | , mountNode); 43 | ```` 44 | -------------------------------------------------------------------------------- /components/checkbox/index.jsx: -------------------------------------------------------------------------------- 1 | import RcCheckbox from 'rc-checkbox'; 2 | import React from 'react'; 3 | import CheckboxGroup from './Group'; 4 | import classNames from 'classnames'; 5 | 6 | export default class Checkbox extends React.Component { 7 | static Group = CheckboxGroup; 8 | static defaultProps = { 9 | prefixCls: 'ant-checkbox', 10 | } 11 | render() { 12 | const { prefixCls, style, children, className, ...restProps } = this.props; 13 | const classString = classNames({ 14 | [className]: !!className, 15 | [`${prefixCls}-wrapper`]: true, 16 | }); 17 | return ( 18 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/cascader/demo/default-value.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 默认值 4 | --- 5 | 6 | 默认值通过数组的方式指定。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | children: [{ 26 | value: 'nanjing', 27 | label: '南京', 28 | children: [{ 29 | value: 'zhonghuamen', 30 | label: '中华门', 31 | }], 32 | }], 33 | }]; 34 | 35 | function onChange(value) { 36 | console.log(value); 37 | } 38 | 39 | ReactDOM.render( 40 | 41 | , mountNode); 42 | ```` 43 | -------------------------------------------------------------------------------- /components/locale-provider/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { changeConfirmLocale } from '../modal/locale'; 3 | 4 | export default class LocaleProvider extends React.Component { 5 | static propTypes = { 6 | locale: React.PropTypes.object, 7 | } 8 | 9 | static childContextTypes = { 10 | antLocale: React.PropTypes.object, 11 | } 12 | 13 | getChildContext() { 14 | return { 15 | antLocale: this.props.locale, 16 | }; 17 | } 18 | 19 | componentDidMount() { 20 | this.componentDidUpdate(); 21 | } 22 | 23 | componentDidUpdate() { 24 | const { locale } = this.props; 25 | changeConfirmLocale(locale && locale.Modal); 26 | } 27 | 28 | componentWillUnMount() { 29 | changeConfirmLocale(); 30 | } 31 | 32 | render() { 33 | return React.Children.only(this.props.children); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/tooltip/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 文字提示 4 | type: Presentation 5 | english: Tooltip 6 | --- 7 | 8 | 简单的文字提示气泡框。 9 | 10 | ## 何时使用 11 | 12 | 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。 13 | 14 | 可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。 15 | 16 | ## API 17 | 18 | | 参数 | 说明 | 类型 | 默认值 | 19 | |-----------|------------------------------------------|------------|--------| 20 | | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | 21 | | title | 提示文字 | string/React.Element | 无 | 22 | | getTooltipContainer | 浮层渲染父节点。默认渲染到 body 上 | Function(triggerNode) | () => document.body | 23 | 24 | 更多 API 可参考：https://github.com/react-component/tooltip 25 | -------------------------------------------------------------------------------- /components/input-number/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 数字输入框 4 | type: Form Control 5 | english: InputNumber 6 | --- 7 | 8 | 通过鼠标或键盘，输入范围内的数值。 9 | 10 | ## 何时使用 11 | 12 | 当需要获取标准数值时。 13 | 14 | ## API 15 | 16 | 属性如下 17 | 18 | | 成员 | 说明 | 类型 | 默认值 | 19 | |-------------|----------------|--------------------|--------------| 20 | | min | 最小值 | Number | -Infinity | 21 | | max | 最大值 | Number | Infinity | 22 | | value | 当前值 | Number | | 23 | | step | 每次改变步数，可以为小数 | Number or String | 1 | 24 | | defaultValue | 初始值 | Number | | 25 | | onChange | 变化回调 | Function | | 26 | | disabled | 禁用 | Boolean | false | 27 | | size | 输入框大小 | String | 无 | 28 | -------------------------------------------------------------------------------- /components/upload/demo/defaultFileList.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 传入已上传的文件 4 | --- 5 | 6 | 对已上传的文件进行编辑。 7 | 8 | ````jsx 9 | import { Upload, Button, Icon } from 'antd'; 10 | 11 | const props = { 12 | action: '/upload.do', 13 | onChange(info) { 14 | if (info.file.status !== 'uploading') { 15 | console.log(info.file); 16 | console.log(info.fileList); 17 | } 18 | }, 19 | defaultFileList: [{ 20 | uid: -1, 21 | name: 'xxx.png', 22 | status: 'done', 23 | url: 'http://www.baidu.com/xxx.png', 24 | }, { 25 | uid: -2, 26 | name: 'yyy.png', 27 | status: 'done', 28 | url: 'http://www.baidu.com/yyy.png', 29 | }], 30 | }; 31 | 32 | ReactDOM.render( 33 | 34 | 37 | 38 | , mountNode); 39 | ```` 40 | -------------------------------------------------------------------------------- /components/upload/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 点击上传 4 | --- 5 | 6 | 经典款式，用户点击按钮弹出文件选择框。 7 | 8 | ````jsx 9 | import { Upload, message, Button, Icon } from 'antd'; 10 | 11 | const props = { 12 | name: 'file', 13 | action: '/upload.do', 14 | headers: { 15 | authorization: 'authorization-text', 16 | }, 17 | onChange(info) { 18 | if (info.file.status !== 'uploading') { 19 | console.log(info.file, info.fileList); 20 | } 21 | if (info.file.status === 'done') { 22 | message.success(`${info.file.name} 上传成功。`); 23 | } else if (info.file.status === 'error') { 24 | message.error(`${info.file.name} 上传失败。`); 25 | } 26 | }, 27 | }; 28 | 29 | ReactDOM.render( 30 | 31 | 34 | 35 | , mountNode); 36 | ```` 37 | -------------------------------------------------------------------------------- /components/style/mixins/motion.less: -------------------------------------------------------------------------------- 1 | .motion-common() { 2 | animation-duration: .2s; 3 | animation-fill-mode: both; 4 | } 5 | 6 | .motion-common-leave() { 7 | animation-duration: .2s; 8 | animation-fill-mode: both; 9 | } 10 | 11 | .make-motion(@className, @keyframeName) { 12 | .@{className}-enter, 13 | .@{className}-appear { 14 | .motion-common(); 15 | animation-play-state: paused; 16 | } 17 | .@{className}-leave { 18 | .motion-common-leave(); 19 | animation-play-state: paused; 20 | } 21 | .@{className}-enter.@{className}-enter-active, 22 | .@{className}-appear.@{className}-appear-active { 23 | animation-name: ~"@{keyframeName}In"; 24 | animation-play-state: running; 25 | } 26 | .@{className}-leave.@{className}-leave-active { 27 | animation-name: ~"@{keyframeName}Out"; 28 | animation-play-state: running; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /components/notification/demo/with-icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 带有Icon的通知提醒框 4 | --- 5 | 6 | 通知提醒框左侧有图标。 7 | 8 | ````jsx 9 | import { Button, notification } from 'antd'; 10 | 11 | const openNotificationWithIcon = function (type) { 12 | return function () { 13 | notification[type]({ 14 | message: '这是标题', 15 | description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案', 16 | }); 17 | }; 18 | }; 19 | 20 | ReactDOM.render( 21 |
22 | 23 | 24 | 25 | 26 |
27 | , mountNode); 28 | ```` 29 | 30 | 35 | -------------------------------------------------------------------------------- /components/button/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 不可用状态 5 | en-US: Disabled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。 11 | 12 | ## en-US 13 | 14 | To mark a button as disabled, add the `disabled` property to the `Button`. 15 | 16 | ````jsx 17 | import { Button } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 23 |
24 | 25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 |
, 33 | mountNode 34 | ); 35 | ```` 36 | -------------------------------------------------------------------------------- /components/radio/demo/radiogroup.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: RadioGroup 组合 4 | --- 5 | 6 | 一组互斥的 Radio 配合使用。 7 | 8 | ````jsx 9 | import { Radio } from 'antd'; 10 | const RadioGroup = Radio.Group; 11 | 12 | const App = React.createClass({ 13 | getInitialState() { 14 | return { 15 | value: 1, 16 | }; 17 | }, 18 | onChange(e) { 19 | console.log('radio checked', e.target.value); 20 | this.setState({ 21 | value: e.target.value, 22 | }); 23 | }, 24 | render() { 25 | return ( 26 | 27 | A 28 | B 29 | C 30 | D 31 | 32 | ); 33 | }, 34 | }); 35 | 36 | ReactDOM.render(, mountNode); 37 | ```` 38 | -------------------------------------------------------------------------------- /site/theme/static/motion.less: -------------------------------------------------------------------------------- 1 | .motion-container { 2 | height: 190px; 3 | line-height: 190px; 4 | text-align: center; 5 | margin: 40px 0 20px; 6 | } 7 | 8 | .motion-example { 9 | width: 180px; 10 | height: 180px; 11 | line-height: 180px; 12 | font-size: 18px; 13 | color: #fff; 14 | text-align: center; 15 | display: inline-block !important; 16 | border-radius: 8px; 17 | animation-duration: 0.5s !important; 18 | font-weight: bold; 19 | background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px; 20 | } 21 | 22 | .motion-select-wrapper { 23 | text-align: center; 24 | margin-bottom: 40px; 25 | } 26 | 27 | .motion-select { 28 | text-align: left; 29 | width: 180px; 30 | } 31 | 32 | .video-player { 33 | position: relative; 34 | max-width: 800px; 35 | &-right { 36 | width: 616px; 37 | float: right; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /components/collapse/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 折叠面板 4 | --- 5 | 6 | 可以同时展开多个面板，这个例子默认展开了第一个。 7 | 8 | ````jsx 9 | import { Collapse } from 'antd'; 10 | const Panel = Collapse.Panel; 11 | 12 | function callback(key) { 13 | console.log(key); 14 | } 15 | 16 | const text = ` 17 | A dog is a type of domesticated animal. 18 | Known for its loyalty and faithfulness, 19 | it can be found as a welcome guest in many households across the world. 20 | `; 21 | 22 | ReactDOM.render( 23 | 24 | 25 |

{text}

26 | 27 | 28 |

{text}

29 | 30 | 31 |

{text}

32 | 33 | 34 | , mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | // this file is not used if use https://github.com/ant-design/babel-plugin-antd 3 | 4 | function camelCase(name) { 5 | return name.charAt(0).toUpperCase() + 6 | name.slice(1).replace(/-(\w)/g, (m, n) => { 7 | return n.toUpperCase(); 8 | }); 9 | } 10 | 11 | const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.jsx?$/); 12 | 13 | req.keys().forEach((mod) => { 14 | const v = req(mod); 15 | const match = mod.match(/^\.\/([^_][\w-]+)\/index\.jsx?$/); 16 | if (match && match[1]) { 17 | exports[camelCase(match[1])] = v; 18 | } 19 | }); 20 | 21 | if (process.env.NODE_ENV !== 'production') { 22 | if (typeof console !== 'undefined' && console.warn) { 23 | console.warn(`You are using prebuilt antd, 24 | please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.`); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /site/theme/template/Home/Page4.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TweenOne from 'rc-tween-one'; 3 | import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 4 | import QueueAnim from 'rc-queue-anim'; 5 | 6 | export default function Page4() { 7 | return ( 8 | 9 | 11 |

微小·确定·幸福

12 |

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

13 | 14 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /components/_util/openAnimation.js: -------------------------------------------------------------------------------- 1 | import cssAnimation from 'css-animation'; 2 | 3 | function animate(node, show, done) { 4 | let height; 5 | return cssAnimation(node, 'ant-motion-collapse', { 6 | start() { 7 | if (!show) { 8 | node.style.height = `${node.offsetHeight}px`; 9 | } else { 10 | height = node.offsetHeight; 11 | node.style.height = 0; 12 | } 13 | }, 14 | active() { 15 | node.style.height = `${show ? height : 0}px`; 16 | }, 17 | end() { 18 | node.style.height = ''; 19 | done(); 20 | }, 21 | }); 22 | } 23 | 24 | const animation = { 25 | enter(node, done) { 26 | return animate(node, true, done); 27 | }, 28 | leave(node, done) { 29 | return animate(node, false, done); 30 | }, 31 | appear(node, done) { 32 | return animate(node, true, done); 33 | }, 34 | }; 35 | 36 | export default animation; 37 | -------------------------------------------------------------------------------- /components/upload/demo/drag.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 拖拽上传 4 | --- 5 | 6 | 可以把文件拖入指定区域，完成上传，同样支持点击上传。 7 | 8 | ````jsx 9 | import { Upload, Icon } from 'antd'; 10 | const Dragger = Upload.Dragger; 11 | 12 | const props = { 13 | name: 'file', 14 | showUploadList: false, 15 | action: '/upload.do', 16 | }; 17 | 18 | ReactDOM.render( 19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 |

28 | 29 |

30 |

点击或将文件拖拽到此区域上传

31 |

支持单个或批量上传，严禁上传公司内部资料及其他违禁文件

32 | 33 |
34 |
35 | , mountNode); 36 | ```` 37 | -------------------------------------------------------------------------------- /components/notification/demo/with-btn.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 自定义 4 | --- 5 | 6 | 自定义关闭按钮的样式和文字。 7 | 8 | ````jsx 9 | import { Button, notification } from 'antd'; 10 | 11 | const close = function () { 12 | console.log('我被默认的关闭按钮关闭了！'); 13 | }; 14 | 15 | const openNotification = function () { 16 | const key = `open${Date.now()}`; 17 | const btnClick = function () { 18 | // 隐藏提醒框 19 | notification.close(key); 20 | }; 21 | const btn = ( 22 | 25 | ); 26 | notification.open({ 27 | message: '这是标题', 28 | description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案', 29 | btn, 30 | key, 31 | onClose: close, 32 | }); 33 | }; 34 | 35 | ReactDOM.render( 36 |
37 | 38 |
, 39 | mountNode); 40 | ```` 41 | -------------------------------------------------------------------------------- /site/bisheng.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | port: 8001, 5 | source: [ 6 | './components', 7 | './docs', 8 | 'CHANGELOG.md', // TODO: fix it in bisheng 9 | ], 10 | theme: './site/theme', 11 | htmlTemplate: './site/theme/static/template.html', 12 | plugins: [ 13 | 'bisheng-plugin-description', 14 | 'bisheng-plugin-toc?maxDepth=2', 15 | 'bisheng-plugin-react?lang=__react', 16 | './site/bisheng-plugin-antd', 17 | ], 18 | webpackConfig(config) { 19 | config.resolve.alias = { 20 | antd: process.cwd(), 21 | site: path.join(process.cwd(), 'site'), 22 | }; 23 | 24 | config.babel.plugins.push([ 25 | require.resolve('babel-plugin-antd'), 26 | { 27 | style: true, 28 | libraryName: 'antd', 29 | libDir: 'components', 30 | }, 31 | ]); 32 | 33 | return config; 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /tests/icon.test.js: -------------------------------------------------------------------------------- 1 | jest.unmock('../components/icon/index'); 2 | 3 | import React from 'react'; 4 | import TestUtils from 'react-addons-test-utils'; 5 | import { wrap } from 'react-stateless-wrapper'; 6 | 7 | import AntIcon from '../components/icon/index'; 8 | const Icon = wrap(AntIcon); 9 | 10 | describe('Icon', function() { 11 | let icon; 12 | let iconNode; 13 | 14 | beforeEach(() => { 15 | icon = TestUtils.renderIntoDocument( 16 | 17 | ); 18 | iconNode = TestUtils.findRenderedDOMComponentWithTag(icon, 'I'); 19 | }); 20 | 21 | it('should render to a ', () => { 22 | expect(iconNode.tagName).toBe('I'); 23 | expect(iconNode.className).toContain('my-icon-classname'); 24 | expect(iconNode.className).toContain('anticon'); 25 | expect(iconNode.className).toContain('anticon-appstore'); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /components/progress/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 进度条 4 | type: Presentation 5 | english: Progress 6 | --- 7 | 8 | 展示操作的当前进度。 9 | 10 | ## 何时使用 11 | 12 | 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 13 | 14 | * 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时； 15 | * 当需要显示一个操作完成的百分比时。 16 | 17 | 18 | ## API 19 | 20 | | 属性 | 说明 | 类型 | 默认值 | 21 | |----------|---------------|----------|---------------| 22 | | type | 类型，可选 `line` `circle` | string | `line` | 23 | | percent | 百分比 | number | 0 | 24 | | format | 内容的模板函数 | function(percent) | `percent => percent + '%'` | 25 | | status | 状态，可选：`success` `exception` `active` | string | - | 26 | | showInfo | 是否显示进度数值或状态图标 | bool | true | 27 | | strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 | 28 | | strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | 29 | | width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 | 30 | -------------------------------------------------------------------------------- /components/radio/demo/disable.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 不可用 4 | --- 5 | 6 | Radio 不可用。 7 | 8 | ````jsx 9 | import { Radio, Button } from 'antd'; 10 | 11 | const App = React.createClass({ 12 | getInitialState() { 13 | return { 14 | disabled: true, 15 | }; 16 | }, 17 | toggleDisabled() { 18 | this.setState({ 19 | disabled: !this.state.disabled, 20 | }); 21 | }, 22 | render() { 23 | return ( 24 |
25 | 不可用 26 |
27 | 不可用 28 |
29 | 32 |
33 |
34 | ); 35 | }, 36 | }); 37 | 38 | ReactDOM.render(, mountNode); 39 | ```` 40 | -------------------------------------------------------------------------------- /components/locale-provider/en_US.js: -------------------------------------------------------------------------------- 1 | import Pagination from 'rc-pagination/lib/locale/en_US'; 2 | import DatePicker from '../date-picker/locale/en_US'; 3 | import TimePicker from '../time-picker/locale/en_US'; 4 | import Calendar from '../calendar/locale/en_US'; 5 | 6 | export default { 7 | Pagination, 8 | DatePicker, 9 | TimePicker, 10 | Calendar, 11 | Table: { 12 | filterTitle: 'Filter Menu', 13 | filterConfirm: 'OK', 14 | filterReset: 'Reset', 15 | emptyText: 'No Data', 16 | }, 17 | Modal: { 18 | okText: 'OK', 19 | cancelText: 'Cancel', 20 | justOkText: 'OK', 21 | }, 22 | Popconfirm: { 23 | okText: 'OK', 24 | cancelText: 'Cancel', 25 | }, 26 | Transfer: { 27 | notFoundContent: 'Not Found', 28 | searchPlaceholder: 'Search here', 29 | itemUnit: 'item', 30 | itemsUnit: 'items', 31 | }, 32 | Select: { 33 | notFoundContent: 'Not Found', 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /site/theme/index.js: -------------------------------------------------------------------------------- 1 | const contentTmpl = './template/Content/index'; 2 | 3 | export default { 4 | categoryOrder: { 5 | 组件: 0, 6 | 十大原则: 0, 7 | 设计基础: 1, 8 | 动画: 2, 9 | }, 10 | typeOrder: { 11 | Basic: 0, 12 | 'Form Control': 1, 13 | Presentation: 2, 14 | Navigation: 3, 15 | Other: 4, 16 | }, 17 | docVersions: { 18 | '0.9.x': 'http://09x.ant.design/', 19 | '0.10.x': 'http://010x.ant.design/', 20 | '0.11.x': 'http://011x.ant.design/', 21 | '0.12.x': 'http://012x.ant.design/', 22 | }, 23 | routes: { 24 | '/': './template/Home/index', 25 | '/docs/practice/:children': contentTmpl, 26 | '/docs/pattern/:children': contentTmpl, 27 | '/docs/react/:children': contentTmpl, 28 | '/CHANGELOG': contentTmpl, 29 | '/components/:children': contentTmpl, 30 | '/docs/spec/:children': contentTmpl, 31 | '/docs/resource/:children': contentTmpl, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /components/date-picker/style/TimePicker.less: -------------------------------------------------------------------------------- 1 | .@{calendar-prefix-cls}-time { 2 | // Change display order in DOM 3 | .@{calendar-prefix-cls}-input-wrap { 4 | direction: rtl; 5 | .@{calendar-prefix-cls}-date-input-wrap, 6 | .@{calendar-prefix-cls}-time-picker-wrap { 7 | direction: ltr; 8 | display: inline-block; 9 | } 10 | .@{timepicker-prefix-cls}-panel, 11 | .@{calendar-prefix-cls}-clear-btn { 12 | direction: ltr; 13 | } 14 | } 15 | .@{calendar-prefix-cls}-input, 16 | .@{timepicker-prefix-cls}-input { 17 | .input; 18 | border-radius: @border-radius-sm; 19 | height: @input-height-sm; 20 | width: 96px; 21 | margin-right: 6px; 22 | } 23 | .@{calendar-prefix-cls}-input { 24 | padding-right: 21px; 25 | } 26 | .@{timepicker-prefix-cls}-panel { 27 | min-width: 168px; 28 | } 29 | .@{timepicker-prefix-cls}-icon { 30 | display: none; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/popover/demo/control.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 从浮层内关闭 4 | --- 5 | 6 | 使用 `visible` 属性控制浮层显示。 7 | 8 | ````jsx 9 | import { Popover, Button } from 'antd'; 10 | 11 | const App = React.createClass({ 12 | getInitialState() { 13 | return { 14 | visible: false, 15 | }; 16 | }, 17 | hide() { 18 | this.setState({ 19 | visible: false, 20 | }); 21 | }, 22 | handleVisibleChange(visible) { 23 | this.setState({ visible }); 24 | }, 25 | render() { 26 | const content = ( 27 |
28 | 关闭卡片 29 |
30 | ); 31 | return ( 32 | 34 | 35 | 36 | ); 37 | }, 38 | }); 39 | 40 | ReactDOM.render(, mountNode); 41 | ```` 42 | -------------------------------------------------------------------------------- /components/slider/demo/mark.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 分段式滑块 4 | --- 5 | 6 | 使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。 7 | 8 | ````jsx 9 | import { Slider } from 'antd'; 10 | 11 | const marks = { 12 | 0: '0°C', 13 | 26: '26°C', 14 | 37: '37°C', 15 | 100: { 16 | style: { 17 | color: 'red', 18 | }, 19 | label: 100°C, 20 | }, 21 | }; 22 | 23 | ReactDOM.render( 24 |
25 |

包含关系

26 | 27 | 28 |

并列关系

29 | 30 |

结合 step

31 | 32 |

`step=null`

33 | 34 |
35 | , mountNode); 36 | ```` 37 | -------------------------------------------------------------------------------- /tests/layout.test.js: -------------------------------------------------------------------------------- 1 | jest.unmock('../components/layout/index'); 2 | jest.unmock('../components/layout/col'); 3 | jest.unmock('../components/layout/row'); 4 | 5 | import React from 'react'; 6 | import TestUtils from 'react-addons-test-utils'; 7 | import { wrap } from 'react-stateless-wrapper'; 8 | 9 | let { Col, Row } = require('../components/layout/index'); 10 | Col = wrap(Col); 11 | 12 | describe('Layout', function() { 13 | it('should render Col', () => { 14 | const col = TestUtils.renderIntoDocument( 15 | 16 | ); 17 | const colNode = TestUtils.findRenderedDOMComponentWithTag(col, 'DIV'); 18 | expect(colNode.className).toBe('col-2'); 19 | }); 20 | it('should render Row', () => { 21 | const row = TestUtils.renderIntoDocument( 22 | 23 | ); 24 | const rowNode = TestUtils.findRenderedDOMComponentWithTag(row, 'DIV'); 25 | expect(rowNode.className).toBe('row'); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /components/cascader/demo/hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 移入展开 4 | --- 5 | 6 | 通过移入展开下级菜单，点击完成选择。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | children: [{ 26 | value: 'nanjing', 27 | label: '南京', 28 | children: [{ 29 | value: 'zhonghuamen', 30 | label: '中华门', 31 | }], 32 | }], 33 | }]; 34 | 35 | function onChange(value) { 36 | console.log(value); 37 | } 38 | 39 | // 只展示最后一项 40 | function displayRender(label) { 41 | return label[label.length - 1]; 42 | } 43 | 44 | ReactDOM.render( 45 | 47 | , mountNode); 48 | ```` 49 | -------------------------------------------------------------------------------- /components/table/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | title: 紧凑型 4 | --- 5 | 6 | 紧凑型的列表, 中型列表用于需要数据紧凑展示的情况，小型列表只用于对话框内。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [{ 12 | title: '姓名', 13 | dataIndex: 'name', 14 | }, { 15 | title: '年龄', 16 | dataIndex: 'age', 17 | }, { 18 | title: '住址', 19 | dataIndex: 'address', 20 | }]; 21 | const data = [{ 22 | key: '1', 23 | name: '胡彦斌', 24 | age: 32, 25 | address: '西湖区湖底公园1号', 26 | }, { 27 | key: '2', 28 | name: '胡彦祖', 29 | age: 42, 30 | address: '西湖区湖底公园1号', 31 | }, { 32 | key: '3', 33 | name: '李大嘴', 34 | age: 32, 35 | address: '西湖区湖底公园1号', 36 | }]; 37 | 38 | ReactDOM.render(
39 |

中号表格（紧凑型）

40 |
41 |

小号表格

42 |
43 | , mountNode); 44 | ```` 45 | 46 | 47 | -------------------------------------------------------------------------------- /site/bisheng-plugin-antd/lib/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Demo 5 | 6 | 14 | 15 | 16 |
17 | 29 | 30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /site/theme/template/IconSet/CopyableIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CopyToClipboard from 'react-copy-to-clipboard'; 3 | import { Icon } from 'antd'; 4 | 5 | export default class CopyableIcon extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | justCopied: false, 10 | }; 11 | } 12 | 13 | onCopied = () => { 14 | this.setState({ justCopied: true }, () => { 15 | setTimeout(() => { 16 | this.setState({ justCopied: false }); 17 | }, 1000); 18 | }); 19 | } 20 | 21 | render() { 22 | const text = ``; 23 | return ( 24 | 25 |
  • 26 | 27 | {this.props.type} 28 |
    • 29 |     30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/table/demo/expand.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 12 3 | title: 可展开 4 | --- 5 | 6 | 当表格内容较多不能一次性完全展示时。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [ 12 | { title: '姓名', dataIndex: 'name', key: 'name' }, 13 | { title: '年龄', dataIndex: 'age', key: 'age' }, 14 | { title: '住址', dataIndex: 'address', key: 'address' }, 15 | { title: '操作', dataIndex: '', key: 'x', render: () => 删除 }, 16 | ]; 17 | 18 | const data = [ 19 | { key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌，今年32岁，住在西湖区湖底公园1号。' }, 20 | { key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖，今年42岁，住在西湖区湖底公园2号。' }, 21 | { key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴，今年32岁，住在西湖区湖底公园3号。' }, 22 | ]; 23 | 24 | ReactDOM.render( 25 |

    {record.description}

    } 27 | dataSource={data} 28 | className="table" /> 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/table/demo/bordered.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 10 3 | title: 边框和页脚 4 | --- 5 | 6 | 添加表格边框线和页脚。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [{ 12 | title: '姓名', 13 | dataIndex: 'name', 14 | render(text) { 15 | return {text}; 16 | }, 17 | }, { 18 | title: '资产', 19 | className: 'column-money', 20 | dataIndex: 'money', 21 | }, { 22 | title: '住址', 23 | dataIndex: 'address', 24 | }]; 25 | 26 | const data = [{ 27 | key: '1', 28 | name: '胡彦斌', 29 | money: '￥300,000.00', 30 | address: '西湖区湖底公园1号', 31 | }, { 32 | key: '2', 33 | name: '胡彦祖', 34 | money: '￥1,256,000.00', 35 | address: '西湖区湖底公园1号', 36 | }, { 37 | key: '3', 38 | name: '李大嘴', 39 | money: '￥120,000.00', 40 | address: '西湖区湖底公园1号', 41 | }]; 42 | 43 | ReactDOM.render(
    '页脚'} /> 44 | , mountNode); 45 | ```` 46 | 47 | ````css 48 | .column-money { 49 | text-align: right; 50 | } 51 | ```` 52 | -------------------------------------------------------------------------------- /components/transfer/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 穿梭框 4 | type: Form Control 5 | cols: 1 6 | english: Transfer 7 | --- 8 | 9 | 双栏穿梭选择框。 10 | 11 | ## 何时使用 12 | 13 | 用直观的方式在两栏中移动元素，完成选择行为。 14 | 15 | ## API 16 | 17 | 18 | | 参数 | 说明 | 类型 | 默认值 | 19 | |-----------|------------------------------------------|------------|--------| 20 | | dataSource | 数据源 | Array | [] | 21 | | render | 每行数据渲染函数 | Function(record) | | 22 | | targetKeys | 显示在右侧框数据的key集合 | Array | [] | 23 | | onChange | 变化时回调函数 | Function(targetKeys, direction, moveKeys) | | 24 | | listStyle | 两个穿梭框的自定义样式 | Object | | 25 | | className | 自定义类 | String | | 26 | | titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] | 27 | | operations | 操作文案集合,顺序从上至下 | Array | [] | 28 | | showSearch | 是否显示搜索框 | Boolean | false | 29 | | searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' | 30 | | notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' | 31 | | footer | 底部渲染函数 | Function(props) | | 32 | -------------------------------------------------------------------------------- /components/cascader/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | title: 大小 4 | --- 5 | 6 | 不同大小的级联选择器。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | children: [{ 18 | value: 'xihu', 19 | label: '西湖', 20 | }], 21 | }], 22 | }, { 23 | value: 'jiangsu', 24 | label: '江苏', 25 | children: [{ 26 | value: 'nanjing', 27 | label: '南京', 28 | children: [{ 29 | value: 'zhonghuamen', 30 | label: '中华门', 31 | }], 32 | }], 33 | }]; 34 | 35 | function onChange(value) { 36 | console.log(value); 37 | } 38 | 39 | ReactDOM.render( 40 |
    41 |

    42 |

    43 |

    44 |
    45 | , mountNode); 46 | ```` 47 | -------------------------------------------------------------------------------- /components/locale-provider/ru_RU.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Andrey Gayvoronsky on 13/04/16. 3 | */ 4 | 5 | import Pagination from 'rc-pagination/lib/locale/ru_RU'; 6 | import DatePicker from '../date-picker/locale/ru_RU'; 7 | import TimePicker from '../time-picker/locale/ru_RU'; 8 | import Calendar from '../calendar/locale/ru_RU'; 9 | 10 | export default { 11 | Pagination, 12 | DatePicker, 13 | TimePicker, 14 | Calendar, 15 | Table: { 16 | filterTitle: 'Фильтр', 17 | filterConfirm: 'OK', 18 | filterReset: 'Сбросить', 19 | emptyText: 'Нет данных', 20 | }, 21 | Modal: { 22 | okText: 'OK', 23 | cancelText: 'Отмена', 24 | justOkText: 'OK', 25 | }, 26 | Popconfirm: { 27 | okText: 'OK', 28 | cancelText: 'Отмена', 29 | }, 30 | Transfer: { 31 | notFoundContent: 'Not Found', 32 | searchPlaceholder: 'Search here', 33 | itemUnit: 'item', 34 | itemsUnit: 'items', 35 | }, 36 | Select: { 37 | notFoundContent: 'Not Found', 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /components/input/demo/group.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 输入框组合 4 | --- 5 | 6 | 各类输入框的组合展现。 7 | 8 | ````jsx 9 | import { Input, Select, Col } from 'antd'; 10 | const InputGroup = Input.Group; 11 | const Option = Select.Option; 12 | 13 | ReactDOM.render( 14 |
    15 | 16 | 17 |
    18 | 24 |
    25 |     26 | 27 |
    28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | , mountNode); 36 | ```` 37 | -------------------------------------------------------------------------------- /components/breadcrumb/BreadcrumbItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class BreadcrumbItem extends React.Component { 4 | static defaultProps = { 5 | prefixCls: 'ant-breadcrumb', 6 | separator: '/', 7 | } 8 | 9 | static propTypes = { 10 | prefixCls: React.PropTypes.string, 11 | separator: React.PropTypes.oneOfType([ 12 | React.PropTypes.string, 13 | React.PropTypes.element, 14 | ]), 15 | href: React.PropTypes.string, 16 | } 17 | 18 | render() { 19 | const { prefixCls, separator, children, ...restProps } = this.props; 20 | let link; 21 | if ('href' in this.props) { 22 | link = {children}; 23 | } else { 24 | link = {children}; 25 | } 26 | return ( 27 | 28 | {link} 29 | {separator} 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/tabs/demo/card-top.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 10 3 | title: 卡片式页签容器 4 | --- 5 | 6 | 用于容器顶部，需要一点额外的样式覆盖。 7 | 8 | ````jsx 9 | import { Tabs } from 'antd'; 10 | const TabPane = Tabs.TabPane; 11 | 12 | ReactDOM.render( 13 |
    14 | 15 | 选项卡一内容 16 | 选项卡二内容 17 | 选项卡三内容 18 | 19 |
    20 | , mountNode); 21 | ```` 22 | 23 | ````css 24 | #components-tabs-demo-card-top .code-box-demo { 25 | background: #ECECEC; 26 | overflow: hidden; 27 | padding: 24px; 28 | } 29 | 30 | .card-container > .ant-tabs-card > .ant-tabs-content { 31 | background: #fff; 32 | padding: 16px; 33 | height: 120px; 34 | margin-top: -16px; 35 | } 36 | 37 | .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-bar, 38 | .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { 39 | border-color: #fff; 40 | } 41 | ```` 42 | -------------------------------------------------------------------------------- /components/table/demo/paging.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 分页 4 | --- 5 | 6 | 数据项较多时显示分页。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [{ 12 | title: '姓名', 13 | dataIndex: 'name', 14 | render(text) { 15 | return {text}; 16 | }, 17 | }, { 18 | title: '年龄', 19 | dataIndex: 'age', 20 | }, { 21 | title: '住址', 22 | dataIndex: 'address', 23 | }]; 24 | 25 | const data = []; 26 | for (let i = 0; i < 46; i++) { 27 | data.push({ 28 | key: i, 29 | name: `李大嘴${i}`, 30 | age: 32, 31 | address: `西湖区湖底公园${i}号`, 32 | }); 33 | } 34 | 35 | const pagination = { 36 | total: data.length, 37 | showSizeChanger: true, 38 | onShowSizeChange(current, pageSize) { 39 | console.log('Current: ', current, '; PageSize: ', pageSize); 40 | }, 41 | onChange(current) { 42 | console.log('Current: ', current); 43 | }, 44 | }; 45 | 46 | ReactDOM.render(
    47 | , mountNode); 48 | ```` 49 | -------------------------------------------------------------------------------- /components/table/demo/row-selection-props.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 选择框属性 4 | --- 5 | 6 | 配置选择框的默认属性。 7 | 8 | ````jsx 9 | import { Table } from 'antd'; 10 | 11 | const columns = [{ 12 | title: '姓名', 13 | dataIndex: 'name', 14 | render: text => {text}, 15 | }, { 16 | title: '年龄', 17 | dataIndex: 'age', 18 | }, { 19 | title: '住址', 20 | dataIndex: 'address', 21 | }]; 22 | const data = [{ 23 | key: '1', 24 | name: '胡彦斌', 25 | age: 32, 26 | address: '西湖区湖底公园1号', 27 | }, { 28 | key: '2', 29 | name: '胡彦祖', 30 | age: 42, 31 | address: '西湖区湖底公园1号', 32 | }, { 33 | key: '3', 34 | name: '李大嘴', 35 | age: 32, 36 | address: '西湖区湖底公园1号', 37 | }]; 38 | 39 | // 通过 rowSelection 对象表明需要行选择 40 | const rowSelection = { 41 | getCheckboxProps(record) { 42 | return { 43 | disabled: record.name === '胡彦祖', // 配置无法勾选的列 44 | }; 45 | }, 46 | }; 47 | 48 | ReactDOM.render(
    49 | , mountNode); 50 | ```` 51 | -------------------------------------------------------------------------------- /components/alert/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 图标 4 | --- 5 | 6 | 可口的图标让信息类型更加醒目。 7 | 8 | ````jsx 9 | import { Alert } from 'antd'; 10 | 11 | ReactDOM.render(
    12 | 13 | 14 | 15 | 16 | 20 | 24 | 29 | 34 |
    , mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /components/collapse/demo/mix.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 面板嵌套 4 | --- 5 | 6 | 手风琴嵌套折叠面板。 7 | 8 | ````jsx 9 | import { Collapse } from 'antd'; 10 | const Panel = Collapse.Panel; 11 | 12 | function callback(key) { 13 | console.log(key); 14 | } 15 | 16 | const text = ` 17 | A dog is a type of domesticated animal. 18 | Known for its loyalty and faithfulness, 19 | it can be found as a welcome guest in many households across the world. 20 | `; 21 | 22 | ReactDOM.render( 23 | 24 | 25 | 26 | 27 |

    {text}

    28 |     29 |     30 |     31 | 32 |

    {text}

    33 |     34 | 35 |

    {text}

    36 |     37 |     38 | , mountNode); 39 | ```` 40 | -------------------------------------------------------------------------------- /components/button/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 图标按钮 5 | en-US: Icon 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。 11 | 12 | 如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。 13 | 14 | ## en-US 15 | 16 | `Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button` 17 | 18 | If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property. 19 | 20 | ````jsx 21 | import { Button } from 'antd'; 22 | 23 | ReactDOM.render( 24 |
    25 | 27 |
    28 | 30 |
    , 31 | mountNode 32 | ); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/collapse/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 折叠面板 4 | type: Presentation 5 | english: Collapse 6 | --- 7 | 8 | 可以折叠/展开的内容区域。 9 | 10 | ## 何时使用 11 | 12 | - 对复杂区域进行分组和隐藏，保持页面的整洁。 13 | - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。 14 | 15 | ## API 16 | 17 | ### Collapse 18 | 19 | | 参数 | 说明 | 类型 | 默认值 | 20 | |------------------|----------------------------------------------|----------|---------------------------------| 21 | | activeKey | 当前激活 tab 面板的 key| Array or String | 默认无，accordion模式下默认第一个元素| 22 | | defaultActiveKey | 初始化选中面板的 key | String | 无 | 23 | | onChange | 切换面板的回调 | Function | 无 | 24 | 25 | 26 | ### Collapse.Panel 27 | 28 | | 参数 | 说明 | 类型 | 默认值 | 29 | |------|------------------|-------------------------|--------| 30 | | key | 对应 activeKey | String | 无 | 31 | | header | 面板头内容 | React.Element or String | 无 | 32 | -------------------------------------------------------------------------------- /components/checkbox/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 多选框 4 | type: Form Control 5 | english: Checkbox 6 | --- 7 | 8 | 多选框。 9 | 10 | ## 何时使用 11 | 12 | - 在一组可选项中进行多项选择时； 13 | - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 14 | 15 | ## API 16 | 17 | ### Checkbox 18 | 19 | | 参数 | 说明 | 类型 | 可选值 |默认值 | 20 | |-----------|------------------------------------------|------------|-------|--------| 21 | | checked | 指定当前是否选中 | boolean | | false | 22 | | defaultChecked | 初始是否选中 | boolean | | false | 23 | | onChange | 变化时回调函数 | Function(e:Event) | | | | 24 | 25 | ### Checkbox Group 26 | 27 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 28 | |-----------|------------------------------------------|------------|---------|--------| 29 | | defaultValue | 默认选中的选项 | array | | [] | 30 | | value | 指定选中的选项| array | | [] | 31 | | options | 指定可选项 | array | | [] | 32 | | onChange | 变化时回调函数 | Function(checkedValue) | | | | 33 | -------------------------------------------------------------------------------- /components/layout/demo/gutter.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 区块间隔 4 | --- 5 | 6 | 栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。 7 | 8 | ````jsx 9 | import { Row, Col } from 'antd'; 10 | 11 | ReactDOM.render( 12 |
    13 | 14 |
    15 |
    .col-6
    16 | 17 | 18 |
    .col-6
    19 | 20 | 21 |
    .col-6
    22 | 23 | 24 |
    .col-6
    25 | 26 | 27 | 28 | , mountNode); 29 | ```` 30 | 31 | ````css 32 | .gutter-example .row > div { 33 | background: transparent; 34 | border: 0; 35 | } 36 | .gutter-box { 37 | background: #2db7f5; 38 | height: 80px; 39 | line-height: 80px; 40 | border-radius: 6px; 41 | } 42 | ```` 43 | -------------------------------------------------------------------------------- /components/modal/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 第一个对话框。 7 | 8 | ````jsx 9 | import { Modal, Button } from 'antd'; 10 | 11 | const App = React.createClass({ 12 | getInitialState() { 13 | return { visible: false }; 14 | }, 15 | showModal() { 16 | this.setState({ 17 | visible: true, 18 | }); 19 | }, 20 | handleOk() { 21 | console.log('点击了确定'); 22 | this.setState({ 23 | visible: false, 24 | }); 25 | }, 26 | handleCancel(e) { 27 | console.log(e); 28 | this.setState({ 29 | visible: false, 30 | }); 31 | }, 32 | render() { 33 | return ( 34 |
    35 | 36 | 38 |

    对话框的内容

    39 |

    对话框的内容

    40 |

    对话框的内容

    41 |     42 |
    43 | ); 44 | }, 45 | }); 46 | 47 | ReactDOM.render(, mountNode); 48 | ```` 49 | -------------------------------------------------------------------------------- /docs/spec/layout/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | template: component 3 | category: 设计基础 4 | order: 4 5 | cols: 1 6 | chinese: 常用布局 7 | english: Layout 8 | --- 9 | 10 | 布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。 11 | 12 | Ant Design 的布局和导航设计规范如下： 13 | 14 | ### 尺寸规则 15 | 16 | 一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 17 | 18 | - 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。 19 | - 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。 20 | - 顶部导航高度的范围计算公式为：`48+8n`。 21 | - 侧边导航宽度的范围计算公式：`200+8n`。 22 | 23 | ### 交互原则 24 | 25 | - 一级导航和末级的导航需要在可视化的层面被强调出来； 26 | - 当前项应该在呈现上优先级最高； 27 | - 当导航收起的时候，当前项的样式自动赋予给它的上一个层级； 28 | - 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。 29 | 30 | ### 视觉原则 31 | 32 | 导航样式上需要根据信息层级合理的选择样式： 33 | 34 | - **大色块强调** 35 | 36 | 建议用于底色为深色系时，当前页面父级的导航项。 37 | 38 | - **高亮火柴棍** 39 | 40 | 当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。 41 | 42 | - **字体高亮变色** 43 | 44 | 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。 45 | 46 | - **字体放大** 47 | 48 | `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。 49 | 50 | 51 | 在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。 52 | -------------------------------------------------------------------------------- /components/modal/demo/info.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 信息提示 4 | --- 5 | 6 | 各种类型的信息提示，只提供一个按钮用于关闭。 7 | 8 | ````jsx 9 | import { Modal, Button } from 'antd'; 10 | 11 | function info() { 12 | Modal.info({ 13 | title: '这是一条通知信息', 14 | content: ( 15 |
    16 |

    一些附加信息一些附加信息一些附加信息

    17 |

    一些附加信息一些附加信息一些附加信息

    18 |
    19 | ), 20 | onOk() {}, 21 | }); 22 | } 23 | 24 | function success() { 25 | Modal.success({ 26 | title: '这是一条通知信息', 27 | content: '一些附加信息一些附加信息一些附加信息', 28 | }); 29 | } 30 | 31 | function error() { 32 | Modal.error({ 33 | title: '这是一条通知信息', 34 | content: '一些附加信息一些附加信息一些附加信息', 35 | }); 36 | } 37 | 38 | function warning() { 39 | Modal.warning({ 40 | title: '这是一条警告信息', 41 | content: '一些附加信息一些附加信息一些附加信息', 42 | }); 43 | } 44 | 45 | ReactDOM.render(
    46 | 47 | 48 | 49 | 50 |
    , mountNode); 51 | ```` 52 | -------------------------------------------------------------------------------- /components/cascader/demo/custom-trigger.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 可以自定义显示 4 | --- 5 | 6 | 切换按钮和结果分开。 7 | 8 | ````jsx 9 | import { Cascader } from 'antd'; 10 | 11 | const options = [{ 12 | value: 'zhejiang', 13 | label: '浙江', 14 | children: [{ 15 | value: 'hangzhou', 16 | label: '杭州', 17 | }], 18 | }, { 19 | value: 'jiangsu', 20 | label: '江苏', 21 | children: [{ 22 | value: 'nanjing', 23 | label: '南京', 24 | }], 25 | }]; 26 | 27 | const CitySwitcher = React.createClass({ 28 | getInitialState() { 29 | return { 30 | text: '未选择', 31 | }; 32 | }, 33 | onChange(value, selectedOptions) { 34 | this.setState({ 35 | text: selectedOptions.map(o => o.label).join(', '), 36 | }); 37 | }, 38 | render() { 39 | return ( 40 | 41 | {this.state.text} 42 |   43 | 44 | 切换城市 45 | 46 | 47 | ); 48 | }, 49 | }); 50 | 51 | ReactDOM.render(, mountNode); 52 | ```` 53 | -------------------------------------------------------------------------------- /components/checkbox/demo/group.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: Checkbox 组 4 | --- 5 | 6 | 方便的从数组生成 Checkbox 组。 7 | 8 | ````jsx 9 | import { Checkbox } from 'antd'; 10 | const CheckboxGroup = Checkbox.Group; 11 | 12 | function onChange(checkedValues) { 13 | console.log('checked = ', checkedValues); 14 | } 15 | 16 | const plainOptions = ['Apple', 'Pear', 'Orange']; 17 | const options = [ 18 | { label: '苹果', value: 'Apple' }, 19 | { label: '梨', value: 'Pear' }, 20 | { label: '橘', value: 'Orange' }, 21 | ]; 22 | const optionsWithDisabled = [ 23 | { label: '苹果', value: 'Apple' }, 24 | { label: '梨', value: 'Pear' }, 25 | { label: '橘', value: 'Orange', disabled: false }, 26 | ]; 27 | 28 | ReactDOM.render( 29 |
    30 | 31 |
    32 | 33 |
    34 | 35 |
    36 | , mountNode); 37 | ```` 38 | -------------------------------------------------------------------------------- /components/slider/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RcSlider from 'rc-slider'; 3 | 4 | export default class Slider extends React.Component { 5 | static defaultProps = { 6 | prefixCls: 'ant-slider', 7 | tipTransitionName: 'zoom-down', 8 | } 9 | 10 | render() { 11 | const { isIncluded, marks, index, defaultIndex, ...rest } = this.props; 12 | 13 | if (isIncluded !== undefined) { 14 | // 兼容 `isIncluded` 15 | rest.included = isIncluded; 16 | } 17 | 18 | if (Array.isArray(marks)) { 19 | // 兼容当 marks 为数组的情况 20 | rest.min = 0; 21 | rest.max = marks.length - 1; 22 | rest.step = 1; 23 | 24 | if (index !== undefined) { 25 | rest.value = index; 26 | } 27 | if (defaultIndex !== undefined) { 28 | rest.defaultValue = defaultIndex; 29 | } 30 | 31 | rest.marks = {}; 32 | marks.forEach((val, idx) => { 33 | rest.marks[idx] = val; 34 | }); 35 | } else { 36 | rest.marks = marks; 37 | } 38 | 39 | return ; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/timeline/Timeline.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import TimelineItem from './TimelineItem'; 4 | 5 | export default class Timeline extends React.Component { 6 | static defaultProps = { 7 | prefixCls: 'ant-timeline', 8 | } 9 | 10 | render() { 11 | const { prefixCls, children, pending, className, ...restProps } = this.props; 12 | const pendingNode = typeof pending === 'boolean' ? null : pending; 13 | const classString = classNames({ 14 | [prefixCls]: true, 15 | [`${prefixCls}-pending`]: !!pending, 16 | [className]: className, 17 | }); 18 | return ( 19 |
      20 | { 21 | React.Children.map(children, (ele, idx) => 22 | React.cloneElement(ele, { 23 | last: idx === children.length - 1, 24 | }) 25 | ) 26 | } 27 | {(!!pending) 28 | ? {pendingNode} 29 | : null} 30 |
    31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/alert/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 警告提示 4 | type: Presentation 5 | english: Alert 6 | --- 7 | 8 | 警告提示，展现需要关注的信息。 9 | 10 | ## 何时使用 11 | 12 | - 当某个页面需要向用户显示警告的信息时。 13 | - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 14 | 15 | ## API 16 | 17 | | 参数 | 说明 | 类型 | 默认值 | 18 | |----------- |--------------------------------------------------------- | ---------- |-------| 19 | | type | 必选参数，指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` | 20 | | closable | 可选参数，默认不显示关闭按钮 | Boolean | 无 | 21 | | closeText | 可选参数，自定义关闭按钮 | React.Node | 无 | 22 | | message | 必选参数，警告提示内容 | React.Node | 无 | 23 | | description | 可选参数，警告提示的辅助性文字介绍 | React.Node | 无 | 24 | | onClose | 可选参数，关闭时触发的回调函数 | Function | 无 | 25 | | showIcon | 可选参数，是否显示辅助图标 | Boolean | false | 26 | -------------------------------------------------------------------------------- /components/input/style/search-input.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "../../style/mixins/index"; 3 | @import "../../button/style/mixin"; 4 | @import "./mixin"; 5 | 6 | .ant-search-input-wrapper { 7 | display: inline-block; 8 | vertical-align: middle; 9 | } 10 | 11 | .ant-search-input { 12 | &.ant-input-group .ant-input:first-child, 13 | &.ant-input-group .ant-select:first-child { 14 | border-radius: @border-radius-base; 15 | position: absolute; 16 | top: -1px; 17 | width: 100%; 18 | } 19 | 20 | .ant-search-btn { 21 | .btn-default; 22 | border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0; 23 | left: -1px; 24 | position: relative; 25 | border-width: 0 0 0 1px; 26 | z-index: 2; 27 | padding-left: 8px; 28 | padding-right: 8px; 29 | &:hover { 30 | border-color: @border-color-base; 31 | } 32 | form & { 33 | padding-top: 6px; 34 | padding-bottom: 6px; 35 | } 36 | } 37 | &&-focus .ant-search-btn-noempty, 38 | &:hover .ant-search-btn-noempty { 39 | .btn-primary; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /components/progress/demo/dynamic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 动态展示 4 | --- 5 | 6 | 会动的进度条才是好进度条。 7 | 8 | ````jsx 9 | import { Progress, Button } from 'antd'; 10 | const ButtonGroup = Button.Group; 11 | 12 | const MyProgress = React.createClass({ 13 | getInitialState() { 14 | return { 15 | percent: 0, 16 | }; 17 | }, 18 | increase() { 19 | let percent = this.state.percent + 10; 20 | if (percent > 100) { 21 | percent = 100; 22 | } 23 | this.setState({ percent }); 24 | }, 25 | decline() { 26 | let percent = this.state.percent - 10; 27 | if (percent < 0) { 28 | percent = 0; 29 | } 30 | this.setState({ percent }); 31 | }, 32 | render() { 33 | return ( 34 |
    35 | 36 | 37 |
    41 | ); 42 | }, 43 | }); 44 | 45 | ReactDOM.render(, mountNode); 46 | ```` 47 | -------------------------------------------------------------------------------- /components/select/demo/combobox.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 智能提示 4 | --- 5 | 6 | 输入框自动完成功能，下面是一个账号注册表单的例子。 7 | 8 | ````jsx 9 | import { Select } from 'antd'; 10 | const Option = Select.Option; 11 | 12 | const Test = React.createClass({ 13 | getInitialState() { 14 | return { 15 | options: [], 16 | }; 17 | }, 18 | handleChange(value) { 19 | let options; 20 | if (!value || value.indexOf('@') >= 0) { 21 | options = []; 22 | } else { 23 | options = ['gmail.com', '163.com', 'qq.com'].map((domain) => { 24 | const email = `${value}@${domain}`; 25 | return ; 26 | }); 27 | } 28 | this.setState({ options }); 29 | }, 30 | render() { 31 | // filterOption 需要设置为 false，数据是动态设置的 32 | return ( 33 | 40 | ); 41 | }, 42 | }); 43 | 44 | ReactDOM.render(, mountNode); 45 | ```` 46 | --------------------------------------------------------------------------------