Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liangklfangl/bisheng-sourceCode-plugin
bisheng脚手架源码分析，将markdown转化为静态网站,来自于[我的github文章全集](https://github.com/liangklfangl/react-article-bucket)
https://github.com/liangklfangl/bisheng-sourceCode-plugin
Last synced: 11 days ago
JSON representation
bisheng脚手架源码分析，将markdown转化为静态网站,来自于[我的github文章全集](https://github.com/liangklfangl/react-article-bucket)
- Host: GitHub
- URL: https://github.com/liangklfangl/bisheng-sourceCode-plugin
- Owner: liangklfangl
- Created: 2017-01-17T11:39:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-21T01:47:04.000Z (almost 7 years ago)
- Last Synced: 2024-08-02T09:27:18.525Z (3 months ago)
- Language: JavaScript
- Homepage: https://github.com/liangklfangl/react-article-bucket
- Size: 1.2 MB
- Stars: 173
- Watchers: 5
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.html
Awesome Lists containing this project
README
Last login: Wed Jan 18 15:24:11 on ttys001
qingtiandeMacBook-Pro:~ qingtian$ cd Desktop/sy-standard-project
qingtiandeMacBook-Pro:sy-standard-project qingtian$ npm start
> [email protected] start /Users/qingtian/Desktop/sy-standard-project
> bisheng start -c ./site/bisheng.config.js --no-livereload
dora: [plugins] [{"name":"dora-plugin-webpack","query":{"disableNpmInstall":true,"cwd":"$CWD","config":"bisheng-inexistent.config.js"}},{"name":"~/Desktop/sy-standard-project/node_modules/bisheng/lib/dora-plugin-bisheng","query":{"config":"/Users/qingtian/Desktop/sy-standard-project/site/bisheng.config.js"}},{"name":"/Users/qingtian/Desktop/sy-standard-project/node_modules/dora-plugin-browser-history/lib/index.js","query":{}},{"name":"upload","query":{}},{"name":"/Users/qingtian/Desktop/sy-standard-project/node_modules/dora/lib/plugins/static","query":{}},{"name":"/Users/qingtian/Desktop/sy-standard-project/node_modules/dora/lib/plugins/serve-index","query":{}}]
dora: listened on 8001
📦 94/605 build modulescontent----> ---
order: 6
title: 更新日志
toc: false
timeline: true
---
如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0)。
---
## 2.5.2
`2016-12-10`
* 优化 Menu 已选择项的样式。
* 修复 Mention 不能响应 `onFocus` 和 `onBlur` 的问题。[#4163](https://github.com/ant-design/ant-design/issues/4163)
* 修复 `disabled` 和 `checked` 的 Radio 之间会多一条阴影的问题。[#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321
* 修复 RangePicker、TimePicker、Calendar 设置 Moment 的 `defaultValue` 和 `value` 时也会报错的问题。[#4147](https://github.com/ant-design/ant-design/issues/4147)
* 修复 Affix 在开启动画的 Tabs 里使用时会消失的问题。[#3943](https://github.com/ant-design/ant-design/issues/3943)
* 修复 Cascader 手动选择和搜索选择时 `onChange` 接收到的 `selectedOptions` 不同的问题。[#4096](https://github.com/ant-design/ant-design/issues/4096)
* 修复 Tabs 页增加到一定数量时会产生偏移的问题。[#3637](https://github.com/ant-design/ant-design/issues/3637)
* Table
* 居中对齐表头分组的父表头。
* 修正设置 filterDropdownVisible 时不生效的问题。[#4162](https://github.com/ant-design/ant-design/issues/4162)
## 2.5.1
`2016-12-03`
* 提升网站首页在移动端访问的体验。
* 补充从 `1.x` 升级到 `2.x` 时的组件改动警告提示。[#4028](https://github.com/ant-design/ant-design/pull/4028)
* 现在 ToolTip、Popover、Popconfirm 支持直接包裹文本节点和多个节点。[#3924](https://github.com/ant-design/ant-design/issues/3924)
* Anchor
* 修复快速滚动时的定位问题。[#4053](https://github.com/ant-design/ant-design/issues/4053)
* 修复 target 指定父元素 ref 时无效的问题。[#4037](https://github.com/ant-design/ant-design/issues/4037)
* Table
* 修复设置 defaultChecked 时的一个选中问题。[#4020](https://github.com/ant-design/ant-design/issues/4020)
* 修复分组表头中筛选功能无法使用的问题。[#4099](https://github.com/ant-design/ant-design/issues/4099)
* 修复在 `Input[type="textarea"]` 上使用 Popover 定位错误问题。[#4092](https://github.com/ant-design/ant-design/issues/4092)
* 修复 Popconfirm 的 `visible` 属性失效的问题。[#4068](https://github.com/ant-design/ant-design/issues/4068)
* 修复 TimePicker 无法设置 `style.width` 的问题。
* 修复 Steps 自定义图标和默认图标大小不一致的问题。[#3817](https://github.com/ant-design/ant-design/issues/3817)
* 修复 Form、Button、Slider、Table 等组件的一些样式细节。
## 2.5.0
`2016-11-25`
* 默认主题风格修改为支付宝钱包风格，及大量样式优化。
* 支持服务端渲染。（Mention 会因为 [draft-js](https://github.com/facebook/draft-js/issues/385) 的问题有 warning）
* 引入 [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) 测试组件结构及服务端渲染问题。
* 官网及文档优化。
* 新增自定义主题的 [文档](https://ant.design/docs/react/customize-theme)。
* 新增 [Sketch 资源文件](https://ant.design/docs/resource/download)。
* LocaleProvider 新增巴西语支持。[#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn)
* DatePicker
* DatePicker 现在可以决定是否展示 “今天” 按钮。[commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64)
* RangePicker 现在可以自定义快捷选择。[demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
* 修复 DatePicker 设置 `showTime` 后 “此刻” 按钮失效的问题。[#3748](https://github.com/ant-design/ant-design/issues/3748)
* 修复 `RangePicker[format]` 失效的问题。[#3808](https://github.com/ant-design/ant-design/issues/3808)
* 新增并优化部分 Icon。[#3977](https://github.com/ant-design/ant-design/pull/3977)
* 新增 Input.Search 控件。[demo](https://ant.design/components/input/#components-input-demo-search-input)
* Mention onSelect 事件现在可以获取完整的数据。[#3867](https://github.com/ant-design/ant-design/issues/3867)
* Pagination 现在支持展示当前页的索引范围。[demo](https://ant.design/components/pagination/#components-pagination-demo-total)
* Table
* 自定义筛选的显示隐藏现在可以通过代码控制。[demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
* 支持 JSX 风格的方式设置 columns。[demo](https://ant.design/components/table/#components-table-demo-jsx)
* 现在可以监听单元格的点击事件。[#3774](https://github.com/ant-design/ant-design/issues/3774)
* 修复无边框 Table 头部的圆角样式问题。
* 修复 title 和 footer 高度不随 `Table[size]` 变化的问题。[commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
* 修复选中状态出错的问题。[#3900](https://github.com/ant-design/ant-design/issues/3900)
* Upload
* 修复 children 不能为 `null` 的问题。
* 修复预览逻辑的问题。[commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378)
* 修复 Badge 会覆盖其他组件的问题。[#3898](https://github.com/ant-design/ant-design/issues/3898)
* 修复多行 Checkbox 样式不对齐的问题。[#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313)
* 修复 InputNumber 与其它表单控件不对齐的问题。[#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256)
* 修复 `Menu.Divider` 样式问题。[#3813](https://github.com/ant-design/ant-design/issues/3813)
* 修复 Popover 直接内嵌 Checkbox 和 Radio 无效的问题。[#3455](https://github.com/ant-design/ant-design/issues/3455)
* 修复 Select combobox 高度异常问题。[#3855](https://github.com/ant-design/ant-design/issues/3855)
* 修复 Switch actived 后的样式问题。[#3838](https://github.com/ant-design/ant-design/issues/3838)
* 修复 Transfer 搜索无结果时不展示 “Not Found” 提示的问题。[#3996](https://github.com/ant-design/ant-design/issues/3996)
* 修复 TreeSelect 占位符的样式问题。[#3841](https://github.com/ant-design/ant-design/issues/3841)
* 修复 TypeScript 编译报错的问题。[#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng)
* 修复表单反馈图标影响用户操作的问题。[#3891](https://github.com/ant-design/ant-design/issues/3891)
## 2.4.3
`2016-11-17`
* 修复 `Anchor` 内部 querySelector 报错，并做了一些体验优化 。[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
## 2.4.2
`2016-11-13`
* 修复 `Dropdown.Button` 不弹出的问题。[#3815](https://github.com/ant-design/ant-design/issues/3815)
## 2.4.1
`2016-11-11`
* 修复 `2.4.0` 组件 index 文件丢失的问题。
## 2.4.0
`2016-11-11`
* 调整了组件的导航结构。
* 新增 [Anchor](https://ant.design/components/anchor) 锚点组件。
* 整理了样式变量，修复 `@font-size-base` 和 `@text-color` 在部分组件无效的问题，新增 `@font-size-lg` `@text-color-secondary`，并移除了部分无用的变量。
* `Transfer` 组件新增了受控属性 `selectedKeys`。[#3729](https://github.com/ant-design/ant-design/issues/3729)
* `Tag` 新增选中状态。
* 修复 `Dropdown.Button` 不支持 `visible` 和 `onVisibleChange` 的问题。[#3779](https://github.com/ant-design/ant-design/issues/3779)
* 修复 `DatePicker[showTime]`` 的 `此刻` 按钮。[#3748](https://github.com/ant-design/ant-design/issues/3748)
* 修复 `Steps` 竖直方向的样式。[#3760](https://github.com/ant-design/ant-design/issues/3760)
* 修复 `Spin` 组件在 IE10+ 的样式问题。[#3755](https://github.com/ant-design/ant-design/issues/3755)
* 修复 `Mention` 组件的 focus 逻辑. [#3801](https://github.com/ant-design/ant-design/issues/3801)
* 修复 `Progress` 组件的动画问题。[#3784](https://github.com/ant-design/ant-design/issues/3784)
* 修复 `Select` 搜索时的丢失焦点问题。[#3778](https://github.com/ant-design/ant-design/issues/3778)
* 修复 `TimePicker` 不支持 `format="HH"` 等格式的问题。[#3793](https://github.com/ant-design/ant-design/issues/3793)
* 修复 `Input` 的 `suffix` 部分区域中鼠标事件无法响应的问题。[#3714](https://github.com/ant-design/ant-design/issues/3714)
* 优化了 `Table` 选择的性能。[#3757](https://github.com/ant-design/ant-design/pull/3757)
* 优化 `Carousel` 的默认样式。
* 优化 `Checkbox` 和 `Radio` 的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
* 修复 `DatePicker`、`Form`、`Table` 等组件的样式细节。
## 2.3.2
`2016-11-09`
* 修复使用 `getFieldProps` 会导致死循环的问题。
## 2.3.1
`2016-11-07`
* 修正上个版本缺少 `dist/antd.css` 的问题。
## 2.3.0
`2016-11-04`
* 升级 normalize.css 到 5.0。
* package.json 的 main 换成了 `lib/index.js`。[#3397](https://github.com/ant-design/ant-design/pull/3397)
* 全新的 `Spin` 设计。
* `TimePicker` 新增了 `addon` 以支持自定义的附加内容。
* `Tree` 新增了 `onDragEnd`。
* `Collapse` 新增了 `bordered`。
* 优化 `Tabs` 切换时的动画效果。
* 优化 `Radio` 和 `Checkbox` 在禁用和鼠标停留时的样式。[#3590](https://github.com/ant-design/ant-design/issues/3590)
* 优化 `Transfer` 的性能。[#2860](https://github.com/ant-design/ant-design/issues/2860)
* 修复 `Popover` 嵌套时的样式问题。[#3448](https://github.com/ant-design/ant-design/issues/3448)
* 修复 `Transfer` 服务端渲染报错的问题。[#3686](https://github.com/ant-design/ant-design/issues/3686)
* 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
* DatePicker
* 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。
* `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。
* `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718)
* 新增了捷克语的翻译。
* Badge
* 优化鼠标停留时超过 99 的数字显示。[#3645](https://github.com/ant-design/ant-design/issues/3645)
* 修复单独使用时会有移动动画的问题。[#3709](https://github.com/ant-design/ant-design/issues/3709)
* Mention
* 修复会被 `Table` 遮住的问题。[#3588](https://github.com/ant-design/ant-design/issues/3588)
* 新增 `getSuggestionContainer` 来指定容器。[#3658](https://github.com/ant-design/ant-design/pull/3658)
* Tag
* 废弃 `color` 属性。[#3560](https://github.com/ant-design/ant-design/issues/3560)
* 新增 `type`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
* 新增 `checkable`。[#3560](https://github.com/ant-design/ant-design/issues/3560)
* Radio.Group
* 新增 `className`。
* `children` 为 `null` 或 `undefined` 时现在会被忽略。
* Select
* 新增 `tokenSeparators` 支持粘贴时自动分词。[#2071](https://github.com/ant-design/ant-design/issues/2071)
* 新增 `onFocus` 回调。[#3587](https://github.com/ant-design/ant-design/issues/3587)
* 修复 `combobox` 模式下选中项不能正确显示的问题。[#3401](https://github.com/ant-design/ant-design/issues/3401)
## 2.2.1
`2016-11-02`
* 修复 Form 中 DatePicker[showTime]（受控）无法使用的问题。[#3665](https://github.com/ant-design/ant-design/issues/3665)
## 2.2.0
`2016-10-28`
* 支持 [email protected]。[@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
* 不再强依赖于 React 特定版本。[#3627](https://github.com/ant-design/ant-design/pull/3627)
* Alert 支持 `className` `style` 属性。
* DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。[#3618](https://github.com/ant-design/ant-design/issues/3618)
* Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。[#3212](https://github.com/ant-design/ant-design/issues/3212)
* RangePicker 现在可以设置不可选的时间。[#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
* Switch
* 宽度现在会随着 `checkedChildren/unCheckedChildren` 自动调整。[#3380](https://github.com/ant-design/ant-design/issues/3380)
* 优化切换动画。
* Upload 现在可以 [自定义上传方式](https://github.com/react-component/upload#customrequest)。[@edgji](https://github.com/edgji)
* Icon
* 新增 `bulb` `select` `like-o` `dislike-o`。
* 调整 `loading` `like` `dislike`。
* 优化 Card DatePicker Icon Table 的 TypeScript 定义。[@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
* 修复 Cascader `defaultValue` 失效的问题。[#3470](https://github.com/ant-design/ant-design/issues/3470)
* 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。[#3481](https://github.com/ant-design/ant-design/issues/3481)
* DatePicker
* 修复设置 `DatePicker[showTime]` 后 `onChange` 事件触发时机问题。[#3523](https://github.com/ant-design/ant-design/issues/3523)
* 修复 Dropdown.Button disabled 后仍然响应操作的问题。[#3535](https://github.com/ant-design/ant-design/issues/3535)
* Menu
* 修复服务端渲染问题，感谢 [@xpcode](https://github.com/xpcode) 定位问题。[#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
* 修复 children 不能为 `null` 的问题。[#3599](https://github.com/ant-design/ant-design/issues/3599)
* 修复 message 加载状态无动画的问题。[#3536](https://github.com/ant-design/ant-design/issues/3536)
* Form
* 修复 `Form[inline]` 与 `Input[addonBefore|addonAfter]` 一起使用时的样式问题。[#3524](https://github.com/ant-design/ant-design/issues/3524)
* 修复 Form.Item 内 Radio.Button 样式问题。
* 修复 Form.Item 内搜索按钮的样式问题。[#3630](https://github.com/ant-design/ant-design/issues/3630)
* 修复用户无输入时 Form.Item 识别为校验成功的问题。[#3613](https://github.com/ant-design/ant-design/issues/3613)
* 当 `Popover[title]` 没有设置时，不再限制 Popover 的最小宽度。
* Table
* 修复固定表头在没有数据情况下的样式问题。[#3567](https://github.com/ant-design/ant-design/issues/3567)
* 修复无数据时会覆盖 SubMenu 的问题。[#3521](https://github.com/ant-design/ant-design/issues/3521)
* Tabs
* 修复卡片叶签头部高度与设计稿不一致的问题。
* 修复 TabPane 的高度会被同级 TabPane 撑高的问题。[#3304](https://github.com/ant-design/ant-design/issues/3304)
* 修复 `TreeSelect[showSearch]` 样式问题。[#3520](https://github.com/ant-design/ant-design/issues/3520)
## 2.1.0
`2016-10-16`
- Icon 现在支持旋转动画。
- Tabs 现在可以禁用切换动画。[#3324](https://github.com/ant-design/ant-design/issues/3324)
- 新增西班牙语的 localization 支持。@Danjavia
- 更新俄语的 localization 文案。@plandem
- 新增 AutoComplete[onSelect] 回调。
- 优化 Modal 样式细节。
- 优化 Tooltip 动画。
- 优化 Transfer 按钮的样式。
- 优化 Tree 的样式细节。
- 整理和修复了部分 less 变量。
- 修复服务端渲染时全量引入 antd 报错的问题。
- 修复 Affix 与 BackTop 的服务端渲染问题。[#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
- 修复 Card[title] 内无法使用 `h3` 之类的标签的问题。[#3388](https://github.com/ant-design/ant-design/issues/3388)
- 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。[#3350](https://github.com/ant-design/ant-design/issues/3350)
- DatePicker
- 修复设置 `showTime` 后，`onChange` 重复触发的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
- 修复浮层与 Trigger 日期格式不一致的问题。[#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
- 修复与 TimePicker 样式冲突问题。[#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
- 修复 Form.Item 标签文案过长溢出的问题。
- 修复 Icon 在 Safari 下会出现边框的问题。
- 修复 InputNubmer 键盘事件死循环问题。[#3239](https://github.com/ant-design/ant-design/issues/3239)
- 修复 Popover 箭头样式问题。
- 修复 Popover 和 Popconfirm 的 `arrowPointAtCenter` 无效的问题。
- Select
- 修复样式重复引入的问题。[#3376](https://github.com/ant-design/ant-design/issues/3376)
- 修复 `notFoundContent` 无法置空的问题。[#3345](https://github.com/ant-design/ant-design/issues/3345)
- 修复 Table 内使用 Select[showSearch] 后宽度会跳动的问题。[#3413](https://github.com/ant-design/ant-design/issues/3413)
- 修复 Table 边框线与页头页脚冲突的问题。[#3301](https://github.com/ant-design/ant-design/issues/3301)
- 修复 TabPane 高度不随内容变化的问题。[#3377](https://github.com/ant-design/ant-design/issues/3377)
- 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。[#3264](https://github.com/ant-design/ant-design/pull/3264)
- Upload
- 修复用户自定义 `onRemove` 事件会覆盖默认行为的问题。[#3317](https://github.com/ant-design/ant-design/issues/3317)
- 修复图片卡片样式问题。[#3316](https://github.com/ant-design/ant-design/issues/3316)
- 修复项目构建时 moment locales 找不到的问题。[#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
## 2.0.1
`2016-10-01`
- 修复无法调用 react-slick 方法的问题。[#3164](https://github.com/ant-design/ant-design/issues/3164)
- 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。[#3159](https://github.com/ant-design/ant-design/issues/3159)
- 修复 Affix 不支持服务端渲染的问题。[#3216](https://github.com/ant-design/ant-design/issues/3216)
- 修复 Mention 不支持 `onSelect` `placeholder` 的问题。[#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
- 修复 Transfer 与 `getFieldDecorator` 一起使用时的报错问题。
- 修复 LocaleProvider 对时间组件无效的问题。
- 修复 Cascader 搜索模式搜索文字显示不了的问题。
- 修复 Spin 动画与文案整体不垂直居中的问题。
- 修复 RangePicker Modal Tag Progress 等组件样式问题。
## 2.0.0
`2016-09-28`
很高兴的通知各位，经过四个月时间的紧密开发，`[email protected]` 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 [反馈给我们](https://github.com/ant-design/ant-design/issues)。
### 2.x 主要变化
* 开发语言改为 TypeScript，提供 **官方支持的 `.d.ts` 文件**，感谢 [#1846](https://github.com/ant-design/ant-design/issues/1846) 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
* **新增英文文档**， 以后将同时提供中英双语文档，感谢 [#1471](https://github.com/ant-design/ant-design/issues/1471) 里所有参与到翻译和审阅工作中的人。
* 时间类组件 DatePicker、TimePicker、Calendar 等的底层 **使用 [moment](http://momentjs.com/) 替换 [gregorian-calendar](github.com/yiminghe/gregorian-calendar)**。
* 全新设计的 [图标](http://ant.design/components/icon/)。
* 新增提及组件 [Mention](http://ant.design/components/mention/)。
* 新增自动完成组件 [AutoComplete](http://ant.design/components/auto-complete/)。
* Form 新增 `getFieldDecorator` 作为 `getFieldProps` 的替代，对于不正确的使用方式 `getFieldDecorator` 会给出提示，可以降低踩坑的概率。相关讨论见 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
* Table 支持 [表头分组](http://ant.design/components/table/#components-table-demo-grouping-columns)。@yesmeck
* 完全移除 `[email protected]` 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。
### 2.x 不兼容改动
> 建议从 `1.x` 升级时，直接升级到 `2.x` 的最新版本。
此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。
```diff
-
+
-
+
-
+
```
* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。你也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) 来进行修改。
由于 `JSON.stringify(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
```js
handleSubmit() {
const values = this.props.form.getFieldsValue();
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
const data = JSON.stringify(values);
// 发送 data 到服务器
}
```
* 时间类组件与表单校验一起使用时，`type: 'date'` 改为 `type: 'object'`。
* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。
* Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
* Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
* Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
* Popover 移除 `overlay` ，请使用 `content`。
以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
```diff
-
+ {getFieldDecorator('userName', { ... })(
+
+ )}
```
相关讨论可以看 [#1533](https://github.com/ant-design/ant-design/issues/1533)。
* DatePicker 废弃 `toggleOpen`，请使用 `onOpenChange`：
```diff
- handleToggleOpen({ open }) {
+ handleOpenChange(open) {
...
}
```
### 2.x Bug 修复
* 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
* 修复 Form.create `withRef` 选项失效的问题。[#2843](https://github.com/ant-design/ant-design/issues/2843)
* 修复 Menu inline 模式下子菜单展开的问题。[#2701](https://github.com/ant-design/ant-design/issues/2701)
* 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。[#2684](https://github.com/ant-design/ant-design/issues/2684)
* 修复 DatePicker[showTime] 参数中的 `format` 失效的问题。[#3123](https://github.com/ant-design/ant-design/issues/3123)
* 修复 Table[dataSource] 中的项的 key 为 `0` 时识别错误的问题。[#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
* 修复 Tree.Node 无子节点时仍然显示箭头的问题。[#2616](https://github.com/ant-design/ant-design/issues/2616)
* 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。[#2748](https://github.com/ant-design/ant-design/issues/2748)
### 2.x 其他改进
* Alert 新增 [`banner` 模式](http://ant.design/components/alert/#components-alert-demo-banner)。
* BackTop 增加回到顶部的动画效果。
* Badge 新增 [状态点模式](http://ant.design/components/badge/#components-badge-demo-status)。
* Cascader 新增 [搜索功能](http://ant.design/components/cascader/#components-cascader-demo-search)。
* Checkbox 新增 [indeterminate 状态](http://ant.design/components/checkbox/#components-checkbox-demo-check-all)。
* Form 新增 [垂直布局](http://ant.design/components/form/#components-form-demo-validate-customized)。
* InputNumber 现在支持长按。[#](http://ant.design/components/input-number/#components-input-number-demo-basic)
* notification 支持 [自定义 icon](http://ant.design/components/notification/#components-notification-demo-custom-icon)。
* Spin 现在允许 [自定义文案与动画共存](http://ant.design/components/spin/#components-spin-demo-tip)。@jerrybendy
* Transfer 现在可以监听用户选择了哪些选项。[#](http://ant.design/components/transfer/#components-transfer-demo-basic)
* Transfer 现在可以定义哪些选项是 [不可选择的](http://ant.design/components/transfer/#components-transfer-demo-basic)。
* 优化 Alert 和 notification 的样式。
* 优化 Modal.confirm 之类的弹窗的键盘交互。@Dafrok
* 优化 [DatePicker 的时间选择](http://ant.design/components/date-picker/#components-date-picker-demo-time) 交互。
* 优化 [Spin 状态切换](http://ant.design/components/spin/#components-spin-demo-nested ) 时的效果。
* 更新 [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc)。
### 2.x 相关工具发布
* 新增配套网站 [AntD Library](http://library.ant.design/)，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
* `babel-plugin-antd` 更名为 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，标志着该插件将作为一个通用的按需加载方案存在，而不再是 `antd` 专有。
请更新 `package.json`：
```diff
{
"devDependencies": {
- "babel-plugin-antd": "^0.x.x",
+ "babel-plugin-import": "^1.0.0",
}
}
```
同时更新 `.babelrc` 或你在其它地方对其的配置：
```diff
{
- "plugins": [["antd", { style: "css" }]]
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
}
```
* [[email protected]](https://github.com/dvajs/dva) 也已经发布，并推荐 [在实战项目中使用](http://ant.design/docs/react/practical-projects)。
* 脚手架工具推荐使用 [dva-cli](https://github.com/dvajs/dva-cli)，原来的 `antd-init` 以后仅会用于学习以及 demo。
## 1.11.4
去 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) 查看 `0.x` 到 `1.x` 的 Change Log。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/CHANGELOG.zh-CN.md
content----> ---
order: 6
title: Change Log
toc: false
timeline: true
---
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
---
## 2.5.2
`2016-12-10`
* Improve selected item style of Menu.
* Fix issue resulting in Mention not responses `onFocus` and `onBlur`. [#4163](https://github.com/ant-design/ant-design/issues/4163)
* Fix issue resulting in there is a redundant shadow between `disabled` and `checked` Radio. [#4114](https://github.com/ant-design/ant-design/pull/4114) @jdz321
* Fix error when setting Momment `defaultValue` or `value` on RangePicker, TimePicker, Calendar. [#4147](https://github.com/ant-design/ant-design/issues/4147)
* Fix issue resulting in Affix disappears when it's uesed in animated Tabs. [#3943](https://github.com/ant-design/ant-design/issues/3943)
* Fix issue resulting in Cascader passes different `selectedOptions` to `onChange` when manually selecting and selecting by search. [#4096](https://github.com/ant-design/ant-design/issues/4096)
* Fix issue resulting in Tabs get offset, when too many tabs are opening. [#3637](https://github.com/ant-design/ant-design/issues/3637)
* Table
* Align text of grouped parent header to center.
* Fix issue resulting in `filterDropdownVisible` can't be set correctly. [#4162](https://github.com/ant-design/ant-design/issues/4162)
## 2.5.1
`2016-12-03`
* Improve website experience on mobile devices.
* Add some migrate warnings for `1.x` to `2.x`.
* ToolTip, Popover, Popconfirm support to wrap text node and multiple node directly now. [#3924](https://github.com/ant-design/ant-design/issues/3924)
* Anchor
* Fix current position bug when scroll fastly. [#4053](https://github.com/ant-design/ant-design/issues/4053)
* Fix a bug of parent component ref node is undefined. [#4037](https://github.com/ant-design/ant-design/issues/4037)
* Table
* Fix a selection problem when setting defaultChecked in rowSelection. [#4020](https://github.com/ant-design/ant-design/issues/4020)
* Fix grouping column title cannot work with filters. [#4099](https://github.com/ant-design/ant-design/issues/4099)
* Fix a misplace bug when using Popover over `Input[type="textarea"]`. [#4092](https://github.com/ant-design/ant-design/issues/4092)
* Fix Popconfirm `visible` is not-working problem. [#4068](https://github.com/ant-design/ant-design/issues/4068)
* Fix TimePicker can not override width by `style.width`.
* Unify Steps icon size. [#3817](https://github.com/ant-design/ant-design/issues/3817)
* Fix style details of Form, Button, Slider, Table.
## 2.5.0
`2016-11-25`
* Change the default theme to Alipay style and improve lots of style details.
* Supports server-side rendering. (`Mention` will throw warning for [draft-js](https://github.com/facebook/draft-js/issues/385)' issue)
* Introduce [Jest Snapshot](https://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing) to test the structure of components and SSR issues.
* Improve official website and documentation.
* Add [document](https://ant.design/docs/react/customize-theme) for customizing theme.
* Add [Sketch template files](https://ant.design/docs/resource/download).
* `LocaleProvider` supports Brazilian. [#4004](https://github.com/ant-design/ant-design/pull/4004) [@nathantn](https://github.com/nathantn)
* DatePicker
* DatePicker can determine whether to show "Today" button. [commit](https://github.com/ant-design/ant-design/commit/bbef274aae169d142e3e7e3ea0af922d48e6dd64)
* RangePicker can set presetted ranges. [demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
* Fix "Now" button doesn't work while `DatePicker[showTime]` is set. [#3748](https://github.com/ant-design/ant-design/issues/3748)
* Fix `RangePicker[format]` should work. [#3808](https://github.com/ant-design/ant-design/issues/3808)
* Add and update some icons. [#3977](https://github.com/ant-design/ant-design/pull/3977)
* New component `Input.Search`. [demo](https://ant.design/components/input/#components-input-demo-search-input)
* Mention onSelect event will get complete record. [#3867](https://github.com/ant-design/ant-design/issues/3867)
* Pagination can get current range. [demo](https://ant.design/components/pagination/#components-pagination-demo-total)
* Table
* We can control the visible of customized `filterDropdown`. [demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
* Supports JSX-style columns. [demo](https://ant.design/components/table/#components-table-demo-jsx)
* Can listen the click event of table cell. [#3774](https://github.com/ant-design/ant-design/issues/3774)
* Fix border radius of head of border-less table.
* Fix that height of title and footer don't follow `Table[size]`. [commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
* Fix issue with selected status. [#3900](https://github.com/ant-design/ant-design/issues/3900)
* Upload
* Fix that children could not be `null`.
* Fix logic of preview. [commit](https://github.com/ant-design/ant-design/commit/e552880c32aaa3f5b0fb09a5e1fb7454c24d5378)
* Fix `z-index` of Badge. [#3898](https://github.com/ant-design/ant-design/issues/3898)
* Fix alignment of multi-line Checkbox. [#3971](https://github.com/ant-design/ant-design/issues/3971) [@flashback313](https://github.com/flashback313)
* Fix alignment of InputNumber while using with other form controls. [#3866(comment)](https://github.com/ant-design/ant-design/issues/3866#issuecomment-261148256)
* Fix style of `Menu.Divider`. [#3813](https://github.com/ant-design/ant-design/issues/3813)
* Fix that Popover should support Checkbox and Radio as children. [#3455](https://github.com/ant-design/ant-design/issues/3455)
* Fix height of `Select[combobox]`. [#3855](https://github.com/ant-design/ant-design/issues/3855)
* Fix style of actived Switch. [#3838](https://github.com/ant-design/ant-design/issues/3838)
* Fix that Transfer doesn't show "Not Found" while there is no search result. [#3996](https://github.com/ant-design/ant-design/issues/3996)
* Fix style of placeholder of TreeSelect. [#3841](https://github.com/ant-design/ant-design/issues/3841)
* Fix compile errors in TypeScript. [#3969](https://github.com/ant-design/ant-design/pull/3969) [@AlbertZheng](https://github.com/AlbertZheng)
* Fix that feedback icon should not affect users' operation. [#3891](https://github.com/ant-design/ant-design/issues/3891)
## 2.4.3
`2016-11-17`
* Fix errors in `Anchor` about querySelector, and make some experience Optimization .[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
## 2.4.2
`2016-11-13`
* Fix `Dropdown.Button` cannot popup menu.[#3815](https://github.com/ant-design/ant-design/issues/3815)
## 2.4.1
`2016-11-11`
* Fix `2.4.0` missing index files.
## 2.4.0
`2016-11-11`
* Adjust components structure.
* New [Anchor](https://ant.design/components/anchor) Component.
* Fix less variables `@font-size-base` and `@text-color`, add `@font-size-lg` `@text-color-secondary`.
* Add new props `selectedKeys` for `Transfer` component [#3729]. (https://github.com/ant-design/ant-design/issues/3729)
* Add `Tag` selected status.
* Fix `Dropdown.Button` not support `visible` and `onVisibleChange`. [#3779](https://github.com/ant-design/ant-design/issues/3779)
* Fix `Now` button of `DatePicker[showTime]`. [#3748](https://github.com/ant-design/ant-design/issues/3748)
* Fix style of `Steps` in vertical mode. [#3760](https://github.com/ant-design/ant-design/issues/3760)
* Fix style compatibility of `Spin` in IE10+.[#3755](https://github.com/ant-design/ant-design/issues/3755)
* Fix default style of `Carousel` component.
* Fix focus logic of `Mention` component. [#3801](https://github.com/ant-design/ant-design/issues/3801)
* Fix animate bug of `Progress` component. [#3784](https://github.com/ant-design/ant-design/issues/3784)
* Fix focus bug of `Select` component. [#3778](https://github.com/ant-design/ant-design/issues/3778)
* Fix `TimePicker` not support `format="HH"` bug. [#3793](https://github.com/ant-design/ant-design/issues/3793)
* Fix `Input` `suffix` mouse event responsive area. [#3714](https://github.com/ant-design/ant-design/issues/3714)
* Improve performance of `Table` selection. [#3757](https://github.com/ant-design/ant-design/pull/3757)
* Improve Carousel default UI style.
* Improve style of `Checkbox` and `Radio`. [#3590](https://github.com/ant-design/ant-design/issues/3590)
* Fix style of DatePickek, Form, Table.
## 2.3.2
`2016-11-09`
* Fix dead loop while using `getFieldProps`.
## 2.3.1
`2016-11-07`
* Add missing `dist/antd.css` back.
## 2.3.0
`2016-11-04`
* Upgrade normalize.css to 5.0.
* Point main file to `lib/index.js` in package.json. [#3397](https://github.com/ant-design/ant-design/pull/3397)
* A brand new `Spin` design.
* Add `addon` for `TimePicker` to allow render some addon to its bottom.
* Add `onDragEnd` for `Tree`.
* Add `bordered` for `Collapse`.
* Improve `Tabs` switch animation.
* Improve `Radio` and `Checkbox` style when it's disabled and mouse hovered. [#3590](https://github.com/ant-design/ant-design/issues/3590)
* Optimize `Transfer` performance.[#2860](https://github.com/ant-design/ant-design/issues/2860)
* Fix nested `Popover` style issue. [#3448](https://github.com/ant-design/ant-design/issues/3448)
* Fix issue resulting in server side render `Transfer` failed. [#3686](https://github.com/ant-design/ant-design/issues/3686)
* Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
* DatePicker
* `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now.
* Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`.
* `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718)
* Add czech locale/translations.
* Badge
* Improve number over 99 displaying when mouse hovering. [#3645](https://github.com/ant-design/ant-design/issues/3645)
* Fix moving animation when using `Badge` alone. [#3709](https://github.com/ant-design/ant-design/issues/3709)
* Mention
* Fix issue resulting in `Mention` will be covered by `Table`. [#3588](https://github.com/ant-design/ant-design/issues/3588)
* Add `getSuggestionContainer` to allow specify container. [#3658](https://github.com/ant-design/ant-design/pull/3658)
* Tag
* Deprecate `color`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
* Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
* Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
* Radio.Group
* Add `className`。
* `null` or `undefined` `children` will be ignored.
* Select
* Add `tokenSeparators` to support automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071)
* Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587)
* Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401)
## 2.2.1
`2016-11-02`
* Fix controlled DatePicker[showTime] not working bug. [#3665](https://github.com/ant-design/ant-design/issues/3665)
## 2.2.0
`2016-10-28`
* Supports [email protected]. [@AlbertZheng](https://github.com/AlbertZheng) [#3358](https://github.com/ant-design/ant-design/issues/3358)
* Not rely on specific version of React now. [#3627](https://github.com/ant-design/ant-design/pull/3627)
* Alert supports `className` `style`.
* DatePicker & MonthPicker & RangePicker allow developers to set whether to show the clear button. [#3618](https://github.com/ant-design/ant-design/issues/3618)
* Form.Item can generate `validateStatus` & `help` for nested form control automatically. [#3212](https://github.com/ant-design/ant-design/issues/3212)
* RangePicker can set some hours or minutes or seconds to be not selectable. [#](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date)
* Switch
* The width of Switch will resize automatically, according to `checkedChildren/unCheckedChildren`. [#3380](https://github.com/ant-design/ant-design/issues/3380)
* Improve the switch animation.
* Upload can [customized request](https://github.com/react-component/upload#customrequest) now. [@edgji](https://github.com/edgji)
* Icon
* New icons `bulb` `select` `like-o` `dislike-o`.
* Adjust existing icons `loading` `like` `dislike`.
* Improve the TypeScript definition of Card & DatePicker & Icon & Table. [@infeng](https://github.com/infeng) [3468](https://github.com/ant-design/ant-design/pull/3468) [#3603](https://github.com/ant-design/ant-design/pull/3603) [#3531](https://github.com/ant-design/ant-design/pull/3531)
* Fix Cascader `defaultValue` should work. [#3470](https://github.com/ant-design/ant-design/issues/3470)
* Fix the alignment of Button & Input & DatePicker & Select. [#3481](https://github.com/ant-design/ant-design/issues/3481)
* DatePicker
* Fix wrong timing of triggering `onChange` while `DatePicker[showTime]` is set. [#3523](https://github.com/ant-design/ant-design/issues/3523)
* Fix `Dropdown.Button[disabled]` doesn't works for behaviour. [#3535](https://github.com/ant-design/ant-design/issues/3535)
* Menu
* Fix errors in SSR, thanks to [@xpcode](https://github.com/xpcode) to find the solution. [#2061](https://github.com/ant-design/ant-design/issues/2061) [#2406](https://github.com/ant-design/ant-design/issues/2406) [#3293](https://github.com/ant-design/ant-design/issues/3293)
* Fix children don't support `null`. [#3599](https://github.com/ant-design/ant-design/issues/3599)
* Fix loading status animation for message.[#3536](https://github.com/ant-design/ant-design/issues/3536)
* Form
* Fix style issue while using `Form[inline]` and `Input[addonBefore|addonAfter]` together. [#3524](https://github.com/ant-design/ant-design/issues/3524)
* Fix style issue for Radio.Button in Form.Item.
* Fix style issue for search button in Form.Item. [#3630](https://github.com/ant-design/ant-design/issues/3630)
* Fix Form.Item should not treat no user input as validate success. [#3613](https://github.com/ant-design/ant-design/issues/3613)
* Should not limit the min width of Popover while `Popover[title]` is not set.
* Table
* Fix style of fixed header of Table while `dataSource` is empty.[#3567](https://github.com/ant-design/ant-design/issues/3567)
* Fix Table will overlap SubMenu while `dataSource` is empty. [#3521](https://github.com/ant-design/ant-design/issues/3521)
* Tabs
* Height of header of `Tabs[type="card|editable-card"]` should follow design.
* Fix height of TabPane should follow height of its content. [#3304](https://github.com/ant-design/ant-design/issues/3304)
* Fix style of `TreeSelect[showSearch]`. [#3520](https://github.com/ant-design/ant-design/issues/3520)
## 2.1.0
`2016-10-16`
- Supports spinning Icon.
- Tabs's switch animation could be disabled now. [#3324](https://github.com/ant-design/ant-design/issues/3324)
- Add Spanish localization for LocaleProvider. @Danjavia
- Update Russian localization for LocaleProvider. @plandem
- Add `onSelect` event for AutoComplete.
- Improve style of Modal.
- Improve animation of Tooltip.
- Improve style of Transfer's buttons.
- Improve style of Tree.
- Fix some less variables.
- Fix errors while import the whole antd in SSR.
- Fix errors while render Affix and BackTop on server. [#3283](https://github.com/ant-design/ant-design/issues/3283) [#3343](https://github.com/ant-design/ant-design/issues/3343)
- Fix conflicts between Cascader search mode and browser's autocomplete behaviour. [#3350](https://github.com/ant-design/ant-design/issues/3350)
- Fix bug that `h3` cannot be the value of Card[title]. [#3388](https://github.com/ant-design/ant-design/issues/3388)
- DatePicker
- Fix bug that `onChange` will be trigger twice when `showTime` is set. [#3376](https://github.com/ant-design/ant-design/issues/3376)
- Fix differences between overlay's and trigger's date format. [#3405](https://github.com/ant-design/ant-design/issues/3405) [#3298](https://github.com/ant-design/ant-design/issues/3298)
- Fix style conflicts with TimePicker. [#3312](https://github.com/ant-design/ant-design/issues/3312) [#3307](https://github.com/ant-design/ant-design/issues/3307)
- Fix overflow issue for Form.Item label.
- Fix that Icon should not show border in Safari.
- Fix infinite loop while inc/dec InputNubmer with keyboard. [#3239](https://github.com/ant-design/ant-design/issues/3239)
- Fix the style of the arrow of Popover.
- Fix bug Popover and Popconfirm `arrowPointAtCenter` doesn't work.
- Select
- Fix bug that styles of Select are imported twice. [#3332](https://github.com/ant-design/ant-design/issues/3332)
- Fix bug `notFoundContent` cannot be set as `''`. [#3345](https://github.com/ant-design/ant-design/issues/3345)
- Fix the unstable width of table cell with Select[showSearch]. [#3413](https://github.com/ant-design/ant-design/issues/3413)
- Fix style conflicts while use `border` & `title` & `footer` of Table at the same time. [#3301](https://github.com/ant-design/ant-design/issues/3301)
- Fix that the height of TabPane doesn't follow height of content. [#3377](https://github.com/ant-design/ant-design/issues/3377)
- Fix bug Transfer[titles] is not under the control of LocaleProvider. [#3264](https://github.com/ant-design/ant-design/pull/3264)
- Upload
- Fix bug users' `onRemove` will override default behaviour. [#3317](https://github.com/ant-design/ant-design/issues/3317)
- Fix style for `listType='picture-card'`.[#3316](https://github.com/ant-design/ant-design/issues/3316)
- Fix bug that moment locales is not found while built. [#3204](https://github.com/ant-design/ant-design/issues/3204) [#3411](https://github.com/ant-design/ant-design/issues/3411)
## 2.0.1
`2016-10-01`
- Fix developers cannot call methods of react-slick. [#3164](https://github.com/ant-design/ant-design/issues/3164)
- Fix Steps.Step[icon] should support React.ReactNode. [#3159](https://github.com/ant-design/ant-design/issues/3159)
- Fix server-side render for Affix. [#3216](https://github.com/ant-design/ant-design/issues/3216)
- Fix Mention should support `onSelect` `placeholder`. [#3236](https://github.com/ant-design/ant-design/issues/3236) [#3226](https://github.com/ant-design/ant-design/issues/3226)
- Fix Transfer cannot work with `getFieldDecorator`.
- Fix LocaleProvider doesn't work for time-related components.
- Fix Cascader doesn't show search text in search mode.
- Fix the animation & text Spin should be placed in vertical middle.
- Fix styles of RangePicker Modal Tag Progress.
## 2.0.0
`2016-09-28`
After four months, `[email protected]` is published. We had refactored code and improve functionalities and details of existing components. What's more, we provide English version of the documentation. The antd community help us a lot in developing `[email protected]`.
If you meet any problem while you try to upgrade from `[email protected]`, feel free to [create issues on GitHub](https://github.com/ant-design/ant-design/issues).
### 2.x Major changes
* Refactor components with TypeScript, and provide **`.d.ts` files which are officially supported**. Thanks to all the developers that contributed to [#1846](https://github.com/ant-design/ant-design/issues/1846) and @infeng.
* **Translate the documentation into English**, and we are going to provide both of Chinese and English versions of the documentation in the future. Thanks to all the translators and reviewers that contributed to [#1471](https://github.com/ant-design/ant-design/issues/1471).
* DatePicker, TimePicker, Calendar and other components that are designed to select time **are refactored to replace [gregorian-calendar](github.com/yiminghe/gregorian-calendar) with [moment](http://momentjs.com/)**.
* All the [icons](http://ant.design/components/icon/) are re-designed.
* New component [Mention](http://ant.design/components/mention/).
* New component [AutoComplete](http://ant.design/components/auto-complete/).
* The `getFieldProps` of Form is replaced with `getFieldDecorator` which will warn developers if they make mistakes. Related discussion [#1533](https://github.com/ant-design/ant-design/issues/1533).
* Table supports [grouping columns](http://ant.design/components/table/#components-table-demo-grouping-columns). @yesmeck
* Removed components and features which are deprecated in `[email protected]`, such as QueueAnim, Validation, Form.ValueMixin, Progress.Line, Progress.Circle, Popover[overlay] and Slider[marks] will not support array any more.
### 2.x Breaking changes
> We suggest you upgrade to lastest version of `2.x`.
There are some breaking changes in `[email protected]`, and you need to modify your code to work with it.
* `value` and `defaultValue` of all the time-related components will not support type `String/Date`, please use [moment](http://momentjs.com/):
```diff
-
+
-
+
-
+
```
* Parameters of type `Date/GregorianCalendar` of functions such as `onChange` and `onPanelChange`, plus other callback functions had been changed to type moment. Please consult [APIs of gregorian-calendar](https://github.com/yiminghe/gregorian-calendar) and [APIs of moment](http://momentjs.com/docs/), and update your code accordingly. And you can consult this [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) to see how to update.
Because the return value of `JSON.stringy(date: moment)` will lost time zone, we should use `.format` to convert date to string first, see related issue [#3082](https://github.com/ant-design/ant-design/issues/3082) for details:
```js
handleSubmit() {
const values = this.props.form.getFieldsValue();
values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // or other format
const data = JSON.stringify(values);
// send data to server
}
```
* For the value of time-related components becomes an instance of `moment`, you should replace `type: 'date'` with `type: 'object'` in form validation.
* The `format` of time-related components is changed from [gregorian-calendar-format](https://github.com/yiminghe/gregorian-calendar-format#api) to [moment format](http://momentjs.com/docs/#/parsing/string-format/) now, for instance the format `yyyy-MM-dd` should change to `YYYY-MM-DD`.
* `linkRender` and `nameRender` of Breadcrumb are removed, please use `itemRender`.
* `onClose` and `onOpen` of Menu are removed, please use `onOpenChange`. As being totally different, please check [this demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current) first.
* Paging columns of Table were removed, please use [fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns).
* `Popover[overlay]` is removed, please use `Popover[content]` instead.
The following change will throw some warnings in the console and it will still work, but we recommend to update your code.
* `getFieldProps` of Form is deprecated, please use `getFieldDecorator`:
```diff
-
+ {getFieldDecorator('userName', { ... })(
+
+ )}
```
Look up to [#1533](https://github.com/ant-design/ant-design/issues/1533) for related discussion.
* `toggleOpen` of DatePicker is deprecated, please use `onOpenChange`:
```diff
- handleToggleOpen({ open }) {
+ handleOpenChange(open) {
...
}
```
### 2.x Bug fixes
* Dropdown.Button[disabled] should work. [#3070](https://github.com/ant-design/ant-design/issues/3070)
* `option.withRef` of Form.create should work. [#2843](https://github.com/ant-design/ant-design/issues/2843)
* Fix slow response of expanding sub menu in Menu[inline] mode. [#2701](https://github.com/ant-design/ant-design/issues/2701)
* The button of Modal.confirm(and so on) should not be clickable while it is closed asynchronously. [#2684](https://github.com/ant-design/ant-design/issues/2684)
* `format` of DatePicker[showTime] should work. [#3123](https://github.com/ant-design/ant-design/issues/3123)
* Fix Table[dataSource] treat key whose value is `0` as inexisting. [#3166](https://github.com/ant-design/ant-design/pull/3166) @noonnightstorm
* Tree.Node should not show arrow if it has no child nodes. [#2616](https://github.com/ant-design/ant-design/issues/2616)
* Fix cursor style of arrows that are hidden of Tree.Node. [#2748](https://github.com/ant-design/ant-design/issues/2748)
### 2.x Other improvements
* Alert supports [`banner` mode](http://ant.design/components/alert/#components-alert-demo-banner).
* BackTop will scroll to top with animation.
* Badge supports [status dot mode](http://ant.design/components/badge/#components-badge-demo-status).
* Cascader supports [searching options directly](http://ant.design/components/cascader/#components-cascader-demo-search).
* Checkbox supports [indeterminate mode](http://ant.design/components/checkbox/#components-checkbox-demo-check-all).
* Form supports [vertical layout](http://ant.design/components/form/#components-form-demo-validate-customized).
* InputNumber supports long press to increase/decrease number. [#](http://ant.design/components/input-number/#components-input-number-demo-basic)
* notification supports [customized icon](http://ant.design/components/notification/#components-notification-demo-custom-icon).
* Spin allows [customized tips and animation work together](http://ant.design/components/spin/#components-spin-demo-tip). @jerrybendy
* Transfer can handle event while options are checked/unchecked. [#](http://ant.design/components/transfer/#components-transfer-demo-basic)
* Transfer can determine [whether an option is checkable](http://ant.design/components/transfer/#components-transfer-demo-basic).
* Improve style of Alert and notification.
* Modal.confirm(and so on) can be closed by keyboard. @Dafrok
* Improve the user experience of [selecting time in DatePicker](http://ant.design/components/date-picker/#components-date-picker-demo-time).
* Improve the status changed animation of [Spin](http://ant.design/components/spin/#components-spin-demo-nested ).
* Update [font-family](https://github.com/ant-design/ant-design/commit/2f308b0f995cfcb2a3c8feb1e35ffd3f0bf93cfc).
### 2.x Workflow
* [AntD Library](http://library.ant.design/) a collection of Axure files which includes components and patterns that follow Ant Design Specification.
* Rename `babel-plugin-antd` to [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import), and this means that `babel-plugin-import` becomes an common load-on-demand solution and not just for `antd`.
Please update `package.json`:
```diff
{
"devDependencies": {
- "babel-plugin-antd": "^0.x.x",
+ "babel-plugin-import": "^1.0.0",
}
}
```
And update your babel config in `.babelrc` or other place:
```diff
{
- "plugins": [["antd", { style: "css" }]]
+ "plugins": [["import", { libraryName: "antd", style: "css" }]]
}
```
* [[email protected]](https://github.com/dvajs/dva) is published and it is officially recommended framework [in real world](http://ant.design/docs/react/practical-projects).
* The officially recommended scaffold is [dva-cli](https://github.com/dvajs/dva-cli) now, the old `antd-init` is just for studying and demo.
## 1.11.4
Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/CHANGELOG.en-US.md
content----> ---
category: Components
type: General
title: 阿里
subtitle: 阿里
---
按钮用于开始一个即时操作。
## 何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
## API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
type | 设置按钮类型，可选值为 `primary` `ghost` `dashed` 或者不设 | string | -
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | 设置按钮的图标类型 | string | -
shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
loading | 设置按钮载入状态 | boolean | false
onClick | `click` 事件的 handler | function | -
`Hello world!` 最终会被渲染为 `Hello world!`，并且除了上表中的属性，其它属性都会直接传到 ``。
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/Ali/index.en-US.md
content----> ---
category: Components
type: Navigation
cols: 2
title: Ali
---
Hyperlinks to scroll on one page.
## When To Use
For displaying anchor hyperlinks on page and jumping between them.
## API
### Anchor Props
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
| bounds | Bounding distance of anchor area | Number | 5(px) |
### Link Props
| Property | Description | Type | Default |
|-------------|----------------|--------------------|--------------|
| href | target of hyperlink | String | |
| title | content of hyperlink | React.Node | |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/Ali/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: Affix
---
Make an element sticky to viewport.
## When To Use
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
## API
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
| onChange | Callback when affix state is changed | Function(affixed) | - |
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
```jsx
...
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/affix/index.en-US.md
content----> ---
category: Components
subtitle: 固钉
type: Navigation
title: Affix
---
将页面元素钉在可视范围。
## 何时使用
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时，慎用此功能以免遮挡页面内容。
## API
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
```jsx
...
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/affix/index.zh-CN.md
content----> ---
category: Components
type: Feedback
title: Alert
---
Alert component for feedback.
## When To Use
- When you need to show alert messages for users.
- When you need a persistent static container which is closable by user actions.
## API
| Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
| closable | Whether Alert can be closed | Boolean | - |
| closeText | Close text to show | React.Node | - |
| message | Content of Alert | React.Node | - |
| description | Additional content of Alert | React.Node | - |
| onClose | Callback when close Alert | Function | - |
| showIcon | Whether to show icon | Boolean | false |
| banner | Whether to show as banner | Boolean | false |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/index.en-US.md
content----> ---
category: Components
type: Navigation
cols: 2
title: Anchor
---
Hyperlinks to scroll on one page.
## When To Use
For displaying anchor hyperlinks on page and jumping between them.
## API
### Anchor Props
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
| bounds | Bounding distance of anchor area | Number | 5(px) |
### Link Props
| Property | Description | Type | Default |
|-------------|----------------|--------------------|--------------|
| href | target of hyperlink | String | |
| title | content of hyperlink | React.Node | |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/anchor/index.en-US.md
content----> ---
category: Components
subtitle: 警告提示
type: Feedback
title: Alert
---
警告提示，展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
| closable | 默认不显示关闭按钮 | Boolean | 无 |
| closeText | 自定义关闭按钮 | React.Node | 无 |
| message | 警告提示内容 | React.Node | 无 |
| description | 警告提示的辅助性文字介绍 | React.Node | 无 |
| onClose | 关闭时触发的回调函数 | Function | 无 |
| showIcon | 是否显示辅助图标 | Boolean | false |
| banner | 是否用作顶部公告 | Boolean | false |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
cols: 1
title: AutoComplete
---
Autocomplete function of input field.
## When To Use
When there is a need for autocomplete functionality.
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
```
Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.
| Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------|
| dataSource | Data source for autocomplete | Array | |
| value | selected option | String/Array/{key: String, label: React.Node}/Array<{key, label}> | - |
| defaultValue | Initial selected option. | string/Array | - |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
| disabled | Whether disabled select | boolean | false |
| placeholder | placeholder of input | string | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/auto-complete/index.en-US.md
content----> ---
category: Components
subtitle: 锚点
cols: 2
type: Navigation
title: Anchor
---
用于跳转到页面指定位置。
## 何时使用
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
## API
### Anchor Props
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
| bounds | 锚点区域边界 | Number | 5(px) |
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| href | 锚点链接 | String | |
| title | 文字内容 | React.Node | |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/anchor/index.zh-CN.md
content----> ---
category: Components
subtitle: 自动完成
type: Data Entry
cols: 1
title: AutoComplete
---
输入框自动完成功能。
## 何时使用
需要自动完成时。
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
```
因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
| dataSource | 自动完成的数据源 | Array | |
| value | 指定当前选中的条目 | String/Array/{key: String, label: React.Node}/Array<{key, label}> | 无 |
| defaultValue | 指定默认选中的条目 | String/Array/{key: String, label: React.Node}/Array<{key, label}> | 无 |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
| disabled | 是否禁用 | boolean | false |
| placeholder | 输入框提示 | string | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/auto-complete/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: BackTop
---
`BackTop` makes it easy to go back to the top of the page.
## When To Use
- When the page content is very long.
- When you need to go back to the top very frequently in order to view the contents.
## API
> The distance to the bottom is set to `50px` by default, which is overridable.
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
Property | Description | Type | Default
-----|-----|-----|------
visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
onClick | a callback function, which can be executed when you click the button | Function | -
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/back-top/index.en-US.md
content----> ---
category: Components
type: Navigation
subtitle: 回到顶部
title: BackTop
---
返回页面顶部的操作按钮。
## 何时使用
- 当页面内容区域比较长时；
- 当用户需要频繁返回顶部查看相关内容时。
## API
> 有默认样式，距离底部 `50px`，可覆盖。
> 自定义样式宽高不大于 40px * 40px。
| 参数 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
| onClick | 点击按钮的回调函数 | Function | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/back-top/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Badge
---
Small numerical value or status descriptors for UI elements.
## When To Use
Badge normally appears in proximity to notification or head picture with eye-catching appeal, typically displaying unread messages count.
## API
```jsx
```
```jsx
```
| Property | Description | Type | Default |
|----------------|-------------------------|------------|---------|
| count | Number to show in badge | Number | |
| overflowCount | Max count to show | Number | 99 |
| dot | Whether to show red dot without number | Boolean | false |
| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
| text | If `status` is set, `text` is to set the text of status dot | String | '' |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/index.en-US.md
content----> ---
category: Components
subtitle: 徽标数
type: Data Display
title: Badge
---
图标右上角的圆形徽标数字。
## 何时使用
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
## API
```jsx
```
```jsx
```
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|----------------------------------|------------|---------|--------|
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | |
| overflowCount | 展示封顶的数字值 | Number | | 99 |
| dot | 不展示数字，只有一个小红点 | Boolean | | false |
| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | String | | '' |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: Breadcrumb
---
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
## When To Use
- When the system has more than two layers in a hierarchy.
- When you need to inform the user of where they are.
- When the user may need to navigate back to a higher level.
- When the application has multi-layer architecture.
## API
| Property | Description | Type | Optional | Default |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | The routing stack information of router | Array | | - |
| params | Routing parameter | Object | | - |
| separator | Custom separator | String or Element | | '/' |
| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
> `linkRender` and `nameRender` were removed after `[email protected]`, please use `itemRender` instead.
### Use with browserHistory
The link of Breadcrumb item contain `#` defaultly, you can use `itemRender` to make `browserHistory` Link.
```jsx
import { Link } from 'react-router';
function itemRender(route, params, routes, paths) {
const last = routes.indexOf(route) === routes.length - 1;
return last ? {route.breadcrumbName} : {route.breadcrumbName};
}
return ;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/index.en-US.md
content----> ---
category: Components
subtitle: 面包屑
type: Navigation
title: Breadcrumb
---
显示当前页面在系统层级结构中的位置，并能向上返回。
## 何时使用
- 当系统拥有超过两级以上的层级结构时；
- 当需要告知用户『你在哪里』时；
- 当需要向上导航的功能时。
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | router 的路由栈信息 | Array | | - |
| params | 路由的参数 | Object | | - |
| separator | 分隔符自定义 | String or Element | | '/' |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
### 和 browserHistory 配合
和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
```jsx
import { Link } from 'react-router';
function itemRender(route, params, routes, paths) {
const last = routes.indexOf(route) === routes.length - 1;
return last ? {route.breadcrumbName} : {route.breadcrumbName};
}
return ;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/index.zh-CN.md
content----> ---
category: Components
type: General
title: Button
---
To trigger an operation.
## When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
## API
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
Property | Description | Type | Default
-----|-----|-----|------
type | can be set to `primary` `ghost` `dashed` or omitted | string | -
htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | set the icon of button, see: Icon component | string | -
shape | can be set to `circle` or omitted | string | -
size | can be set to `small` `large` or omitted | string | `default`
loading | to set the loading status of button | boolean | false
onClick | set the handler to handle `click` event | function | -
`Hello world!` will be rendered into `Hello world!`, and all the properties which are not listed above will be transferred to the `` tag.
[id^=components-button-demo-] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^=components-button-demo-] .ant-btn-group > .ant-btn {
margin-right: 0;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/index.en-US.md
content----> ---
category: Components
type: General
title: Button
subtitle: 按钮
---
按钮用于开始一个即时操作。
## 何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
## API
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
type | 设置按钮类型，可选值为 `primary` `ghost` `dashed` 或者不设 | string | -
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | 设置按钮的图标类型 | string | -
shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
loading | 设置按钮载入状态 | boolean | false
onClick | `click` 事件的 handler | function | -
`Hello world!` 最终会被渲染为 `Hello world!`，并且除了上表中的属性，其它属性都会直接传到 ``。
[id^="components-button-demo-"] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
margin-right: 0;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/index.zh-CN.md
content----> ---
category: Components
type: Data Display
cols: 1
title: Calendar
---
Container for displaying data in calendar form.
## When To Use
When data is in the form of date, such as schedule, timetable, prices calendar, Lunar calendar. This component also supports Year/Month switch.
## API
```html
```
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | set date | [moment](http://momentjs.com/) | current date |
| defaultValue | set default date | [moment](http://momentjs.com/) | default date |
| mode | can be set to month or year | string | month |
| fullscreen | to set whether full-screen display | boolean | true |
| dateCellRender | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
| monthCellRender | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
| locale | set locale | Object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/index.en-US.md
content----> ---
category: Components
type: Data Display
subtitle: 日历
cols: 1
title: Calendar
---
按照日历形式展示数据的容器。
## 何时使用
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
## API
```html
```
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
| mode | 初始模式，`month/year` | string | month |
| fullscreen | 是否全屏显示 | boolean | true |
| dateCellRender | 自定义渲染日期单元格| function(date: moment): ReactNode | 无 |
| monthCellRender | 自定义渲染月单元格 | function(date: moment): ReactNode | 无 |
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Card
cols: 1
---
Simple rectangular container
## When To Use
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
## API
```html
Card content
```
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| title | Card title | React.Element | - |
| extra | Content to render in the top-right corner of the card | React.Element | - |
| bordered | Toggles rendering of the border around the card | Boolean | true |
| bodyStyle | Inline style to apply to the card content | Object | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/index.en-US.md
content----> ---
category: Components
type: Data Display
title: Card
subtitle: 卡片
cols: 1
---
通用卡片容器。
## 何时使用
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
## API
```html
卡片内容
```
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 卡片标题 | React.Element | - |
| extra | 卡片右上角的操作区域 | React.Element | - |
| bordered | 是否有边框 | Boolean | true |
| bodyStyle | 内容区域自定义样式 | Object | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Carousel
---
A carousel component. Scales with its container.
## When To Use
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a resolving door.
- Commonly used for a group of pictures/cards.
## API
| Property | Description | Type | Default |
|------------------|----------------------------------------------|----------|---------------------------------|
| effect | Animation effect, either `scrollx` or `fade` | String | scrollx |
| dots | Whether to show the dots at the bottom of the gallery | Boolean | true |
| vertical | Whether to use a vertical display | Boolean | false |
| autoplay | Whether to scroll automatically | Boolean | false |
| easing | Transition name | String | linear |
| beforeChange | Callback function called before the current index changes | function(from, to) |
| afterChange | Callback function called after the current index changes | function(current) |
For more info on the parameters, refer to the https://github.com/akiran/react-slick
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
color: #fff;
overflow: hidden;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/index.en-US.md
content----> ---
category: Components
type: Data Display
title: Carousel
subtitle: 走马灯
---
旋转木马，一组轮播的区域。
## 何时使用
- 当有一组平级的内容。
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
- 常用于一组图片或卡片轮播。
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------|
| effect | 动画效果函数，可取 scrollx, fade | String | scrollx |
| dots | 是否显示面板指示点 | Boolean | true |
| vertical | 垂直显示 | Boolean | false |
| autoplay | 是否自动切换 | Boolean | false |
| easing | 动画效果 | String | linear |
| beforeChange | 切换面板的回调 | function(from, to) | 无
| afterChange | 切换面板的回调 | function(current) | 无
更多参数可参考：https://github.com/akiran/react-slick
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 130px;
background: #506b9e;
color: #fff;
overflow: hidden;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Cascader
---
Cascade selection box.
## When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- Chooses cascade items in one float layer for better user experience.
## API
```html
```
| Property | Description | Type | Default |
|------|------|------|--------|
| options | data options of cascade | object | - |
| defaultValue | initial selected value | array |[] |
| value | selected value | array | - |
| onChange | callback when finishing cascader select | `function(value, selectedOptions)` | - |
| displayRender | render function of displaying selected options | `function(label, selectedOptions)` | `label => label.join(' / ')` |
| style | additional style | string | - |
| className | additional css class | string | - |
| popupClassName | additional className of popup overlay | string | - |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |
| placeholder | input placeholder | string | 'Please select' |
| size | input size, one of `large` `default` `small` | string | `default` |
| disabled | whether disabled select | boolean | false |
| allowClear | whether allow clear | boolean | true |
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
| showSearch | Whether show search input in single mode. | Boolean or Object | false |
| notFoundContent | Specify content to show when no result matches. | String | 'Not Found' |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
Fields in `showSearch`:
| Property | Description | Type | Default |
|----------|-------------|------|---------|
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | `function(inputValue, path): boolean` | |
| render | Used to render filtered options. | `function(inputValue, path): React.ReactNode` | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
| matchInputWidth | Whether the width of result list equals to input's | boolean | |
.ant-cascader-picker {
width: 220px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/index.en-US.md
content----> ---
category: Components
type: Data Entry
title: Cascader
subtitle: 级联选择
---
级联选择框。
## 何时使用
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
## API
```html
```
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| options | 可选项数据源 | Object | - |
| defaultValue | 默认的选中项 | Array |[] |
| value | 指定选中项 | Array | - |
| onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - |
| displayRender | 选择后展示的渲染函数 | `function(label, selectedOptions)` | `label => label.join(' / ')` |
| style | 自定义样式 | String | - |
| className | 自定义类名 | String | - |
| popupClassName | 自定义浮层类名 | String | - |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` |
| placeholder | 输入框占位文本 | String | '请选择' |
| size | 输入框大小，可选 `large` `default` `small` | String | `default` |
| disabled | 禁用 | Boolean | false |
| allowClear | 是否支持清除 | Boolean | true |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | String | 'click' |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | Boolean | false |
| showSearch | 在选择框中显示搜索框 | Boolean | false |
| notFoundContent | 当下拉列表为空时显示的内容 | String | 'Not Found' |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
`showSearch` 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
.ant-cascader-picker {
width: 220px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Checkbox
---
Checkbox.
## When To Use
- Used for selecting multiple values from several options.
- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
## API
### Checkbox
| Property | Description | Type | Default |
|----------|------------------|----------|--------|
| checked | Specifies whether the checkbox is selected. | Boolean | false |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | Boolean | false |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
### Checkbox Group
| Property | Description | Type | Default |
|----------|------------------|----------|--------|
| defaultValue | Default selected value | Array | [] |
| value | Used for setting the currently selected value. | Array | [] |
| options | Specifies options | Array | [] |
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/index.en-US.md
content----> ---
category: Components
subtitle: 多选框
type: Data Entry
title: Checkbox
---
多选框。
## 何时使用
- 在一组可选项中进行多项选择时；
- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
## API
### Checkbox
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| checked | 指定当前是否选中 | Boolean | false |
| defaultChecked | 初始是否选中 | Boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | Boolean | false |
### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| defaultValue | 默认选中的选项 | Array | [] |
| value | 指定选中的选项| Array | [] |
| options | 指定可选项 | Array | [] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Collapse
cols: 1
---
A content area which can be collapsed and expanded.
## When To Use
- Can be used to group or hide complex regions to keep the page clean.
- `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.
## API
### Collapse
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| activeKey | key of the active panel | Array or String | No default value. In `accordion` mode, it's the key of the first panel. |
| defaultActiveKey | key of the initialized active panel | String | - |
| onChange | a callback function, which can be executed when you switch the panels | Function | - |
### Collapse.Panel
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| key | corresponds to the `activeKey` | String | - |
| header | title of the panel | React.Element or String | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/index.en-US.md
content----> ---
category: Components
type: Data Display
title: Collapse
subtitle: 折叠面板
cols: 1
---
可以折叠/展开的内容区域。
## 何时使用
- 对复杂区域进行分组和隐藏，保持页面的整洁。
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
## API
### Collapse
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------|
| activeKey | 当前激活 tab 面板的 key| Array or String | 默认无，accordion模式下默认第一个元素|
| defaultActiveKey | 初始化选中面板的 key | String | 无 |
| onChange | 切换面板的回调 | Function | 无 |
### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | String | 无 |
| header | 面板头内容 | React.Element or String | 无 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: DatePicker
---
To select or input a date.
## When To Use
By clicking the input box, you can select a date from a popup calendar.
## API
There are three kinds of picker:
* DatePicker
* MonthPicker
* RangePicker
**Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly.
```jsx
import moment from 'moment';
// It's recommended to set locale in entry file globaly.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
```
### Common API
The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| allowClear | Whether to show clear button | bool | true |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| style | to customize the style of the input box | Object | {} |
| popupStyle | to customize the style of the popup calendar | Object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | to specify the date that cannot be selected | function | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| open | open state of picker | bool | - |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| placeholder | placeholder of date input | string or array (RangePicker) | - |
### DatePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM-DD" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
| showToday | whether to show "Today" button | Boolean | true |
| disabledTime | to specify the time that cannot be selected | function(date) | - |
### MonthPicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| monthCellContentRender | Custom month cell render method | function | 无 |
| cellContentRender | Custom month cell content render method,the content will be appended to the cell. | function | 无 |
### RangePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| defaultValue | to set default date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| format | to set the date format | String | "YYYY-MM-DD HH:mm:ss" |
| onChange | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | - |
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
| ranges | preseted ranges for quick selection | Object { [range: string]: [moment, moment] } | - |
.code-box-demo .ant-calendar-picker {
margin: 0 8px 12px 0;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/index.en-US.md
content----> ---
category: Components
type: Data Entry
title: DatePicker
subtitle: 日期选择框
---
输入或选择日期的控件。
## 何时使用
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
## API
日期类组件包括以下三种形式。
* DatePicker
* MonthPicker
* RangePicker
**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
```jsx
import moment from 'moment';
// 推荐在入口文件全局设置 locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
```
### 共同的 API
以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| allowClear | 是否显示清除按钮 | bool | true |
| disabled | 禁用 | bool | false |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | 不可选择的日期 | function | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| open | 控制弹层是否展开 | bool | - |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
| placeholder | 输入框提示文字 | string or array (RangePicker) | - |
### DatePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
| showToday | 是否展示“今天”按钮 | Boolean | true |
| disabledTime | 不可选择的时间 | function(date) | 无 |
### MonthPicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无 |
| monthCellContentRender | 自定义的月份渲染方法 | function | 无 |
| cellContentRender | 自定义的月份渲染方法，内容会被附加在月份后面 | function | 无 |
### RangePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
| defaultValue | 默认日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
| ranges | 预设事件范围快捷选择 | Object { [range: string]: [moment, moment] } | 无 |
.code-box-demo .ant-calendar-picker {
margin: 0 8px 12px 0;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: Dropdown
---
A dropdown list.
## When To Use
If there are too many operations to display, you can wrap them in a `Dropdown`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
## API
### Dropdown
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| trigger | the trigger mode which can execute the drop-down action | ['click'] or ['hover'] | ['hover'] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| visible | determine whether the dropdown menu is visible | Boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function | - |
You can get the menu list by `antd.Menu`, and set a callback function `onSelect` for it if you need. The menu items and the dividers are also available, by using `antd.Menu.Item` and `antd.Menu.Divider` respectively.
> Warning: You must set a unique `key` for `Menu.Item`.
### Dropdown.Button
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| type | type of the button, the same as [Button](/components/button) | String | 'default' |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
| trigger | the trigger mode which can execute the drop-down action | ['click'] or ['hover'] | ['hover'] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| visible | determine whether the dropdown menu is visible | Boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/index.en-US.md
content----> ---
category: Components
subtitle: 下拉菜单
type: Navigation
title: Dropdown
---
向下弹出的列表。
## 何时使用
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
## API
属性如下
| 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| trigger | 触发下拉的行为 | ['click'] or ['hover'] | ['hover'] |
| overlay | 菜单 | [Menu](/components/menu) | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| visible | 菜单是否显示 | Boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |
菜单可由 `antd.Menu` 取得，可设置 `onSelect` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。
> 注意： Menu.Item 必须设置唯一的 key 属性。
### Dropdown.Button
| 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| type | 按钮类型，和 [Button](/components/button/) 一致 | String | 'default' |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |
| trigger | 触发下拉的行为 | ['click'] or ['hover'] | ['hover'] |
| overlay | 菜单 | [Menu](/components/menu/) | - |
| visible | 菜单是否显示 | Boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
cols: 1
title: Form
---
Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
## Form
You can align the controls of a `form` using one of the following attributes：
- `horizontal`：to horizontally align the `label`s and controls of the fields.
- `inline`：to render the labels and controls of the fields in one line (by setting the display property of form controls to `inline-block`).
## Form fields
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
A form field is defined using ``.
```jsx
{children}
```
> PS：By default, large size controls are used within a form.
## API
### Form
**more example [rc-form](http://react-component.github.io/form/)**。
| Property | Description | Type | Default Value |
|-----------|------------------------------------------|------------|---------|
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
| vertical | Use vertical layout. | boolean | false |
| horizontal | Use horizontal layout. | boolean | false |
| inline | Use inline alignment. | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
### Form.create(options)
How to use：
```jsx
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
```
The following `options` are available:
| Property | Description | Type |
|-----------|------------------------------------------|------------|
| onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
| mapPropsToFields | Convert props to corresponding field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } |
If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
| Property | Description | Type |
|-----------|------------------------------------------|------------|
| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) |
| getFieldValue | Get the value of a field. | Function(fieldName: string) |
| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]: value } |
| setFields | Set the value and error of a field. | Function(obj: object) |
| validateFields | Validate the specified fields and get theirs values and errors. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
| getFieldError | Get the error of a field. | Function(name) |
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) |
| getFieldDecorator | Two-way binding for form, please read below for details. | |
### this.props.form.getFieldDecorator(id, options)
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
1. You don't need to use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
2. You can not set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
3. You don't need to call `setState` manually, please use `this.props.form.setFieldsValue` to change value programmatically.
#### Special attention
If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534
#### getFieldDecorator's parameters
| Property | Description | Type | Default Value |
|-----------|-----------------------------------------|------|---------------|
| options.id | The unique identifier is required. | string | |
| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
| options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
| options.trigger | When to collect the value of children node | string | 'onChange' |
| options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | When to validate the value of children node. | string | 'onChange' |
| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator) for details. | array | n/a |
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
### Form.Item
Note:
* If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
* Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
| Property | Description | Type | Default Value |
|---------------|--------------------------------------|--------|---------------|
| label | Label text | string | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` same as with `` | object | |
| wrapperCol | The layout for input controls. Same as `labelCol` | object | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string | |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
.code-box-demo .ant-form-horizontal {
max-width: 540px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/index.en-US.md
content----> ---
category: Components
subtitle: 表单
type: Data Entry
cols: 1
title: Form
---
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
## 表单
我们为 `form` 提供了以下两种排列方式：
- 水平排列：可以实现 `label` 标签和表单控件的水平排列；
- 行内排列：使其表现为 `inline-block` 级别的控件。
## 表单域
表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
这里我们封装了表单域 `` 。
```jsx
{children}
```
> 注：标准表单中一律使用大号控件。
## API
### Form
**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
| vertical | 垂直排列布局 | boolean | false |
| horizontal | 水平排列布局 | boolean | false |
| inline | 行内排列布局 | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
### Form.create(options)
使用方式如下：
```jsx
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
```
`options` 的配置项如下。
| 参数 | 说明 | 类型 |
|-----------|------------------------------------------|------------|
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| mapPropsToFields | 把 props 转为对应的值，可用于把 Redux store 中的值读出 | Function(props): Object{ fieldName: Object{ value } } |
经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
| 参数 | 说明 | 类型 |
|-----------|------------------------------------------|------------|
| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]: value } |
| setFields | 设置一组输入控件的值与 Error | Function(obj: object) |
| validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
| getFieldError | 获取某个输入控件的 Error | Function(name) |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
### this.props.form.getFieldDecorator(id, options)
经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
1. 你不再需要用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。
2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。
3. 你不需要用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。
#### 特别注意
如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
#### getFieldDecorator 参数
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------|
| id | 必填输入控件唯一标志 | string | |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | |
| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：`(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
| options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |
### Form.Item
注意：
* 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
* `2.2.0` 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 `help` `required` `validateStatus`，嵌套情况需要自行设置。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----------|--------|
| label | label 标签的文本 | string | |
| labelCol | label 标签布局，通 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
.code-box-demo .ant-form-horizontal {
max-width: 540px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/index.zh-CN.md
content----> ---
category: Components
type: Layout
cols: 1
title: Grid
---
24 Grids System。
## Design concept
100%
25%
25%
25%
25%
33.33%
33.33%
33.33%
50%
50%
66.66%
33.33%
In most business situations,Ant Design need solve a lot of information storage problems within the design area,so based on 12 Grids System,we divided the design area into 24 aliquots.
We name the divided area as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom typography inside of the box based on the box unit.
## Outline
In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can steady arrangement.
Following is a brief look at how it works:
* To establish a set of `column` in the horizontal direction by` row` (abbreviated col)
* Direct your content elements should be placed in the `col`, and only` col` as the `row`
* The column grid system is a value of 1-24 to represent its range spans.For example, three columns of equal width can be created by `.col-8`.
* If a `row` sum of` col` more than 24, then the extra `col` as a whole will start a new line arrangement.
## Flex layout
Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center, right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of elements by using 'order'.
Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.
## API
Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community:
- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
- [react-blocks](http://whoisandie.github.io/react-blocks/)
### Row
| Member | Explanation | Type | Default |
|------------|-----------------|--------------------|-------------|
| gutter | grid spacing | number | 0 |
| type | layout mode, the optional `flex`, effective modern browser | string | |
| align | the vertical alignment of the layout of flex: `top` ` middle` `bottom` | string | `top` |
| justify | horizontal arrangement of the layout of flex: `start` ` end` `center` ` space-around` `space-between` | string | `start` |
### Col
| Member | Explanation | Type | Default |
|------------|-----------------|--------------------|-------------|
| span | raster occupying the number of cells,0 corresponds to `display: none` | number | none |
| order | raster order, under `flex` effective layout mode | number | 0 |
| offset | the number of cells to the left of the grid spacing, no cell in grid spacing | number | 0 |
| push | the number of cells that raster move to the right | number | 0 |
| pull | the number of cells that raster move to the left | number | 0 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/index.en-US.md
content----> ---
category: Components
subtitle: 栅格
type: Layout
cols: 1
title: Grid
---
24 栅格系统。
## 设计理念
100%
25%
25%
25%
25%
33.33%
33.33%
33.33%
50%
50%
66.66%
33.33%
在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
## 概述
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
* 通过`row`在水平方向建立一组`column`（简写col）
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
## Flex 布局
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。
## API
Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：
- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
- [react-blocks](http://whoisandie.github.io/react-blocks/)
### Row
| 成员 | 说明 | 类型 | 默认值 |
|-----------|-----------------|--------------------|-------------|
| gutter | 栅格间隔 | number | 0 |
| type | 布局模式，可选 `flex`，现代浏览器下有效 | string | |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
### Col
| 成员 | 说明 | 类型 | 默认值 |
|----------|-----------------|--------------------|-------------|
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number or object | - |
| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number or object | - |
| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number or object | - |
| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number or object | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/index.zh-CN.md
content----> ---
category: Components
type: General
title: Icon
toc: false
---
Meaningful vector graphics.
## Icons naming convention
We provide semantic name for every icon, and naming rules are as follows:
- Scanning line icon has the similar name with its solid one，but it's distinguished by `-o`, for example, `question-circle`(a full circle) and `question-circle-o`(an empty circle);
- Naming sequence：`[icon's name]-[shape, optional]-[Scanning line or not]-[direction, optional]`.
## How To Use
Use tag to create an icon and set its type in the type prop, for example:
```html
```
Finally, it will be rendered as follow:
```html
```
## Local deployment of icons font
By default, icon components uses [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
## List of icons
> Click the icon and copy the code。
### Directional Icons
```__react
import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(, mountNode);
```
### Suggested Icons
```__react
ReactDOM.render(, mountNode);
```
### Other Icons
```__react
ReactDOM.render(, mountNode);
```
## Props
| Property | Description | Type | Default |
|----------|------------------|------- |---------|
| type | Type of ant design icons | string | - |
| spin | Rotate icon with animation | boolean | false |
.markdown .icons {
width: 100%;
}
ul.anticons-list {
margin: 40px 0;
list-style: none;
overflow: hidden;
}
ul.anticons-list li {
float: left;
width: 16.66%;
text-align: center;
list-style: none;
cursor: pointer;
height: 100px;
color: #555;
transition: all 0.2s ease;
position: relative;
margin: 3px 0;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
padding: 10px 0 0 0;
}
ul.anticons-list li:hover {
background-color: #eaf8fe;
}
ul.anticons-list li.copied:hover {
color: rgba(255,255,255,0.2);
}
ul.anticons-list li:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "Copied!";
text-align: center;
line-height: 110px;
color: #108ee9;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
opacity: 0;
}
ul.anticons-list li.copied:after {
opacity: 1;
top: -10px;
}
.anticon {
font-size: 24px;
margin: 12px 0 16px;
transition: all .3s;
}
ul.anticons-list li:hover .anticon {
transform: scale(1.4);
}
.anticon-class {
display: block;
text-align: center;
transform: scale(0.83);
font-family: "Lucida Console", Consolas;
white-space: nowrap;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/icon/index.en-US.md
content----> ---
category: Components
subtitle: 图标
type: General
title: Icon
toc: false
---
语义化的矢量图形。
## 图标的命名规范
我们为每个图标赋予了语义化的命名，命名规则如下:
- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
- 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。
## 如何使用
使用 `` 标签声明组件，指定图标对应的 type 属性，示例代码如下:
```html
```
最终会渲染为：
```html
```
## 本地部署
图标组件使用 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
## 图标列表
> 点击图标复制代码。
### 方向性图标
```__react
import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(, mountNode);
```
### 提示建议性图标
```__react
ReactDOM.render(, mountNode);
```
### 网站通用图标
```__react
ReactDOM.render(, mountNode);
```
## Props
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| type | 图标类型 | string | - |
| spin | 是否有旋转动画 | boolean | false |
.markdown .icons {
width: 100%;
}
ul.anticons-list {
margin: 40px 0;
list-style: none;
overflow: hidden;
}
ul.anticons-list li {
float: left;
width: 16.66%;
text-align: center;
list-style: none;
cursor: pointer;
height: 100px;
color: #555;
transition: all 0.2s ease;
position: relative;
margin: 3px 0;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
padding: 10px 0 0 0;
}
ul.anticons-list li:hover {
background-color: #eaf8fe;
}
ul.anticons-list li.copied:hover {
color: rgba(255,255,255,0.2);
}
ul.anticons-list li:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "Copied!";
text-align: center;
line-height: 110px;
color: #108ee9;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
opacity: 0;
}
ul.anticons-list li.copied:after {
opacity: 1;
top: -10px;
}
.anticon {
font-size: 24px;
margin: 12px 0 16px;
transition: all .3s;
}
ul.anticons-list li:hover .anticon {
transform: scale(1.4);
}
.anticon-class {
display: block;
text-align: center;
transform: scale(0.83);
font-family: "Lucida Console", Consolas;
white-space: nowrap;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/icon/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Input
---
A basic widget for getting the user input is a text field.
Keyboard and mouse can be used for providing or changing data.
## When To Use
- A user input in a form field is needed.
- A search input is required.
## API
### Input
| Property | Description | Type | Default |
|----------------|-----------------------|----------|---------------|
| type | The type of input, `text` or `textarea` | string | `text` |
| id | The ID for input | string | |
| value | The input content value | string | |
| defaultValue | The initial input content | string | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
| disabled | Tell if the input is disabled. | boolean | false |
| addonBefore | The label text displayed before (on the left side of) the input field. | React.Node | |
| addonAfter | The label text displayed after (on the right side of) the input field. | React.Node | |
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | |
| autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean or object | false |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
then `value`, `defaultValue`, and `id` props are automatically set.
#### Input.Search
`Added in 2.5.0`
| Property | Description | Type | Default |
|-----------|--------------------------------------|------------|---------|
| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value) | |
Support all props of `Input`.
#### Input.Group
| Property | Description | Type | Default |
|-----------|----------------------------------|--------|-----------|
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
```html
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/index.en-US.md
content----> ---
category: Components
subtitle: 输入框
type: Data Entry
title: Input
---
通过鼠标或键盘输入内容，是最基础的表单域的包装。
## 何时使用
- 需要用户输入表单域内容时。
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
## API
### Input
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------|--------|
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`。 | string | `text` |
| id | 输入框的 id | string | |
| value | 输入框内容 | string | |
| defaultValue | 输入框默认内容 | string | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| disabled | 是否禁用状态，默认为 false | boolean | false |
| addonBefore | 带标签的 input，设置前置标签 | React.Node | |
| addonAfter | 带标签的 input，设置后置标签 | React.Node | |
| onPressEnter | 按下回车的回调 | function(e) | |
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean or object | false |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
#### Input.Search
`Added in 2.5.0`
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----------|-------|
| onSearch | 点击搜索或按下回车键时的回调 | function(value) | |
其余属性和 Input 一致。
#### Input.Group
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-------------|-------|
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
```html
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/index.zh-CN.md
content----> ---
category: Components
subtitle: 数字输入框
type: Data Entry
title: InputNumber
---
通过鼠标或键盘，输入范围内的数值。
## 何时使用
当需要获取标准数值时。
## API
属性如下
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| min | 最小值 | Number | -Infinity |
| max | 最大值 | Number | Infinity |
| value | 当前值 | Number | |
| step | 每次改变步数，可以为小数 | Number or String | 1 |
| defaultValue | 初始值 | Number | |
| onChange | 变化回调 | Function | |
| disabled | 禁用 | Boolean | false |
| size | 输入框大小 | String | 无 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: InputNumber
---
Enter a number within certain range with the mouse or keyboard.
## When To Use
When a numeric value needs to be provided.
## API
| property | description | type | default |
|-------------|----------------|--------------------|--------------|
| min | min value | Number | -Infinity |
| max | max vale | Number | Infinity |
| value | current value | Number | |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | Number or String | 1 |
| defaultValue | initial value | Number | |
| onChange | The callback triggered when the value is changed. | Function | |
| disabled | disable the input | Boolean | false |
| size | width of input box | String | none |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/index.en-US.md
content----> ---
category: Components
subtitle: 国际化
cols: 1
type: Other
title: LocaleProvider
---
为组件内建文案提供统一的国际化支持。
## 使用
LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
```jsx
import enUS from 'antd/lib/locale-provider/en_US';
...
return ;
```
### Add a language
We supply an English locale package. Other language users can create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/26b1f37392a278285aec6c573b99c6feea09e218/components/locale-provider/en_US.js) and send us a pull request.
### 其他国际化需求
本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [react-intl](https://github.com/yahoo/react-intl)，可参考示例：[Intl demo 1](http://github.com/ant-design/intl-example) 和 [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US)。
## API
| 参数 | 说明 | 类型 | 默认值 |
|--------|----------------|------------------|--------------|
| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | Object | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/locale-provider/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Mention
---
Mention component。
## When To Use
When need to mention someone or something.
## API
```jsx
```
### Mention API
| API | Description | Type |
|----------|---------------|----------|--------------|
| toString | convert EditorState to string | Function(editorState: EditorState): String |
| toEditorState | convert string to EditorState | Function(string: String): EditorState |
| getMentions | get mentioned people in current editorState | Function(editorState: EditorState): Array |
### Mention props
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| suggestions | suggestion content | Array or Array | [] |
| suggestionStyle | style of suggestion container | Object | {} |
| onSearchChange | Callback function called when search content changes | function(value:String) | [] |
| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null |
| onSelect | Callback function called when select from suggestions | function(suggestion: String, data?: any) | null |
| notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
| loading | loading mode | boolean | false |
| multiLines | multilines mode | boolean | false |
| prefix | character which will trigger Mention to show mention list | string | '@' |
| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
| value | core state of mention | EditorState | null |
| placeHolder | placeholder of input | string | null |
| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | Function() | () => document.body |
| onFocus | Callback function called when mention component get focus | function() | null |
| onBlur | Callback function called when mention component blur | function() | nul |
### Nav props
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
| children | suggestion content | Object | {} |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/index.en-US.md
content----> ---
category: Components
type: Other
cols: 1
title: LocaleProvider
---
`LocaleProvider` provides a uniform localization support for built-in text of components.
## Usage
`LocaleProvider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
```jsx
import enUS from 'antd/lib/locale-provider/en_US';
...
return ;
```
### Add a language
We supply an English locale package. Other language users can create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/26b1f37392a278285aec6c573b99c6feea09e218/components/locale-provider/en_US.js) and send us a pull request.
### Other localization needs
This component aims for localization of the built-in text, if you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
## API
Property | Description | Type | Default
-----|-----|-----|------
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | Object | -
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/locale-provider/index.en-US.md
content----> ---
category: Components
subtitle: 提及
type: Data Entry
title: Mention
---
提及组件。
## 何时使用
用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
## API
```jsx
```
### Mention API
| API | 说明 | 类型 |
|----------|---------------|----------|
| toString | 把 EditorState 转成字符串 | Function(editorState: EditorState): String |
| toEditorState | 把字符串转成 EditorState | Function(string: String): EditorState |
| getMentions | 获取当前 editorState 中提到的人的列表 | Function(editorState: EditorState): Array |
### Mention props
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| suggestions | 建议内容 | Array or Array | [] |
| suggestionStyle | 弹出下拉框样式 | Object | {} |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] |
| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null |
| onSelect | 下拉框选择建议时回调 | function(suggestion: String, data?: any) | null |
| notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false |
| prefix | 触发弹出下拉框的字符 | string | '@' |
| placeHolder | 输入框默认文字 | string | null |
| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
| value | 值 | EditorState | null |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
| onFocus | 获得焦点时回调 | function() | null |
| onBlur | 失去焦点时回调 | function() | nul |
### Nav props
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |
| children | 建议内容 | Object | {} |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/index.zh-CN.md
content----> ---
category: Components
cols: 1
type: Navigation
title: Menu
---
Menu list of Navigation.
## When To Use
Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.
More layout and samples: [layout](/docs/spec/layout).
```html
Menu
SubMenuItem
```
## API
### Menu props
| Param | Description | Type | Default value |
|----------|---------------|----------|--------------|
| theme | color of the theme | String: `light` `dark` | `light` |
| mode | type of the menu; vertical, horizontal, and inline modes are supported | String: vertical horizontal inline | vertical |
| selectedKeys | array with the keys of currently selected menu items | Array | |
| defaultSelectedKeys | array with the keys of default selected menu items | Array | |
| openKeys | array with the keys of currently opened sub menus | Array | |
| defaultOpenKeys | array with the keys of default opened sub menus | | |
| onOpenChange | called when open/close sub menu | Function(openKeys: string[]) | noop |
| onSelect | callback of the selected item | Function({ item, key, selectedKeys }) | none |
| onDeselect | callback of the deselected item, only supported for multiple mode | Function({ item, key, selectedKeys }) | - |
| onClick | callback of the clicked menu item, params: {item, key, keyPath} | function | - |
| style | style of the root node | Object | |
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item props
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| disabled | disabled or not | Boolean | false |
| key | unique id of the menu item | String | |
### Menu.SubMenu props
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| disabled | disabled or not | Boolean | false |
| key | unique id of the menu item | String | |
| title | title of the sub menu | String or React.Element | |
| children | sub menus or sub menu items | (MenuItem or SubMenu)[] | |
| onTitleClick | callback of the clicked sub menu title | Function({ eventKey, domEvent }) | |
### Menu.ItemGroup props
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| title | title of the group | String or React.Element | |
| children | sub menu items | MenuItem[] | |
### Menu.Divider
divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/index.en-US.md
content----> ---
category: Components
type: Feedback
noinstant: true
title: Message
---
Display global messages as feedbacks to user operations.
## When To Use
- To provide feedbacks such as success, warning, error etc.
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
## API
- `message.success(content, duration)`
- `message.error(content, duration)`
- `message.info(content, duration)`
- `message.warning(content, duration)`
- `message.warn(content, duration)`
- `message.loading(content, duration)`
This components provides 4 static methods, with arguments as following:
| Argument | Description | Type | Default |
|------------|------------------------------------|--------------------------|--------------|
| content | content of the message | React.Element or String | - |
| duration | time before auto-dismiss,in seconds | number | 1.5 |
Methods for global configuration and destruction are also provided:
- `message.config(options)`
- `message.destroy()`
```js
message.config({
top: 100,
duration: 2,
});
```
| Argument | Description | Type | Default |
|------------|------------------------------------|--------------------------|-------------|
| top | distance to top | Number | 24px |
| duration | time before auto-dismiss,in seconds | Number | 1.5 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/index.en-US.md
content----> ---
category: Components
subtitle: 全局提示
type: Feedback
noinstant: true
title: Message
---
全局展示操作反馈信息。
## 何时使用
- 可提供成功、警告和错误等反馈信息。
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
## API
- `message.success(content, duration)`
- `message.error(content, duration)`
- `message.info(content, duration)`
- `message.warning(content, duration)`
- `message.warn(content, duration)`
- `message.loading(content, duration)`
组件提供了四个静态方法，参数如下：
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|--------------------------|--------------|
| content | 提示内容 | React.Element or String | - |
| duration | 自动关闭的延时，单位秒 | number | 1.5 |
还提供了全局配置和全局销毁方法：
- `message.config(options)`
- `message.destroy()`
```js
message.config({
top: 100,
duration: 2,
});
```
| 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------|--------------------------|-------------|
| top | 消息距离顶部的位置 | Number | 24px |
| duration | 默认自动关闭延时，单位秒 | Number | 1.5 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/index.zh-CN.md
content----> ---
category: Components
cols: 1
type: Navigation
title: Menu
subtitle: 导航菜单
---
为页面和功能提供导航的菜单列表。
## 何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
更多布局和导航的范例可以参考：[常用布局](/docs/spec/layout)。
```html
菜单项
子菜单项
```
## API
### Menu props
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| theme | 主题颜色 | String: `light` `dark` | `light` |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | String: `vertical` `horizontal` `inline` | `vertical` |
| selectedKeys | 当前选中的菜单项 key 数组 | Array | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | Array | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | Array | |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
| onOpenChange | SubMenu 展开/关闭的回调 | Function(openKeys: string[]) | noop |
| onSelect | 被选中时调 | Function({ item, key, selectedKeys }) | 无 |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | Function({ item, key, selectedKeys }) | - |
| onClick | 点击 menuitem 调用此函数，参数为 {item, key, keyPath} | function | - |
| style | 根节点样式 | Object | |
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| key | item 的唯一标志 | String | |
### Menu.SubMenu props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| key | 唯一标志 | String | |
| title | 子菜单项值 | String or React.Element | |
| children | 子菜单的菜单项 | (MenuItem or SubMenu)[] | |
| onTitleClick | 点击子菜单标题 | Function({ eventKey, domEvent }) | |
### Menu.ItemGroup props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 分组标题 | String or React.Element | |
| children | 分组的菜单项 | MenuItem[] | |
### Menu.Divider
菜单项分割线，只用在弹出菜单内。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/index.zh-CN.md
content----> ---
type: Feedback
category: Components
title: Modal
---
Modal dialogs.
## When To Use
When requiring users to interact with application, but without jumping to a new page to interrupt
the user's workflow, you can use `Modal` to create a new floating layer over the current page for user
getting feedback or information purposes.
Additionally, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`,
and so on.
## API
| Property | Description | Type | Default |
|------------|----------------|------------------|--------------|
| visible | Determine whether a modal dialog is visible or not | Boolean | no |
| confirmLoading | Determine whether to apply loading visual effect for OK button or not | Boolean | no |
| title | The modal dialog's title | React.Element | no |
| closable | Determine whether a close (x) button is visible on top right of the modal dialog or not | Boolean | true |
| onOk | Specify a function that will be called when a user clicked OK button | function | no |
| onCancel | Specify a function that will be called when a user clicked mask, close button on top right or cancel button | function(e) | no |
| width | Width of a modal dialog | String or Number | 520 |
| footer | Footer content | React.Element | OK and cancel button |
| okText | Text of the OK button | String | OK |
| cancelText | Text of the Cancel button | String | Cancel |
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | true |
| style | Style of floating layer, typically used at least for adjusting the position. | Object | - |
| wrapClassName | The class name of the container of the modal dialog | String | - |
### Modal.xxx()
There are five ways to display the information based on the content's nature:
- `Modal.info`
- `Modal.success`
- `Modal.error`
- `Modal.warning`
- `Modal.confirm`
The items listed above are all functions, expecting a settings object as parameter.
The properties of the object are follows:
| Property | Description | Type | Default |
|------------|----------------|------------------|---------------|
| title | Title | React.Element or String | no |
| content | Content | React.Element or String | no |
| onOk | Specify a function that will be called when a user clicked OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
| onCancel | Specify a function that will be called when a user clicked Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
| width | Width of dialog | String or Number | 416 |
| iconType | Type of Icon component | String | question-circle |
| okText | Text of OK button | String | OK |
| cancelText | Text of cancel button | String | Cancel |
.code-box-demo .ant-btn {
margin-right: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/index.en-US.md
content----> ---
type: Feedback
category: Components
subtitle: 对话框
title: Modal
---
模态对话框。
## 何时使用
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| visible | 对话框是否可见 | Boolean | 无 |
| confirmLoading | 确定按钮 loading | Boolean | 无 |
| title | 标题 | React.Element | 无 |
| closable | 是否显示右上角的关闭按钮 | Boolean | true |
| onOk | 点击确定回调 | function | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
| width | 宽度 | String or Number | 520 |
| footer | 底部内容 | React.Element | 确定取消按钮 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | true |
| style | 可用于设置浮层的样式，调整浮层位置等 | Object | - |
| wrapClassName | 对话框外层容器的类名 | String | - |
### Modal.xxx()
包括：
- `Modal.info`
- `Modal.success`
- `Modal.error`
- `Modal.warning`
- `Modal.confirm`
以上均为一个函数，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element or String | 无 |
| content | 内容 | React.Element or String | 无 |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| width | 宽度 | String or Number | 416 |
| iconType | 图标 Icon 类型 | String | question-circle |
| okText | 确认按钮文字 | String | 确定 |
| cancelText | 取消按钮文字 | String | 取消 |
.code-box-demo .ant-btn {
margin-right: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/index.zh-CN.md
content----> ---
category: Components
type: Feedback
noinstant: true
title: Notification
---
To display a notification message globally.
## When To Use
To display a notification message at the top right of the view port. Typically it can be
used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details
about upcoming steps the user may have to follow.
- A notification that is pushed by the application.
## API
- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.warn(config)`
- `notification.close(key: String)`
- `notification.destroy()`
The properties of config are as follows:
| Property | Description | Type | Default |
|----------- |--------------------------------------------- | ----------- |--------|
| message | The title of notification box (required) | React.Node | - |
| description | The content of notification box (required) | React.Node | - |
| btn | Customized close button | React.Node | - |
| icon | Customized icon | React.Node | _ |
| key | The unique identifier of current notification | String | - |
| onClose | Specify a function that will be called after clicking the default close button | Function | - |
| duration | A notification box is closed after 4.5s by default. When specifying `duration` to null or 0, it will never be closed automatically | Number | 4.5 |
`-tification` also provide a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes
will take into account these globally defined options before displaying.
- `notification.config(options)`
```js
notification.config({
top: 100,
duration: 3,
});
```
| Property | Description | Type | Default |
|------------|--------------------|----------------------------|--------------|
| top | Offset to top of message | Number | 24px |
| duration | A duration to close notification automatically by default (unit: second) | Number | 4.5 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/index.en-US.md
content----> ---
category: Components
type: Feedback
noinstant: true
title: Notification
subtitle: 通知提醒框
---
全局展示通知提醒信息。
## 何时使用
在系统右上角显示通知提醒信息。经常用于以下情况：
- 较为复杂的通知内容。
- 带有交互的通知，给出用户下一步的行动点。
- 系统主动推送。
## API
- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.warn(config)`
- `notification.close(key: String)`
- `notification.destroy()`
config 参数如下：
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------- | ----------- |--------|
| message | 通知提醒标题，必选 | React.Node | - |
| description | 通知提醒内容，必选 | React.Node | - |
| btn | 自定义关闭按钮 | React.Node | - |
| icon | 自定义图标 | React.Node | - |
| key | 当前通知唯一标志 | String | - |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | Number | 4.5 |
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
- `notification.config(options)`
```js
notification.config({
top: 100,
duration: 3,
});
```
| 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------|----------------------------|--------------|
| top | 消息距离顶部的位置 | Number | 24px |
| duration | 默认自动关闭延时，单位秒 | Number | 4.5 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/index.zh-CN.md
content----> ---
category: Components
subtitle: 分页
type: Navigation
title: Pagination
---
采用分页的形式分隔长列表，每次只加载一个页面。
## 何时使用
- 当加载/渲染所有数据将花费很多时间时；
- 可切换页码浏览数据。
## API
```html
```
| 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|---------------|--------------------------|
| current | 当前页数 | Number | - |
| defaultCurrent | 默认的当前页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| defaultPageSize | 默认的每页条数 | Number | 10 |
| pageSize | 每页条数 | Number | - |
| onChange | 页码改变的回调，参数是改变后的页码 | Function(page) | noop |
| showSizeChanger | 是否可以改变 pageSize | Boolean | false |
| pageSizeOptions | 指定每页可以显示多少条 | Array | ['10', '20', '30', '40'] |
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
| showQuickJumper | 是否可以快速跳转至某页 | Boolean | false |
| size | 当为「small」时，是小尺寸分页 | String | "" |
| simple | 当添加该属性时，显示为简单分页 | Object | - |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: Pagination
---
A long list can be divided into several pages by `Pagination`, and only one page will be loaded at a time.
## When To Use
- When it will take a long time to load/render all items.
- If you want to browse the data by switching in the pages.
## API
```html
```
Property | Description | Type | Default
-----|-----|-----|------
current | current page number | Number | -
defaultCurrent | default current page number | Number | 1
total | total number of data | Number | 0
defaultPageSize | default number of data per page | Number | 10
pageSize | number of data per page | Number | -
onChange | a callback function, can be executed when the page number is changing, and it takes the resulting page number as an argument | Function(page) | noop
showSizeChanger | determine whether `pageSize` can be changed | Boolean | false
pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '30', '40']
onShowSizeChange | a callback function, can be executed when `pageSize` is changing | Function(current, size) | noop
showQuickJumper | determine whether you can jump to a page directly | Boolean | false
size | specify the size of `Pagination`, can be set to `small` | String | ""
simple | whether to use simple mode | Object | -
showTotal | to display the total number and range | Function(total, range) | -
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/index.en-US.md
content----> ---
category: Components
type: Feedback
title: Popconfirm
---
A simple and compact confirmation dialog of an action.
## When To Use
A simple and compact dialog used for asking an user confirmation.
The difference with `confirm` is more lightweight than the static popped full-screen confirm modal.
## API
| Param | Description | Type | Default value |
|-----------|------------------------------------------|---------------|--------|
| placement | position of the confirmation box, optional `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | title of the confirmation box | React.Element | none |
| onConfirm | callback of confirmation | function | none |
| onCancel | callback of cancel | function | none |
| onVisibleChange | callback of the visible attribute changed | function(visible) | none |
| okText | text of the confirmation button | String | Confirm |
| cancelText| text of the cancel button | String | Cancel |
| openClassName | class name of the trigger, using for highlighting the trigger while triggered | string | ant-popover-open |
| arrowPointAtCenter | whether arrow pointed at the center of target, supported after `[email protected]+` | Boolean | `false` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/index.en-US.md
content----> ---
category: Components
subtitle: 气泡确认框
type: Feedback
title: Popconfirm
---
点击元素，弹出气泡式的确认框。
## 何时使用
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| placement | 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | 确认框的描述 | React.Element | 无 |
| onConfirm | 点击确认的回调 | function | 无 |
| onCancel | 点击取消的回调 | function | 无 |
| onVisibleChange | 显示隐藏的回调 | function(visible) | 无 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |
| openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`[email protected]+` 支持 | Boolean | `false` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Popover
---
The floating card popped by clicking or hovering.
## When To Use
A simple popup menu to provide extra information or operations.
Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.
## API
| Param | Description | Type | Default value |
|-----------|------------------------------------------|---------------|--------|
| trigger | triggering mode: can be hover, focus, or click. | string | hover |
| placement | position of the card，optional `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | title of the card | React.Element | none |
| content | content of the card | React.Element | none |
| overlayClassName | class name of the card | string | none |
| overlayStyle | style of the card | object | none |
| visible | make the float card visible or not | boolean | false |
| onVisibleChange | callback of the visible attribute changed | function | none |
| getTooltipContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. [Sample](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| openClassName | class name of the trigger, using for highlighting the trigger while triggered | string | ant-popover-open |
| arrowPointAtCenter | whether arrow pointed at the center of target, supported after `[email protected]+` | Boolean | `false` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/index.en-US.md
content----> ---
category: Components
subtitle: 气泡卡片
type: Data Display
title: Popover
---
点击/鼠标移入元素，弹出气泡式的卡片浮层。
## 何时使用
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
| placement | 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | 卡片标题 | React.Element | 无 |
| content | 卡片内容 | React.Element | 无 |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| visible | 用于手动控制浮层显隐 | boolean | false |
| onVisibleChange | 显示隐藏改变的回调 | function | 无 |
| getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`[email protected]+` 支持 | Boolean | `false` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/index.zh-CN.md
content----> ---
category: Components
type: Feedback
title: Progress
---
To display the current progress of an operation flow.
## When To Use
If it will take a long time to complete the operation, you can use `Progress` to show the current progress and status.
- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
- When you need to display the completion percentage of an operation.
## API
Property | Description | Type | Default
-----|-----|-----|------
type | to set the type, options: `line` `circle` | String | line
percent | to set the completion percentage | Number | 0
format | template function of the content | function(percent) | `percent => percent + '%'`
status | to set the status of the progress, options: `success` `exception` `active` | String | -
showInfo | determine whether to display the progress value and the status icon | Boolean | true
strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | Number | 10
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | Number | 6
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | Number | 132
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/index.en-US.md
content----> ---
category: Components
subtitle: 进度条
type: Feedback
title: Progress
---
展示操作的当前进度。
## 何时使用
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
- 当需要显示一个操作完成的百分比时。
## API
| 属性 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|---------------|
| type | 类型，可选 `line` `circle` | String | line |
| percent | 百分比 | Number | 0 |
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
| status | 状态，可选：`success` `exception` `active` | String | - |
| showInfo | 是否显示进度数值或状态图标 | Boolean | true |
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | Number | 10 |
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | Number | 6 |
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | Number | 132 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Radio
---
Radio.
## When To Use
- Used to select a single state in multiple options.
- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
## API
### Radio
| Property | Description | Type | optional | Default |
|----------------|------------------------------------------|------------|---------|--------|
| checked | Specifies whether the radio is selected. | Boolean | false |
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | Boolean | false |
| value | According to value for comparison, to determine whether the selected | any | | none |
### RadioGroup
radio group，wrap a group of `Radio`。
| Property | Description | Type | optional | Default |
|----------------|----------------------------------|-------------------|--------|--------|
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |
| value | Used for setting the currently selected value. | any | none | none |
| defaultValue | Default selected value | any | none | none |
| size | Size, only on radio style | String | `large` `default` `small` | `default` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/index.en-US.md
content----> ---
category: Components
subtitle: 单选框
type: Data Entry
title: Radio
---
单选框。
## 何时使用
- 用于在多个备选项中选中单个状态。
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
## API
### Radio
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|------------------------------------------|------------|---------|--------|
| checked | 指定当前是否选中 | Boolean | | false |
| defaultChecked | 初始是否选中 | Boolean | | false |
| value | 根据 value 进行比较，判断是否选中 | any | | 无 |
### RadioGroup
单选框组合，用于包裹一组 `Radio`。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|----------------------------------|-------------------|--------|--------|
| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 |
| value | 用于设置当前选中的值 | any | 无 | 无 |
| defaultValue | 默认选中的值 | any | 无 | 无 |
| size | 大小，只对按钮样式生效 | String | `large` `default` `small` | `default` |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Rate
---
Rate component.
## When To Use
- Show evaluation.
- A quick rating operation on something.
## API
| Property | Description | type | Default |
|------------|----------------|-------------------|-------------|
| count | star count | Number | 5 |
| value | current value | Number | - |
| defaultValue | default value | Number | 0 |
| onChange | callback | Function(value: Number) | - |
| allowHalf | whether to allow semi selection | Boolean | false |
| disabled | read only, unable to interact | Boolean | false |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/index.en-US.md
content----> ---
category: Components
subtitle: 评分
type: Data Entry
title: Rate
---
评分组件。
## 何时使用
- 对评价进行展示。
- 对事物进行快速的评级操作。
## API
| 属性 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------------|-------------|
| count | star 总数 | Number | 5 |
| value | 当前数，受控值 | Number | - |
| defaultValue | 默认值 | Number | 0 |
| onChange | 回调 | Function(value: Number) | - |
| allowHalf | 是否允许半选 | Boolean | false |
| disabled | 只读，无法进行交互 | Boolean | false |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Select
---
A Selector similar to Select2.
## When To Use
- A dropdown menu for choosing, an elegant alternative to the native select component.
- [Radio](/components/radio/) is a better solution when options amount is too little (less than 5).
## API
```html
lucy
```
### Select props
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| value | Current selected option. | string/Array | - |
| defaultValue | Initial selected option. | string/Array | - |
| multiple | Allow multiple select. | boolean | false |
| allowClear | Show clear button, working in single mode only. | boolean | false |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean |false |
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
| onDeselect | Called when a option is deselected. param is option's value. only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
| onSearch | Callback function that is fired when input changed. | function(value: String) | |
| onBlur | Called when blur | function | - |
| onFocus | Called when focus | function | - |
| placeholder | Placeholder of select | string | - |
| notFoundContent | Specify content to show when no result matches..| string | 'Not Found' |
| dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
| combobox | Enable combobox mode(can not set multiple at the same time). | boolean | false |
| size | Size of Select input. `large` `small` | String | default |
| showSearch | Whether show search input in single mode.| boolean | false |
| disabled | Whether disabled select | boolean | false |
| dropdownStyle | style of dropdown menu | object | - |
| dropdownClassName | className of dropdown menu | string | - |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | function(triggerNode) | () => document.body |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: String, label: React.Node}` | boolean | false |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[]? | |
### Option props
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| disabled | Disable this option | Boolean | false |
| key | if react request you to set this property, you can set it to value of option, and then ignore value property. | String | |
| value | default to filter with this property | String | - |
### OptGroup props
| Property | Description | Type | Default |
|----------|----------------|----------|-----------------|
| label | Group label | String/React.Element | - |
| key | | String | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/index.en-US.md
content----> ---
category: Components
subtitle: 选择器
type: Data Entry
title: Select
---
类似 Select2 的选择器。
## 何时使用
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。
## API
```html
lucy
```
### Select props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| value | 指定当前选中的条目 | string/Array | - |
| defaultValue | 指定默认选中的条目 | string/Array | - |
| multiple | 支持多选 | boolean | false |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - |
| onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 | function(value) | - |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | - |
| onSearch | 文本框值变化时回调 | function(value: String) | |
| onBlur | 失去焦点的时回调 | function | - |
| onFocus | 获得焦点时回调 | function | - |
| placeholder | 选择框默认文字 | string | - |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
| combobox | 输入框自动提示模式 | boolean | false |
| size | 选择框大小，可选 `large` `small` | String | default |
| showSearch | 在选择框中显示搜索框 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: String, label: React.Node}` 的格式 | boolean | false |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[]? | |
### Option props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| key | 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | String | |
| value | 默认根据此属性值进行筛选 | String | - |
### OptGroup props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|-----------------|
| label | 组名 | String/React.Element | 无 |
| key | | String | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Slider
---
A Slider component for displaying current value and intervals in range.
## When To Use
To input a value in a range.
## API
| Property | Description | Type | Default |
|------------|----------------|-------------|--------------|
| range | dual thumb mode | Boolean | false
| min | The minimum value the slider can slide to. | Number | 0
| max | The maximum value the slider can slide to | Number | 100
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | Number or null | 1
| marks | Tick mark of Slider, type of key must be `Number`, and must in closed interval [min, max] ，each mark can declare its own style. | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
| dots | Whether the thumb can drag over tick only. | Boolean | false
| value | The value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] |
| defaultValue | The default value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | Boolean | true
| disabled | If true, the slider will not be interactable. | Boolean | false
| onChange | Callback function that is fired when the user changes the slider's value. | Function | NOOP
| onAfterChange | Fire when `onmouseup` is fired. | Function | NOOP
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function or null | IDENTITY
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/index.en-US.md
content----> ---
category: Components
subtitle: 滑动输入条
type: Data Entry
title: Slider
---
滑动型输入器，展示当前值和可选范围。
## 何时使用
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------|--------------|
| range | 双滑块模式 | Boolean | false
| min | 最小值 | Number | 0
| max | 最大值 | Number | 100
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | Number or null | 1
| marks | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
| dots | 是否只能拖拽到刻度上 | Boolean | false
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | Number or [Number, Number] |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | Boolean | true
| disabled | 值为 `true` 时，滑块为禁用状态 | Boolean | false
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function | NOOP
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function | NOOP
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function or null | IDENTITY
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/index.zh-CN.md
content----> ---
category: Components
type: Feedback
title: Spin
---
A Spin is used for displaying loading state of a page or a block.
## When To Use
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
## API
| Property | Type | Default | Description |
|------------|----------------|-------------|--------------|
| size | enum | default | Size of dot in spin component, available in `small`, `default` and `large`. |
| spinning | boolean | true | Use in embedded mode, to modify loading state. |
| tip | string | None | Customize description content |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/index.en-US.md
content----> ---
category: Components
type: Feedback
title: Spin
subtitle: 加载中
---
用于页面和区块的加载中状态。
## 何时使用
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
## API
| 参数 | 类型 | 默认值 | 说明 |
|------------|----------------|-------------|--------------|
| size | enum | default | spin组件中点的大小，可选值为 small default large |
| spinning | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 |
| tip | string | 无 | 自定义描述文案 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/index.zh-CN.md
content----> ---
category: Components
type: Navigation
cols: 1
title: Steps
---
`Steps` is a navigation bar that guides users through the steps of a task.
## When To Use
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
## API
```jsx
```
### Steps
The whole of the step bar.
Property | Description | Type | Default
-----|-----|-----|------
current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | Number | 0
status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | String | `process`
size | to specify the size of the step bar, `default` and `small` are currently supported | String | `default`
direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | String | horizontal
### Steps.Step
A single step in the step bar.
Property | Description | Type | Default
-----|-----|-----|------
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait
title | title of the step | React.ReactNode | -
description | detail of the step, optional property | React.ReactNode | -
icon | icon of the step, optional property | string or React.ReactNode | -
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/index.en-US.md
content----> ---
category: Components
subtitle: 步骤条
type: Navigation
cols: 1
title: Steps
---
引导用户按照流程完成任务的导航条。
## 何时使用
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
## API
```jsx
```
### Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | Number | 0 |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | String | process |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`）| String | default |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | String | horizontal |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------|
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | String | wait |
| title | 标题 | React.ReactNode | - |
| description | 步骤的详情描述，可选 | React.ReactNode | - |
| icon | 步骤图标的类型，可选 | string or React.ReactNode | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Switch
---
Switching Selector.
## When To Use
- If you need to represent the switching between two states or on-off state.
- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.
## API
### Switch
Property | Description | Type | Default |
-----|-----|-----|------|
checked | determine whether the `Switch` is checked | Boolean | false |
defaultChecked | to set the initial state | Boolean | false |
onChange | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | |
checkedChildren | content to be shown when the state is checked | React Node | |
unCheckedChildren | content to be shown when the state is unchecked | React Node | |
size | the size of the `Switch`, options: `default` `small` | String | default |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/index.en-US.md
content----> ---
category: Components
cols: 1
type: Data Display
title: Table
---
A table displays rows data.
## When To Use
- To display a collection of structured data.
- To sort, search, paginate, filter data.
## How To Use
Specify `dataSource` of Table whose value is an array of data.
```jsx
const dataSource = [{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street'
}, {
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street'
}];
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}];
```
## API
### Table
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| rowSelection | row selection [config](#rowSelection) | Object | null |
| pagination | pagination [config](/components/pagination/), hide it via setting to `false` | Object | |
| size | size of table: `default` or `small` | String | `default` |
| dataSource | data record array to be rendered | Array | |
| columns | columns of table | Array | - |
| rowKey | get row's key, could be a string or function | String or Function(record):string | 'key' |
| rowClassName | get row's className | Function(record, index):string | - |
| expandedRowRender | expanded container render for each row | Function | - |
| defaultExpandedRowKeys | initial expanded row keys | Array | - |
| expandedRowKeys | current expanded rows keys | Array | - |
| defaultExpandAllRows | expand all rows initially | Boolean | false |
| onExpandedRowsChange | function to call when the expanded rows change | Function(expandedRows) | |
| onExpand | function to call when click expand icon | Function(expanded, record) | |
| onChange | callback that is called when pagination, filters, sorter is changed | Function(pagination, filters, sorter) | |
| loading | loading status of table | Boolean | false |
| locale | i18n text include filter, sort, empty text...etc | Object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
[Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | index pixel size of tree data | Number | 15 |
| onRowClick | callback that is called when click a row | Function(record, index) | - |
| bordered | whether to show table border completely | Boolean | false |
| showHeader | whether to show table header | Boolean | true |
| footer | table footer renderer | Function(currentPageData) | |
| title | table title renderer | Function(currentPageData) | |
| scroll | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | Object | - |
### Column
One of Property `columns` for descriping column, Column has the same API.
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| title | title of this column | String or React.Element | - |
| key | key of this column | String | - |
| dataIndex | display field of the data record, could be set like `a.b.c` | String | - |
| render | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for [colSpan/rowSpan config](#demo-colspan-rowspan) | Function(text, record, index) {} | - |
| filters | filter menu config | Array | - |
| onFilter | callback that is called when when click confirm filter button | Function | - |
| filterMultiple | whether to select multiple filtered item | Boolean | true |
| filterDropdown | customized filter overlay | React.Element | - |
| filterDropdownVisible | whether filterDropdown is visible | Boolean | - |
| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - |
| filteredValue | controlled filtered value | Array | - |
| sorter | sort function for local sort. If you need sort buttons only, set it `true` | Function or Boolean | - |
| colSpan | span of this column's title | Number | |
| width | width of this column | String or Number | - |
| className | className of this column | String | - |
| fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | Boolean or String | false |
| sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | Boolean or String | - |
| onCellClick | callback when click cell | Function(record, event) | - |
### ColumnGroup
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| title | title of the column group | String or React.Element | - |
### rowSelection
Properties for selection.
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| type | `checkbox` or `radio` | String | `checkbox` |
| selectedRowKeys | controlled selected row keys | Array | [] |
| onChange | callback that is called when selected rows change | Function(selectedRowKeys, selectedRows) | - |
| getCheckboxProps | get Checkbox or Radio props | Function(record) | - |
| onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) | - |
| onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) | - |
## Note
According to [React documentation](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children), every child in array should be assigned a unique key. The value inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value defaultly for `dataSource`.
If `dataSource[i].key` is not existed, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings like above will show in browser console.
```jsx
// primary key is uid
return ;
// or
return record.uid} />;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/index.en-US.md
content----> ---
category: Components
subtitle: 开关
type: Data Entry
title: Switch
---
开关选择器。
## 何时使用
- 需要表示开关状态/两种状态之间的切换时；
- 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
## API
### Switch
| 参数 | 说明 | 类型 |默认值 |
|-----------|------------------------------------------|------------|--------|
| checked | 指定当前是否选中 | Boolean | false |
| defaultChecked | 初始是否选中 | Boolean | false |
| onChange | 变化时回调函数 | Function(checked:Boolean) | |
| checkedChildren | 选中时的内容 | React Node | |
| unCheckedChildren | 非选中时的内容 | React Node | |
| size | 开关大小，可选值：`default` `small` | String | default |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/index.zh-CN.md
content----> ---
category: Components
cols: 1
type: Data Display
title: Table
subtitle: 表格
---
展示行列数据。
## 何时使用
- 当有大量结构化的数据需要展现时；
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
## 如何使用
指定表格的数据源 `dataSource` 为一个数组。
```jsx
const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
```
## API
### Table
| 参数 | 说明 | 类型 | 默认值 |
|---------------|--------------------------|-----------------|---------|
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | Object | null |
| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | Object | |
| size | 正常或迷你类型，`default` or `small` | String | default |
| dataSource | 数据数组 | Array | |
| columns | 表格列的配置描述，具体项见下表 | Array | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | String or Function(record):string | 'key' |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| expandedRowRender | 额外的展开行 | Function | - |
| defaultExpandedRowKeys | 默认展开的行 | Array | - |
| expandedRowKeys | 展开的行，控制属性 | Array | - |
| defaultExpandAllRows | 初始时，是否展开所有行 | Boolean | false |
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
| onExpand | 点击展开图标时触发 | Function(expanded, record) | |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
| loading | 页面是否加载中 | Boolean | false |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | Object | filterConfirm: '确定'
filterReset: '重置'
emptyText: '暂无数据'
[默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | Number | 15 |
| onRowClick | 处理行点击事件 | Function(record, index) | - |
| bordered | 是否展示外边框和列边框 | Boolean | false |
| showHeader | 是否显示表头 | Boolean | true |
| footer | 表格尾部 | Function(currentPageData) | |
| title | 表格标题 | Function(currentPageData) | |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | Object | - |
### Column
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------|
| title | 列头显示文字 | String or React.Element | - |
| key | React 需要的 key，建议设置 | String | - |
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | String | - |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | - |
| filters | 表头的筛选菜单项 | Array | - |
| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
| filterMultiple | 是否多选 | Boolean | true |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | React.Element | - |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | Boolean | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | Array | - |
| sorter | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true | Function or Boolean | - |
| colSpan | 表头列合并,设置为 0 时，不渲染 | Number | |
| width | 列宽度 | String or Number | - |
| className | 列的 className | String | - |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | Boolean or String | false |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | Boolean or String | - |
| onCellClick | 单元格点击回调 | Function(record, event) | - |
### ColumnGroup
| 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------|
| title | 列头显示文字 | String or React.Element | - |
### rowSelection
选择功能的配置。
| 参数 | 说明 | 类型 | 默认值 |
|------------------|--------------------------|-----------------|---------------------|---------|
| type | 多选/单选，`checkbox` or `radio` | String | `checkbox` |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | [] |
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
## 注意
按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
```jsx
// 比如你的数据主键是 uid
return ;
// 或
return record.uid} />;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/index.zh-CN.md
content----> ---
category: Components
type: Navigation
title: Tabs
---
Tabs make it easy to switch between different views.
### When To Use
Ant Design has 3 types Tabs for different situation.
- Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page.
- [RadioButton](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
## API
### Tabs
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| activeKey | Current TabPane's key| string | _ |
| defaultActiveKey | Default actived tabPanel's key, if activeKey is not setted. | - |
| onChange | Callback when tab is switched | Function | - |
| onTabClick | Callback when tab is clicked | Function | - |
| tabBarExtraContent | Extra element in tab bar | React.ReactNode | - |
| type | Basic style of tabs. Options: line, card & editable-card | string | line |
| size | Tab bar size. Options: default, small. Only works while `type="line"`. | string | default |
| tabPosition | Position of tabs. Options: top, right, bottom & left | string | top |
| onEdit | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - |
| hideAdd | Hide plus icon or not, which is effective when set type as editable-card | boolean | false |
| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean | true |
### Tabs.TabPane
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| key | TabPane's key | string | _ |
| tab | Show text in TabPane's head | React.ReactNode | _ |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/index.en-US.md
content----> ---
category: Components
subtitle: 标签页
type: Navigation
title: Tabs
---
选项卡切换组件。
## 何时使用
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
Ant Design 依次提供了三级选项卡，分别用于不同的场景。
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
- [RadioButton](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
## API
### Tabs
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------|
| activeKey | 当前激活 tab 面板的 key | string | 无 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| onChange | 切换面板的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| size | 大小，提供 `default` 和 `small` 两种大小，仅当 `type="line"` 时生效。 | string | 'default' |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean | true |
### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | React.ReactNode | 无 |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Tag
---
Tag for categorizing or markuping.
## When To Use
- It can be used to tag by dimension or property.
- categorizing
## API
### Tag
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| color | The background color of Tag | string | - |
| closable | Tag can be closed. | boolean | false |
| onClose | Callback when tag was closed | (e) => void| - |
| afterClose | Callback when closed animation is complete | () => void | - |
### Tag.CheckableTag
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| checked | To set the checked status for Tag | boolean | false |
| onChange | A callback which will be called while Tag is clicked | (checked) => void | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/index.en-US.md
content----> ---
category: Components
subtitle: 标签
type: Data Display
title: Tag
---
进行标记和分类的小标签。
## 何时使用
- 用于标记事物的属性和维度。
- 进行分类。
## API
### Tag
| 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|--------|
| color | 标签背景色 | string | - |
| closable | 标签是否可以关闭 | boolean | false |
| onClose | 关闭时的回调 | (e) => void | - |
| afterClose | 关闭动画完成后的回调 | () => void | - |
### Tag.CheckableTag
| 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|--------|
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: TimePicker
---
To select/input a time.
## When To Use
--------
By clicking the input box, you can select a time from a popup panel.
## API
---
```jsx
import moment from 'moment';
```
> Note: `TimePicker` is renamed to `TimePicker` after 0.11.
| Property | Description | Type | Default |
|---------------------|-----|-----|-------|
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
| value | to set time | [moment](http://momentjs.com/) | - |
| placeholder | display when there's no value | string | "Select a time" |
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
| format | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | determine whether the TimePicker is disabled | bool | false |
| disabledHours | to specify the hours that cannot be selected | function() | - |
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
| addon | called from timepicker panel to render some addon to its bottom | function | 无 |
.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/index.en-US.md
content----> ---
category: Components
subtitle: 时间选择框
type: Data Entry
title: TimePicker
---
输入或选择时间的控件。
## 何时使用
--------
当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
## API
---
```jsx
import moment from 'moment';
```
> 注意：`0.11+` 后 `Timepicker` 改名为 `TimePicker`。
| 参数 | 说明 | 类型 | 默认值 |
|---------------------|-----|-----|-------|
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | 禁用全部操作 | bool | false |
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| addon | 选择框底部显示自定义的内容 | function | 无 |
.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Timeline
---
Vertical display timeline.
## When To Use
- When a series of information need to be ordered from top to bottom by time.
- When you need a timeline to make a visual connection.
## API
```jsx
step1 2015-09-01
step2 2015-09-01
step3 2015-09-01
step4 2015-09-01
```
### Timeline
Timeline
| Property | Description | Type | Default |
|----------|----------------------------------------|------------|-------|
| pending | to set the last ghost node's existence or its content | boolean or React.Element | false |
### Timeline.Item
Node of timeline
| Property | Description | Type | Default |
|----------|------------------------------------------|------------|-------|
| color | to set the circle's color to `blue, red, green` or other custom colors | string | blue |
| dot | custom timeline dot | React.Element | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/index.en-US.md
content----> ---
category: Components
subtitle: 时间轴
type: Data Display
title: Timeline
---
垂直展示的时间流信息。
## 何时使用
- 当有一系列信息需要从上至下按时间排列时；
- 需要有一条时间轴进行视觉上的串联时；
## API
```jsx
创建服务现场 2015-09-01
初步排除网络异常 2015-09-01
技术测试异常 2015-09-01
网络异常正在修复 2015-09-01
```
### Timeline
时间轴。
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------------------------------|------------|-------|
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean or React.Element | false |
### Timeline.Item
时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|------------|-------|
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
| dot | 自定义时间轴点 | React.Element | - |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Tooltip
---
A simple text popup tip.
## When To Use
- The tip shows while mouse enter, and hides while mouse leave. The ToolTip doesn't support complex text and operation.
- It can provide an explanation of `button/text/operation` that can cover the usage of the default system `title`.
## API
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| placement | to set the position, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| title | prompt text | string/React.Element | - |
| getTooltipContainer | to set the container of the tip, while the default is to create a `div` element in `body` | Function(triggerNode) | () => document.body |
| arrowPointAtCenter | whether arrow pointed at the center of target, supported after `[email protected]+` | Boolean | `false` |
You can visit https://github.com/react-component/tooltip for more API.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tooltip/index.en-US.md
content----> ---
category: Components
subtitle: 文字提示
type: Data Display
title: Tooltip
---
简单的文字提示气泡框。
## 何时使用
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| title | 提示文字 | string/React.Element | 无 |
| getTooltipContainer | 浮层渲染父节点。默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`[email protected]+` 支持 | Boolean | `false` |
更多 API 可参考：https://github.com/react-component/tooltip
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tooltip/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
cols: 1
title: Transfer
---
Double column transfer choice box.
## When To Use
Transfer the elements between two columns in an intuitive and efficient way.
One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in.
## API
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | Array | [] |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) | |
| targetKeys | A set of keys of elements that are listed on the right column. | string[] | [] |
| selectedKeys | A set of keys of selected items. | string[] | [] |
| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
| onSelectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
| listStyle | A custom CSS style used for rendering the transfer columns. | Object | |
| className | A custom CSS class. | String | ['', ''] |
| titles | A set of titles that are sorted from left to right. | Array | - |
| operations | A set of operations that are sorted from top to bottom. | Array | [] |
| showSearch | If included, a search box is shown on each column. | Boolean | false |
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
| searchPlaceholder | The hint text of the search box. | String | 'Search here' |
| notFoundContent | Text to display when a column is empty. | React.ReactNode | 'The list is empty' |
| footer | A function used for rendering the footer. | (props): React.ReactNode | |
| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items | Object | `{ height: 32, offset: 32 }` |
## Warning
According the [standard](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
```jsx
// eg. your primary key is `uid`
return record.uid} />;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/index.en-US.md
content----> ---
category: Components
type: Data Display
title: Tree
subtitle: 树形控件
---
## 何时使用
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
## API
### Tree props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
|multiple | 支持点选多个节点（节点本身） | bool | false |
|checkable | 节点前添加 Checkbox 复选框 | bool | false |
|defaultExpandAll | 默认展开所有树节点 | bool | false |
|defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] |
|expandedKeys | （受控）展开指定的树节点 | String[] | [] |
|autoExpandParent | 是否自动展开父节点 | bool | true |
|defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] |
|checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | String[]/{checked:Array,halfChecked:Array} | [] |
|checkStrictly| checkable状态下节点选择完全受控（父子节点选中状态不再关联）| bool | false |
|defaultSelectedKeys | 默认选中的树节点 | String[] | [] |
|selectedKeys | （受控）设置选中的树节点 | String[] | - |
|onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
|loadData | 异步加载数据 | function(node)| - |
|onRightClick | 响应右键点击 | function({event,node}) | - |
|draggable | 设置节点可拖拽（IE>8） | bool | false |
|onDragStart | 开始拖拽时调用 | function({event,node}) | - |
|onDragEnter | dragenter 触发时调用 | function({event,node,expandedKeys}) | - |
|onDragOver | dragover 触发时调用 | function({event,node}) | - |
|onDragLeave | dragleave 触发时调用 | function({event,node}) | - |
|onDragEnd | dragend 触发时调用 | function({event,node}) | - |
|onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
### TreeNode props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
|disabled | 禁掉响应 | bool | false |
|disableCheckbox | 禁掉 checkbox | bool | false |
|title | 标题 | String/element | '---' |
|key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | String | 内部计算出的节点位置 |
|isLeaf | 设置为叶子节点 | bool | false |
## 注意
树节点可以有很多，但在设置`checkable`时、将会花费更多的计算时间，因此我们缓存了一些计算结果(像`this.treeNodesStates`)来复用、避免多次重复计算、以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：`{this.state.treeData.length ? {this.state.treeData.map(t => )} : 'loading tree'}`
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: TreeSelect
---
Tree selection control.
## When To Use
`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure.
Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
## API
### Tree props
Property | Description | Type | Default
-----|-----|-----|------
value | To set the current selected treeNode(s). | __Default:__ String/Array. __With `labelInValue` set:__ { value: String, label: React.Node }/Array<{ value, label }>. __With `treeCheckStrictly` set(`halfChecked` is set to `false`):__ { value: String, label: React.Node, halfChecked }/Array<{ value, label, halfChecked }>. | -
labelInValue | Determine whether to put `label` into `value`, the type of `value` as specified in the above | Boolean | false
defaultValue | To set the initial selected treeNode(s). | String/Array | -
multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | Boolean | false
onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | -
onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | -
allowClear | Whether allow clear | Boolean | false
onSearch | A callback function, can be executed when the search input changes. | function(value: String) | -
placeholder | Placeholder of the select input | String | -
searchPlaceholder | Placeholder of the search input | String | -
dropdownStyle | To set the style of the dropdown menu | Object | -
dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width | Boolean | -
size | To set the size of the select input, options: `large` `small` | String | default
showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | Boolean | false
disabled | Disabled or not | Boolean | false
showCheckedStrategy | __Default:__ just show child nodes. __`TreeSelect.SHOW_ALL`:__ show all checked treeNodes (include parent treeNode). __`TreeSelect.SHOW_PARENT`:__ show checked treeNodes (just show parent treeNode). | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD
treeDefaultExpandAll | Whether to expand all treeNodes by default | Boolean | false
treeCheckable | Whether to show checkbox on the treeNodes | Boolean | false
treeCheckStrictly | Whether to check nodes precisely(in the `checkable` mode), means parent and child nodes are not associated | Boolean | false
filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | Boolean/Function(inputValue: string, treeNode: TreeNode) (should return Boolean) | Function
treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | String | 'value'
treeNodeLabelProp | Will render as content of select | String | 'title'
treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array<{ value, label, children, [disabled, selectable] }> | []
treeDataSimpleMode | Enable simple mode of treeData.(treeData should like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id) | Boolean/Object{ id: 'id', pId: 'pId', rootPId: null } | false
loadData | Load data asynchronously. | function(node) | -
getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body
### TreeNode props
> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.
Property | Description | Type | Default
-----|-----|-----|------
disabled | Disabled or not | Boolean | false
key | Required property, should be unique in the tree | String | -
value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | String | -
title | Content showed on the treeNodes | String/element | '---'
isLeaf | Leaf node or not | Boolean | false
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree-select/index.en-US.md
content----> ---
category: Components
subtitle: 穿梭框
type: Data Entry
cols: 1
title: Transfer
---
双栏穿梭选择框。
## 何时使用
用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。
其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反应了这两个概念。
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | Array | [] |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 React element | Function(record) | |
| targetKeys | 显示在右侧框数据的key集合 | string[] | [] |
| selectedKeys | 设置哪些项应该被选中 | string[] | [] |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | |
| listStyle | 两个穿梭框的自定义样式 | Object | |
| className | 自定义类 | String | |
| titles | 标题集合,顺序从左至右 | Array | ['', ''] |
| operations | 操作文案集合,顺序从上至下 | Array | [] |
| showSearch | 是否显示搜索框 | Boolean | false |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| (inputValue, option): boolean | |
| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
| notFoundContent | 当列表为空时显示的内容 | React.ReactNode | '列表为空' |
| footer | 底部渲染函数 | (props): React.ReactNode | |
| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数 | Object | `{ height: 32, offset: 32 }` |
## 注意
按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Transfer 中，`dataSource`里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。
```jsx
// 比如你的数据主键是 uid
return record.uid} />;
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/index.zh-CN.md
content----> ---
category: Components
type: Data Display
title: Tree
---
## When To Use
Directory, organization, biological classification, country, and etc. Almost things of the world are tree structure. The `Tree` component is a way of representing the hierarchical relationship of these things，and you also can expand, collapse, select the treeNodes of it.
## API
### Tree props
| Property | Description | Type | Default |
|----------------|--------------------------------------------------|------------|---------|
|multiple | Whether allow to select multiple treeNodes | bool | false |
|checkable | Whether support add Checkbox before treeNode | bool | false |
|defaultExpandAll | Whether default to expand all treeNodes | bool | false |
|defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] |
|expandedKeys |(controlled) Specifies keys of expanded treeNodes | String[] | [] |
|autoExpandParent | Whether to automatically expand a parent treeNode | bool | true |
|defaultCheckedKeys | Specifies keys of default checked treeNodes | String[] | [] |
|checkedKeys |(controlled) Specifies keys of checked treeNodes（PS： When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, it'a object has `checked` and `halfChecked` property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother. | String[]/{checked:Array,halfChecked:Array} | [] |
|checkStrictly| Check treeNode precisely, parent treeNode and children treeNodes are not associated | bool | false |
|defaultSelectedKeys | Specifies keys of default selected treeNodes | String[] | [] |
|selectedKeys |(controlled) Specifies keys of selected treeNode | String[] | - |
|onExpand | Defines a function will be called when expand or collapse a treeNode | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | Defines a function will be called when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | The callback will be invoked when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | Defines a function to filter treeNodes（highlight），when return true, corresponding treeNode will be highlight | function(node) | - |
|loadData | load data asynchronously | function(node)| - |
|onRightClick | The call back will be invoked when the user right clicks a treeNode | function({event,node}) | - |
|draggable | Specifies whether this Tree is draggable（IE>8） | bool | false |
|onDragStart | Defines a function will be called when the onDragStart event occurs | function({event,node}) | - |
|onDragEnter | Defines a function will be called when the onDragEnter event occurs | function({event,node,expandedKeys}) | - |
|onDragOver | Defines a function will be called when the onDragOver event occurs | function({event,node}) | - |
|onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event,node}) | - |
|onDragEnd | Defines a function will be called when the onDragEnd event occurs | function({event,node}) | - |
|onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
### TreeNode props
| Property | Description | Type | Default |
|-----------|------------------------------------------|---------|---------|
|disabled | whether disabled the treeNode | bool | false |
|disableCheckbox | whether disable the checkbox of treeNode | bool | false |
|title | title | String/element | '---' |
|key | it's used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: it must be unique in all of treeNodes of the tree! | String | internal calculated position of treeNode |
|isLeaf | whether it's leaf node | bool | false |
## note
The number of treeNodes can be very large, but when enable `checkable`,
it will spend more computing time, so we cached some calculations(e.g. `this.treeNodesStates`),
to avoid double computing. But, this bring some restrictions,
**when you async load treeNodes, you should render tree like this**
`{this.state.treeData.length ? {this.state.treeData.map(t => )} : 'loading tree'}`
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/index.en-US.md
content----> ---
category: Components
subtitle: 树选择
type: Data Entry
title: TreeSelect
---
树型选择控件。
## 何时使用
类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
## API
### Tree props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| value | 指定当前选中的条目 | 通常: String/Array. 设置 labelInValue: {value: String, label: React.Node}/Array<{value, label}>. 设置 treeCheckStrictly(halfChecked 默认为 false): {value: String, label: React.Node, halfChecked}/Array<{value, label, halfChecked}>. | - |
| labelInValue | 是否把 label 嵌入到 value 里，设置后参考以上 value 类型写法 | Boolean | false |
| defaultValue | 指定默认选中的条目 | String/Array | - |
| multiple | 支持多选（当设置 treeCheckable 时自动变为true） | Boolean | false |
| onSelect | 被选中时调用 | function(value, node, extra) | - |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - |
| allowClear | 显示清除按钮 | Boolean | false |
| onSearch | 文本框值变化时回调 | function(value: String) | - |
| placeholder | 选择框默认文字 | String | - |
| searchPlaceholder | 搜索框默认文字 | String | - |
| dropdownStyle | 下拉菜单的样式 | Object | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | Boolean | true |
| size | 选择框大小，可选 `large` `small` | String | default |
| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| showCheckedStrategy | `TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
| treeDefaultExpandAll | 默认展开所有树节点 | Boolean | false |
| treeCheckable | 显示 checkbox | Boolean | false |
| treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联）| Boolean | false |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | Boolean/Function(inputValue: string, treeNode: TreeNode) (函数需要返回bool值) | Function |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' |
| treeNodeLabelProp | 作为显示的 prop 设置 | String | 'title' |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）| array<{value, label, children, [disabled, selectable]}> | [] |
|treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | Boolean/Object{id: 'id', pId: 'pId', rootPId: null} | false |
| loadData | 异步加载数据 | function(node) | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
### TreeNode props
> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| disabled | 是否禁用 | Boolean | false |
| key | 此项必须设置（其值在整个树范围内唯一） | String | - |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | String | - |
| title | 树节点显示的内容 | String/element | '---' |
| isLeaf | 是否是叶子节点 | Boolean | false |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree-select/index.zh-CN.md
content----> ---
category: Components
type: Data Entry
title: Upload
---
Upload file by selecting or dragging.
## When To Use
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
- When you need to upload one or more files.
- When you need to show the process of uploading.
- When you need to upload files by dragging and dropping.
## API
> You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki) about how to implement server side upload interface.
| Property | Description | Type | Default|
|------------|----------------------------------------------------| ----------- |--------|
| name | The name of uploading file | String | 'file' |
| defaultFileList | Default list of files that have been uploaded. | Array[Object] | - |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | Array[Object] | - |
| action | Required. Uploading URL | String | - |
| data | Uploading params or function which can return uploading params. | Object or function(file) | - |
| headers | Set request headers, valid above IE10. | Object | - |
| showUploadList | Whether to show uploadList. | Boolean | true |
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | Boolean | false |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | String | - |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported by old IE**。 | (file, fileList) => `boolean | Promise` | - |
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - |
| onChange | A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - |
| listType | Built-in stylesheets, support for two types: `text` or `picture` | String | 'text'|
| onPreview | A callback function, will be executed when file link is clicked. | Function(file) | - |
| onRemove | A callback function, will be executed when removing file button is clicked | Function(file) | - |
| supportServerRender | Need to be turned on while the server side is rendering.| Boolean | false |
| disabled | disable upload button | Boolean | false |
| withCredentials | ajax upload with cookie sent | Boolean | false |
### onChange
> The function will be called when uploading is in progress, completed or failed
When uploading state change, it returns:
```js
{
file: { /* ... */ },
fileList: [ /* ... */ ],
event: { /* ... */ },
}
```
1. `file` File object for the current operation.
```js
{
uid: 'uid', // unique identifier，negative is recommend，to prevent interference with internal generated id
name: 'xx.png' // file name
status: 'done', // options：uploading, done, error, removed
response: '{"status": "success"}', // response from server
}
```
> Before `[email protected]`, this parameter will be Array Object `[file, ...]` in multiple mode, while in `[email protected]+`, it will always be an Object.
2. `fileList` current list of files
3. `event` response from server, including uploading progress, supported by advanced browsers.
## show download links
Please set property `url` of property `fileList` to control content of link
## customRequest
* https://github.com/react-component/upload#customrequest
## IE note
- [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/index.en-US.md
content----> ---
category: Components
subtitle: 上传
type: Data Entry
title: Upload
---
文件选择上传和拖拽上传控件。
## 何时使用
上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
- 当需要上传一个或一些文件时。
- 当需要展现上传的进度时。
- 当需要使用拖拽交互时。
## API
> 服务端上传接口实现可以参考 [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki)。
| 参数 | 说明 | 类型 | 默认值|
|------------|--------------------------------------------------------------| ----------- |-------|
| name | 发到后台的文件参数名 | String | 'file' |
| defaultFileList | 默认已经上传的文件列表 | Array[Object] | 无 |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | Array[Object] | 无 |
| action | 必选参数, 上传的地址 | String | 无 |
| data | 上传所需参数或返回上传参数的方法 | Object or function(file) | 无 |
| headers | 设置上传的请求头部，IE10 以上有效 | Object | 无 |
| showUploadList | 是否展示 uploadList, 默认开启 | Boolean | true |
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | Boolean | false |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | String | 无 |
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。 | (file, fileList) => `boolean | Promise` | 无 |
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 |
| onChange | 上传文件改变时的状态，详见 onChange | Function | 无 |
| listType | 上传列表的内建样式，支持两种基本样式 `text` or `picture` | String | 'text'|
| onPreview | 点击文件链接时的回调 | Function(file) | 无 |
| onRemove | 点击移除文件时的回调 | Function(file) | 无 |
| supportServerRender | 服务端渲染时需要打开这个 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| withCredentials | 上传请求时是否携带 cookie | Boolean | false |
### onChange
> 上传中、完成、失败都会调用这个函数。
文件状态改变的回调，返回为：
```js
{
file: { /* ... */ },
fileList: [ /* ... */ ],
event: { /* ... */ },
}
```
1. `file` 当前操作的文件对象。
```js
{
uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
name: 'xx.png' // 文件名
status: 'done', // 状态有：uploading done error removed
response: '{"status": "success"}', // 服务端响应内容
}
```
> `[email protected]` 之前，multiple 模式下，此参数为一个对象数组 `[file, ...]`，`[email protected]` 开始无论是否多选，均为一个对象。
2. `fileList` 当前的文件列表。
3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
## 显示下载链接
请使用 fileList 属性设置数组项的 url 属性进行展示控制。
## customRequest
* https://github.com/react-component/upload#customrequest
## IE note
- [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/index.zh-CN.md
content----> ---
order: 6
title:
zh-CN: 高级搜索
en-US: Advanced Search
---
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
---
## 常规型
### 交互
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
### 排列规则
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
### 规格
- 横向排版
在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
- 纵向排版
使用 `16px` 作为间距。
## 字段型
### 交互
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
案例（敬请期待）
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/advanced-search.md
content----> ---
order: 0
disabled: true
title:
zh-CN: 典型页面
en-US: Classic
---
敬请期待。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/classic.md
content----> ---
order: 5
title:
zh-CN: 表格：复杂数据
en-US: Complex Table
---
表格也用于展示复杂和高度结构化数据。
---
## 案例
### 多列数据
通过按钮，可实现更多列数据的加载以及左右切换。
提供用户自定义列的功能，方便用户查看需要的列。
固定表头列，通过横向滚动条来查看剩余内容。
### 带图标的表格
通过图标强化信息的传递，适用在表达数据变化趋势。
### 带图表的表格
通过图表来强化信息的传递，适用在表达数据变化趋势。
### 二维表格
横向和纵向各一个标题来展现数据。
### 小表格
适用在卡片、弹出框等空间较小的场景中。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/complex-table.md
content----> ---
order: 2
title:
zh-CN: 表单
en-US: Form
---
作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
设计者进行表单设计时，应当注意这几点：
1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
2. 让用户能在上下文中获取信息，帮助他完成输入。
使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
3. 对错误敏感，并尽可能宽容。
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
4. 不要提出不必要的问题。
---
## 内容
通常表单会有四个部分组成。
1. 标签
2. 输入框
3. 校验反馈
4. 动作
> 注：`*` 表明该项为必填项。
## 交互
### 填空
在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
### 组合输入框
当两个输入框关联性很强时，可以前后拼接，减少页面空间。
### 对齐方式
在页面设计表单时，按钮组必须和输入框左对齐。
### 禁用主按钮
当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
### 结构化的格式
用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
### 输入提示 & 输入提醒
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
### 密码加强计
提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
### 校验
通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
### 字数校验框
用于统计当前输入长度，以及是否超过系统阈值。
## 规格
### 间距
典型表单的间隔规范。
### 输入框宽度
当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
### 对齐方式
无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
右对齐（推荐）。
- 优点：节约垂直空间。
- 缺点：降低可读性；标签长度和输入框弹性小。
- 场景：既要减少垂直空间，又要加快填写速度。
顶部对齐。
- 优点：有最快的浏览和处理速度；标签长度弹性大。
- 缺点：非常占垂直空间。
- 场景：希望用户快速填写表单，完成任务。
左对齐。
- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
- 缺点：填写速度慢；标签长度和输入框弹性小。
- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/form.md
content----> ---
order: 3
title:
zh-CN: 列表
en-US: List
---
列表是非常常见的界面元素，有多种使用场景：
- 获取概览
- 逐项浏览
- 查找特定列表项
- 排序与过滤
- 重新安排、添加、删除或重新分类列表项
---
## 交互
### 显示详情信息
气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
### 显示更多文本
宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
### 显示图片
走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
### 显示长列表
分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
### 显示分类或者层级的列表
案例（敬请期待）
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/list.md
content----> ---
order: 1
title:
zh-CN: 导航
en-US: Navigation
---
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
---
## 常见导航
侧栏导航
顶部导航
优点
导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。
人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。
缺点
内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。
目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。
总结
适用在操作性强、中后台管理性质的应用。
一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。
我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
前端实现代码可以参考 [常用布局](/docs/spec/layout#docs-spec-layout-demo-top)。
## 侧栏导航
---
导航的结构由以下几部分组成。
1. 产品 Logo 和名称
2. 业务类目
3. 登陆工具
4. 面包屑（可选）
#### 关于面包屑
> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
> 2. 面包屑可以分为这几类：
> - 路径型：是一个动态显示用户到达页面经过的途径。
> - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
> - 属性型：属性型给出当前页面的分类信息。
我们定义了不同类目层级所对应的导航样式。
## 顶部导航
---
导航的结构由以下几部分组成。
1. 产品 Logo 和名称
2. 业务类目
3. 登陆工具
4. 面包屑（可选）
不同类目层级。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/navigation.md
content----> ---
order: 4
title:
zh-CN: 表格
en-US: Table
---
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
---
## 内容
通常表格的组成元素以及相关元素会有，这几部分组成。
1. 按钮组
2. 搜索条件
3. 排序
4. 筛选
5. 状态点
6. 单行操作
7. 分页器／无限加载（可选）
### 筛选
当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
### 状态点
一般用四种颜色来表明系统的不同状态。
### 更多操作
该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
### 跳转至详情
把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
- 优点：节省空间；
- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
在操作中增加一列『查看』，点击后进行跳转至详情。
- 优点：可发现性高；点击范围固定，不受影响；
- 缺点：比较占空间。
结论：可根据业务系统中表格的实际情况，统一使用一种类型。
## 交互
### 显示长表格
参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
### 全选数据
当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
### 跨页选数据
当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
### 固定按钮组
用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
### 某一项内容过长
某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
### 模块编辑
适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
### 直接编辑
适用在易编辑性高于易读性时。
### 悬浮层编辑
悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
## 规格
### 行高
提供了多种规格的行高，适用在页面、弹出框等场景中。
### 列宽
一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
1. 表头不换行；
2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
### 对齐方式
数值右对齐（带小数则按小数点对齐），其余左对齐。
案例（敬请期待）
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/pattern/table.md
content----> ---
order: 1
disabled: true
title: Business
---
TBD Content ...
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/practice/bussiness.en-US.md
content----> ---
order: 1
disabled: true
title: 业务组件
---
占位。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/practice/bussiness.zh-CN.md
content----> ---
order: 0
title: Cases
---
Ant Design is a design language for enterprise-like complex UIs.
Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 40 systems.
Designed for enterprise-like complex UIs, used by both professional and non-professional designers,
Ant Design has a low learning curve that helps you getting started fast and achieve rapid results.
With a strong focus on proof-based design and user experience,
Ant Design provides a complete front-end development solution that can greatly enhance the design and development efficiency.
Currently, there are many products and sites using Ant Design.
References to some of these implementations can be found [here](https://github.com/ant-design/ant-design/issues/477).
If your solutions are using Ant Design, please leave us a message.
## Best Practices
---
### Financial Cloud
Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services.
It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
---
### OceanBase Cloud Platform
OceanBase Cloud is a distributed relational database in a real sense, but OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
---
### Service Experience Platform
Experience Platform is used for collecting all the points of contact and information of the user (including microblogging and other channels).
Through data mining, it exposes the users's experience and it helps the company's internal business team / product managers, facilitating the experience problem solving, in order to achieve healthy functioning streams.
---
### AntV
AntV is a graphical library that is based on the work of a data group team
whose results of exploring data visualization were summarized
and shared them together with the required data visualization theory.
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
background: #fff;
}
.toc {
display: none;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/practice/cases.en-US.md
content----> ---
order: 0
title: 实践案例
---
Ant Design 是面向中台的 UI 设计语言。
从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
Ant Design 目前在外部也有 [许多产品实践](https://github.com/ant-design/ant-design/issues/477)，如果你的公司和产品从中受益，欢迎留言。
## 最佳实践
---
### 金融云
金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
---
### OceanBase Cloud Platform
OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
---
### 服务宝体验平台
体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
---
### AntV
AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
background: #fff;
}
.toc {
display: none;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/practice/cases.zh-CN.md
content----> ---
order: 4
title: Customize Theme
---
Ant Design allows to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
## Less variables
We are using [Less](http://lesscss.org/) as the development language of style. A set of less variables are defined for each design aspect that can be customized to your needs.
- [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
Please report an issue if the existing list of variables is not enough for you.
## How to use it
We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground.
### 1) Using 'theme' property in package.theme (recommended way)
Specify the `theme` property in `package.json` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
- example of directly specifying the custom values as an object:
```js
"theme": {
"@primary-color": "#1DA57A",
},
```
- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file:
```js
"theme": "./theme.js",
```
This approach is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
Note: Importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true`.
### 2) Overriding Less variables (alternative way)
Override variables via less definition files.
Create a standalone less file like the one below, and import it in your project.
```css
@import "~antd/dist/antd.less"; // import official less entry file
@import "your-theme-file.less"; // override variables here
```
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/customize-theme.en-US.md
content----> ---
order: 4
title: 定制主题
---
Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
## 样式变量
antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
- [默认样式变量](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
如果以上变量不能满足你的定制需求，可以给我们提 issue。
## 定制方式
我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
可以在本地运行 [例子](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) 查看定制效果。
### 1) package.theme（推荐）
配置在 `package.json` 下的 `theme` 字段。theme 可以为配置为一个对象或文件路径。
```js
"theme": {
"@primary-color": "#1DA57A",
},
```
或者 [一个 js 文件](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js)：
```js
"theme": "./theme.js",
```
定义 `package.theme` 时， 需要配合 [atool-build](https://github.com/ant-tool/atool-build) 使用（[antd-init](https://github.com/ant-design/antd-init) 和 [dva-cli](https://github.com/dvajs/dva-cli) 内建支持）。如果你使用的是其他脚手架，可以参考 [atool-build 中 less-loader 的 webpack 相关配置 ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138)，利用 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 配置来覆盖原来的样式变量。
注意，样式必须加载 less 格式。如果您使用了 `babel-plugin-import`，请将 style 属性配置为 `true`。
### 2) less
用 less 文件进行变量覆盖。
建立一个单独的 `less` 文件如下，再引入这个文件。
```css
@import "~antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件
@import "your-theme-file.less"; // 用于覆盖上面定义的变量
```
注意：这种方式会载入所有组件的样式，无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/customize-theme.zh-CN.md
content----> ---
order: 1
title: Getting Started
---
Ant Design React is dedicated to providing a **good development experience** for programmers.
---
Before delving into Ant Design React, a good knowledge of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
## First Example
The following CodePen demo is the simplest usage case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in real world.
- [antd CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001)
## Standard Development Flow
During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the request to mocked data or some external services. And all of these to be done with a quick feedback provided through hot reloading of changes.
Such features, together with packaging the production version are covered in this work flow.
### 1. Installation
> Please make sure that you had installed [Node.js](https://nodejs.org/en/)(> v4.x) before using `antd-init`.
```bash
$ npm install antd-init -g
```
Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
> Also, you can use scaffold/demo which is provided by community:
>
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
> - [more](https://github.com/ant-design/ant-design/issues/129)
### 2. Create a New Project
A new project can be created using CLI tools.
```bash
$ mkdir antd-demo && cd antd-demo
$ antd-init
```
`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
### 3. Use antd's Components
By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`.
Replace the content of `index.js` with the following code.
As you can see, there is no difference between antd's components and usual React components.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
handleChange(date) {
message.info('Selected Date: ' + date.toString());
this.setState({ date });
}
render() {
return (
this.handleChange(value)} />
Date: {this.state.date.toString()}
);
}
}
ReactDOM.render(, document.getElementById('root'));
```
> All the components in antd are listed in the sidebar.
### 4. Development & Debugging
Run your project and visit http://127.0.0.1:8000
```bash
$ npm start
```
### 5. Building & Deployment
```bash
$ npm run build
```
Entry files will be built and generated in `dist` directory, then we can deploy it to different environments.
> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
> But you can use those tools in your project, depending on your context and needs.
## Compatibility
Ant Design React supports all the modern browsers and IE9+.
You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers. If you are using babel, we strongly recommend to use [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/).
```html
```
#### IE8 note
> We don't support IE8 after `[email protected]`.
You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `[email protected]` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
## Customized Work Flow
If you want to customize your work flow, we recommend to use [webpack](http://webpack.github.io/) to build and debug code.
Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute.
## Import on Demand
If we import a component like this `import { Button } from 'antd';`, then all the components of antd will be imported. But, we can import component on demand:
```jsx
import Button from 'antd/lib/button';
```
If you use `babel`, we recommend to use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import). This plugin will convert the following code to the above form:
```jsx
import { Button } from 'antd';
```
And this plugin can also load styles on demand. See the [usage](https://github.com/ant-design/babel-plugin-import#usage) for further details.
## Customization
- [Customize Theme](/docs/react/customize-theme)
- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
## Tips
- You can use any `npm` modules.
- We recommend to write code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated in our work flow.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/getting-started.en-US.md
content----> ---
order: 1
title: 快速上手
---
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
---
在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)。
## 第一个例子
最简单的使用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
- [antd CodePen](http://codepen.io/benjycui/pen/KgPZrE?editors=001)
## 标准开发
实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
### 1. 安装脚手架工具
> 使用 `antd-init` 前，务必确认 [Node.js](https://nodejs.org/en/) 已经升级到 v4.x 或以上。
```bash
$ npm install antd-init -g
```
更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
> 除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：
>
> - [reactSPA](https://github.com/JasonBai007/reactSPA)
> - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
> - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
> - [更多](https://github.com/ant-design/ant-design/issues/129)
### 2. 创建一个项目
使用命令行进行初始化。
```bash
$ mkdir antd-demo && cd antd-demo
$ antd-init
```
antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
### 3. 使用组件
脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
handleChange(date) {
message.info('您选择的日期是: ' + date.toString());
this.setState({ date });
}
render() {
return (
this.handleChange(value)} />
当前日期：{this.state.date.toString()}
);
}
}
ReactDOM.render(, document.getElementById('root'));
```
> 你可以在左侧菜单选用更多组件。
### 4. 开发调试
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
```bash
$ npm start
```
### 5. 构建和部署
```bash
$ npm run build
```
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
## 兼容性
Ant Design React 支持所有的现代浏览器和 IE9+。
对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/)。
```html
```
#### IE8 note
> `[email protected]` 之后将不再支持 IE8。
IE8 需要配合使用 [[email protected]](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
另外，由于 `[email protected]` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。
> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8
## 自行构建
如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。
目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。
## 按需加载
通过 `import { Button } from 'antd';` 引入会加载 antd 下所有的模块，如果要按需加载可以通过以下的写法来引用。
```jsx
import Button from 'antd/lib/button';
```
如果你使用 babel，我们推荐使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
```jsx
import { Button } from 'antd';
```
插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
## 配置主题和字体
- [改变主题](/docs/react/customize-theme)
- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
## 小甜点
- 你可以享用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，试试用 [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/getting-started.zh-CN.md
content----> ---
order: 5
title: i18n Solution
link: //github.com/ant-design/intl-example
---
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/i18n-solution.en-US.md
content----> ---
order: 5
title: i18n 方案
link: //github.com/ant-design/intl-example
---
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/i18n-solution.zh-CN.md
content----> ---
order: 2
title: Installation
---
## Using npm to install
**We recommend using npm to install**，it not only makes development easier，but you can also take advantage of the whole ecosystem.
If using npm to install, you could use `import` or `require`.
Stable version：
[](https://www.npmjs.org/package/antd)
```bash
$ npm install antd --save
```
You can subscribe to this feed for new version notification: https://github.com/ant-design/ant-design/releases.atom
Beta version：
[](https://www.npmjs.org/package/antd)
```bash
$ npm install antd@beta --save
```
## Import in Browser
[](https://cdnjs.com/libraries/antd)
We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dist` in antd's npm package, in order to import all the components of antd directly. Also, you can use [unpkg](https://unpkg.com/).
> It's not recommended to use the already built files, as you cannot get bugfixes from the dependencies of antd.
#### stable
- https://unpkg.com/antd/dist/antd.js
- https://unpkg.com/antd/dist/antd.css
- https://unpkg.com/antd/dist/antd.min.js
- https://unpkg.com/antd/dist/antd.min.css
#### beta
- https://unpkg.com/antd@beta/dist/antd.js
- https://unpkg.com/antd@beta/dist/antd.css
- https://unpkg.com/antd@beta/dist/antd.min.js
- https://unpkg.com/antd@beta/dist/antd.min.css
> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) of how to build your own antd.js if you are using antd@<1.0.0.
## Development tool
We provide React components [Scaffold tool](https://github.com/ant-design/antd-init).
```bash
$ npm install antd-init -g
```
Inside an empty folder run `antd-init` to init.
You can explore the latest structure of scaffold [here](https://github.com/ant-design/antd-init/tree/master/boilerplates), it is a good habit to watch this repo to get the latest features.
> [More development tools](http://ant-tool.github.io/)。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/install.en-US.md
content----> ---
order: 2
title: 安装
---
## 使用 npm 安装
**我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
可以通过 npm 直接安装到项目中，使用 `import` 或 `require` 进行引用。
稳定版：
[](https://www.npmjs.org/package/antd)
```bash
$ npm install antd --save
```
你可以订阅：https://github.com/ant-design/ant-design/releases.atom 来获得稳定版发布的通知。
开发版本：
[](https://www.npmjs.org/package/antd)
```bash
$ npm install antd@beta --save
```
## 浏览器引入
[](https://cdnjs.com/libraries/antd)
我们在 npm 发布包内的 `antd/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css` 用于一次性引入所有的 antd 组件，也可以通过 [UNPKG](https://unpkg.com/) 进行下载。
> 不推荐使用构建文件，因为难以获得底层依赖模块的 bug 快速修复支持。
#### stable
- https://unpkg.com/antd/dist/antd.js
- https://unpkg.com/antd/dist/antd.css
- https://unpkg.com/antd/dist/antd.min.js
- https://unpkg.com/antd/dist/antd.min.css
#### beta
- https://unpkg.com/antd@beta/dist/antd.js
- https://unpkg.com/antd@beta/dist/antd.css
- https://unpkg.com/antd@beta/dist/antd.min.js
- https://unpkg.com/antd@beta/dist/antd.min.css
> 对于 1.0 之前的版本，这里有一个 [自行构建的例子](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) 以供参考。
## 开发工具
我们提供了 React 前端应用开发的 [脚手架工具](https://github.com/ant-design/antd-init)，可以安装到全局直接使用。
```bash
$ npm install antd-init -g
```
在空目录运行 `antd-init` 可以初始化一个 antd 的前端应用。
最新的脚手架结构可以到这里 [查看](https://github.com/ant-design/antd-init/tree/master/boilerplates)，建议持续关注更新以便获得最新的开发工程特性。
> 更多开发工具 [使用方式](http://ant-tool.github.io/)。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/install.zh-CN.md
content----> ---
order: 0
title: Ant Design of React
---
Following Ant Design specification, We develop a React UI library called `antd`, containing a set of high quality components and demos, to help building rich interactive desktop applicafions.
+
.pic-plus > * {
display: inline-block!important;
vertical-align: middle;
}
.pic-plus span {
font-size: 30px;
color: #aaa;
margin: 0 20px;
}
---
## Features
- Following Ant Design desktop specification.
- It is a set of high quality UI components and based on [React Component](http://react-component.github.io/badgeboard/).
- Provides a work flow which is based on npm, webpack, and babel, supporting ES2015 and TypeScript.
## Installation
```bash
$ npm install antd --save
```
## Usage
### Use prebuilt bundle
```jsx
import { DatePicker } from 'antd';
ReactDOM.render(, mountNode);
```
And import style manually:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### Use modularized antd
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```js
// .babelrc
{
"plugins": [["import", { libraryName: "antd", style: "css" }]]
}
```
Then you can import components from antd directly.
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'antd';
```
- Manually import
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
import 'antd/lib/date-picker/style/css'; // with style
```
## Version
- Stable: [](https://www.npmjs.org/package/antd)
- Beta: [](https://www.npmjs.org/package/antd)
## Compatibility
Modern browsers and IE9+.
> [IE8 issues](https://github.com/xcatliu/react-ie8)
## Useful Links
- [Home page](http://ant.design/)
- [UI library](/docs/react/introduce)
- [Change Log](/changelog)
- [Scaffold tool](https://github.com/dvajs/dva-cli/)
- [Development tool](http://ant-tool.github.io/)
- [React components](http://react-component.github.io/)
- [Mobile UI](http://mobile.ant.design)
- [Motion](https://motion.ant.design)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [Customize Theme](/docs/react/customize-theme)
## Who are using antd
- [Ant Financial](http://www.antgroup.com/index.htm?locale=en_US)
- [Alibaba](http://www.alibaba.com/)
- [Koubei](http://www.koubei.com/)
- [Meituan](http://www.meituan.com)
- [Didi](http://www.xiaojukeji.com/)
> If your company or product uses Ant Design, you are welcome to comment in [this issue](https://github.com/ant-design/ant-design/issues/477). Thank you!
## Contributing
Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first.
If you have any idea to improve antd, just create a [Pull Request](https://github.com/ant-design/ant-design/pulls). Also, you can also [issue](https://github.com/ant-design/ant-design/issues/new) bugs.
> Recommend to read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html), a smart question will get right answer quickly.
## Need Help?
You can ask questions while you meet problem through the following ways.
And we encourage experienced users to help those who are not familiar with `antd`.
We recommend to tag your questions with `antd` on Stack Overflow.
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)(Recommended)
2. [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/introduce.en-US.md
content----> ---
order: 0
title: Ant Design of React
---
这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
+
.pic-plus > * {
display: inline-block!important;
vertical-align: middle;
}
.pic-plus span {
font-size: 30px;
color: #aaa;
margin: 0 20px;
}
---
## 特性
- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
## 安装
```bash
$ npm install antd --save
```
## 示例
```jsx
import { DatePicker } from 'antd';
ReactDOM.render(, mountNode);
```
引入样式：
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
以下两种方法都可以达到按需加载的目的：
- `import DatePicker from 'antd/lib/date-picker'`
- 配合插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 使用 `import { DatePicker } from 'antd';`
> babel-plugin-import 支持 js 和 css 同时按需加载。
## 版本
- 稳定版：[](https://www.npmjs.org/package/antd)
- 开发版：[](https://www.npmjs.org/package/antd)
## 浏览器支持
现代浏览器和 IE9 及以上。
> [IE8 issues](https://github.com/xcatliu/react-ie8)
## 链接
- [首页](http://ant.design/)
- [组件文档](/docs/react/introduce)
- [更新日志](/changelog)
- [开发脚手架](https://github.com/dvajs/dva-cli/)
- [开发工具文档](http://ant-tool.github.io/)
- [React 基础组件](http://react-component.github.io/)
- [移动端组件](http://mobile.ant.design)
- [动效](https://motion.ant.design)
- [设计规范速查手册](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png)
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](/docs/react/customize-theme)
## 谁在使用
- [蚂蚁金服](http://www.antgroup.com/)
- [阿里巴巴](http://www.alibaba.com/)
- [口碑](http://www.koubei.com/)
- [美团](http://www.meituan.com)
- [滴滴](http://www.xiaojukeji.com/)
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
## 如何贡献
在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](https://github.com/ant-design/ant-design/issues/new)。
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)，更好的问题更容易获得帮助。
## 社区互助
如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（推荐）
2. [Segment Fault](https://segmentfault.com/t/antd)
3. [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/introduce.zh-CN.md
content----> ---
order: 3
title: Practical Projects
---
[dva](https://github.com/dvajs/dva) is a React and redux based, lightweight and elm-style framework, which supports side effects, hot module replacement, dynamic on demand, react-native, SSR. And it has been widely used in production environment.
This article will guide you to create a simple application from zero using dva and antd.
Include the following:
---
## Install dva
Install dva with npm.
```bash
$ npm install dva-cli -g
```
## Create New App
After installed dva-cli, you can have access to the `dva` command in terminal. Now, create a new application with `dva new`.
```bash
$ dva new dva-quickstart
```
This creates `dva-quickstart` directory, that contains the project directories and files, and provides development server, build script, mock service, proxy server and so on.
Then `cd` the `dva-quickstart` directory, and start the development server.
```bash
$ cd dva-quickstart
$ npm start
```
After a few seconds, you will see the following output:
```bash
proxy: load rule from proxy.config.js
proxy: listened on 8989
📦 411/411 build modules
webpack: bundle build is now finished.
```
Open http://localhost:8989 in your browser, you will see dva welcome page.
## Integrate antd
Install `antd` and `babel-plugin-import` with npm. `babel-plugin-import` is used to automatically import scripts and stylesheets from antd in demand. See [repo](https://github.com/ant-design/babel-plugin-import) 。
```bash
$ npm install antd babel-plugin-import --save
```
Edit `webpack.config.js` to integrate `babel-plugin-import`.
```diff
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: 'css',
+ }]);
```
> Notice: No need to manually restart the server, it will restart automatically after you save the `webpack.config.js`.
## Define Router
We need to write an application displaying the list of products. The first step is to create a route.
Create a route component `routes/Products.js`:
```javascript
import React from 'react';
const Products = (props) => (
List of Products
);
export default Products;
```
Add routing information to router, edit `router.js`:
```diff
+ import Products from './routes/Products';
...
+
```
Then open http://localhost:8989/#/products in your browser, you should be able to see the `
` tag defined before.
## Write UI Components
As your application grows and you notice you are sharing UI elements between multiple pages (or using them multiple times on the same page), in dva it's called reusable components.
Let's create a `ProductList` component that we can use in multiple places to show a list of products.
Create `components/ProductList.js` and typing:
```javascript
import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Actions',
render: (text, record) => {
return (
onDelete(record.id)}>
Delete
);
},
}];
return (
);
};
ProductList.proptypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
export default ProductList;
```
## Define Model
After complete the UI, we will begin processing the data and logic.
dva manages domain model with `model`, with reducers for synchronous state update, effects for async logic, and subscriptions for data source subscribe.
Let's create a model `models/products.js` and typing:
```javascript
import dva from 'dva';
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};
```
In this model:
- `namespace` represent the key on global state
- `state` is the initial value, here is an empty array
- `reducers` is equal to reducer in redux, accepting action, and update state synchronously
Then don't forget to require it in `index.js`:
```diff
// 3. Model
+ app.model(require('./models/products'));
```
## Connect
So far, we have completed a separate model and component. Then how to connect these together?
dva provides a `connect` method. If you are familiar with redux, this `connect` is from react-router.
Edit `routes/Products.js` and replace with following:
```javascript
import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
List of Products
);
};
// export default Products;
export default connect(({ products }) => ({
products,
}))(Products);
```
Finally, we need some initial data to make the application run together. Edit `index.js`:
```diff
- const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: 'dva', id: 1 },
+ { name: 'antd', id: 2 },
+ ],
+ },
+ });
```
Refresh your browser, you should see the following result:
## Build
Now that we've written our application and verified that it works in development, it's time to get it ready to deploy to our users. To do so, run the following command:
```bash
$ npm run build
```
After a few seconds, the output should be as follows:
```bash
Child
Time: 14008ms
Asset Size Chunks Chunk Names
index.html 255 bytes [emitted]
common.js 1.18 kB 0 [emitted] common
index.js 504 kB 1, 0 [emitted] index
index.css 127 kB 1, 0 [emitted] index
```
The `build` command packages up all of the assets that make up your application —— JavaScript, templates, CSS, web fonts, images, and more. Then you can find these files in the `dist /` directory.
## What's Next
We have completed a simple application, but you may still have lots of questions, such as:
- How to dealing with async logic
- How to load initial data elegantly
- How to handle onError globally and locally
- How to load Routes and Models on demand
- How to implement HMR
- How to mock data
- and so on...
You can:
- Visit [dva official website](https://github.com/dvajs/dva).
- View all the [API](https://github.com/dvajs/dva#api).
- View [tutorial](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md), complete a medium application step by step.
- View examples, such as [dva version of hackernews](https://github.com/dvajs/dva-hackernews).
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/practical-projects.en-US.md
content----> ---
order: 3
title: 项目实战
---
[dva](https://github.com/dvajs/dva) 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。
本文会引导你使用 dva 和 antd 从 0 开始创建一个简单应用。
会包含以下内容：
---
## 安装 dva
通过 npm 安装 dva 。
```bash
$ npm install dva-cli -g
```
## 创建新应用
安装完 dva-cli 之后，就可以在 terminal 里访问到 `dva` 命令。现在，你可以通过 `dva new` 创建新应用。
```bash
$ dva new dva-quickstart
```
这会创建 `dva-quickstart` 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
然后我们 `cd` 进入 `dva-quickstart` 目录，并启动开发服务器：
```bash
$ cd dva-quickstart
$ npm start
```
几秒钟后，你会看到以下输出：
```bash
proxy: load rule from proxy.config.js
proxy: listened on 8989
📦 411/411 build modules
webpack: bundle build is now finished.
```
在浏览器里打开 http://localhost:8989 ，你会看到 dva 的欢迎界面。
## 使用 antd
通过 npm 安装 `antd` 和 `babel-plugin-import` 。`babel-plugin-import` 是用来按需加载 antd 的脚本和样式的，详见 [repo](https://github.com/ant-design/babel-plugin-import) 。
```bash
$ npm install antd babel-plugin-import --save
```
编辑 `webpack.config.js`，使 `babel-plugin-import` 插件生效。
```diff
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: 'css',
+ }]);
```
> 注：这里不需要手动重启开发服务器，保存 `webpack.config.js` 后会自动重启。
## 定义路由
我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。
新建 route component `routes/Products.js`，内容如下：
```javascript
import React from 'react';
const Products = (props) => (
List of Products
);
export default Products;
```
添加路由信息到路由表，编辑 `router.js` :
```diff
+ import Products from './routes/Products';
...
+
```
然后在浏览器里打开 http://localhost:8989/#/products ，你应该能看到前面定义的 `
` 标签。
## 编写 UI Component
随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。
我们来编写一个 `ProductList` component，这样就能在不同的地方显示产品列表了。
新建 `components/ProductList.js` 文件：
```javascript
import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Actions',
render: (text, record) => {
return (
onDelete(record.id)}>
Delete
);
},
}];
return (
);
};
ProductList.propTypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
export default ProductList;
```
## 定义 Model
完成 UI 后，现在开始处理数据和逻辑。
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
新建 model `models/products.js` ：
```javascript
import dva from 'dva';
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};
```
这个 model 里：
- `namespace` 表示在全局 state 上的 key
- `state` 是初始值，在这里是空数组
- `reducers` 等同于 redux 里的 reducer，接收 action，同步更新 state
然后别忘记在 `index.js` 里载入他：
```diff
// 3. Model
+ app.model(require('./models/products'));
```
## connect 起来
到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?
dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。
编辑 `routes/Products.js`，替换为以下内容：
```javascript
import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
List of Products
);
};
// export default Products;
export default connect(({ products }) => ({
products,
}))(Products);
```
最后，我们还需要一些初始数据让这个应用 run 起来。编辑 `index.js`：
```diff
- const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: 'dva', id: 1 },
+ { name: 'antd', id: 2 },
+ ],
+ },
+ });
```
刷新浏览器，应该能看到以下效果：
## 构建应用
完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：
```bash
$ npm run build
```
几秒后，输出应该如下：
```bash
Child
Time: 14008ms
Asset Size Chunks Chunk Names
index.html 255 bytes [emitted]
common.js 1.18 kB 0 [emitted] common
index.js 504 kB 1, 0 [emitted] index
index.css 127 kB 1, 0 [emitted] index
```
`build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 `dist/` 目录下找到这些文件。
## 下一步
我们已经完成了一个简单应用，你可能还有很多疑问，比如：
- 如何处理异步请求
- 如何优雅地加载初始数据
- 如何统一处理出错，以及特定操作的出错
- 如何动态加载路由和 Model，以加速页面载入速度
- 如何实现 hmr
- 如何 mock 数据
- 等等
你可以：
- 访问 [dva 官网](https://github.com/dvajs/dva)。
- 查看所有 [API](https://github.com/dvajs/dva#api)。
- [教程](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md)，一步步完成一个中型应用。
- 看看 [dva 版 hackernews](https://github.com/dvajs/dva-hackernews) 是 [如何实现](https://github.com/sorrycc/blog/issues/9) 的。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/react/practical-projects.zh-CN.md
content----> ---
order: 0
title: Download
---
Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
Ant Design Library v2.0.1
A powerful Axure library of Ant Design
Sketch Template
Make your design document like real
Ant UX
A series prototypes that help creating application structure and user flow
Web Font
Icon font package for your local reference
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/resource/download.en-US.md
content----> ---
order: 0
title: 资源下载
---
这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
Ant Design Library v2.0.1
一套强大的 Ant Design 的 Axure 部件库
Sketch Template
精心整理的组件设计素材
Ant UX
一套页面逻辑原型库，帮你梳理页面逻辑
Web Font
网络字体图标的本地文件包
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/resource/download.zh-CN.md
content----> ---
order: 2
link: //github.com/ant-design/ant-design
title: GitHub
---
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/resource/github.md
content----> ---
order: 1
title: Reference
---
Please find below the books that inspired us, saved our time and helped us to overcome difficulties when designing components and patterns. If you want to know more about UI design, we recommend you these awesome books.
About Face
Author: Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel
Publisher: Wiley
Designing Web Interfaces
Author: Bill Scott, Theresa Neil
Publisher: O'Reilly Media
Designing Interfaces
Author: Jenifer Tidwell
Publisher: O'Reilly Media
Non-Designer's Design Book
Author: Robin Williams
Publisher: Peachpit Press
The Design of Everyday Things
Author: Don Norman
Publisher: Basic Books, A Member of the Perseus Books Group
Emotional Design
Author: Don Norman
Publisher: Basic Books, A Member of the Perseus Books Group
Web Form Design
Author: Luke Wroblewski
Publisher: Rosenfeld Media
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/resource/reference.en-US.md
content----> ---
order: 1
title: 文献素材
---
在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
About Face 4
作者: Alan.cooper
出版社: 电子工业出版社
Web 界面设计
作者: Bill Scott / Theresa Neil
出版社: 电子工业出版社
界面设计模式
作者: Tidwell,J.
出版社: 电子工业出版社
写给大家看的设计书
作者: Robin Williams
出版社: 人民邮电出版社
设计心理学 1
作者: 唐纳德•A•诺曼
出版社: 中信出版社
设计心理学 3
作者: 唐纳德•A•诺曼
出版社: 中信出版社
Web 表单设计：点石成金的艺术
作者: Luke Wroblewski
出版社: 清华大学出版社
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/resource/reference.zh-CN.md
content----> ---
category: Principles
order: 2
title: Alignment
---
As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users’ perception, also delivers the information to users in a more smooth way.
> ** Gestalt psychology or gestaltism（German：Gestalttheorie）** ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.『The whole is other than the sum of the parts.』--Quote from Wikipedia
---
## Text Alignment
If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed.
---
## Form Alignment
Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up.
More ways of aligning，please visit [(/docs/pattern/form#对齐方式)](/docs/pattern/form#对齐方式)。
---
## Numbers Alignment
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/alignment.en-US.md
content----> ---
category: 十大原则
order: 2
title: 对齐
---
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
---
## 文案类对齐
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
---
## 表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
更多对齐方式，请查看[『模式／表单／规格／对齐方式』](/docs/pattern/form#对齐方式)。
---
## 数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/alignment.zh-CN.md
content----> ---
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 2
title:
zh-CN: 色彩
en-US: Colors
---
## 有意义的色彩
色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。
## Ant Design Colors
Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。
`````__react
const Palette = React.createClass({
render() {
const color = this.props.color;
return
{color.colors.map(function(color) {
return ();
})}
{color.title}
{color.description}
;
}
});
const ExtendPalettes = React.createClass({
render() {
const colors = [
{
'title': 'Primary Color',
'description': '尽管同一种颜色传达的含义会因人而异，受到文化和地域的影响。但颜色还是可以提取出一些共通的特性，例如暖色系的红、橙、黄通常用于象征活力，激情，积极；而冷色系的绿、蓝、紫通常给人感觉是安全、稳定、专业。',
'colors': [
"#E01515", "#FF6600", "#FAC450",
"#E4249B", "#CCCCCC", "#5FBC29",
"#582DAA", "#0097DA", "#01B3CA"
]
},
{
'title': 'Grey #CCCCCC',
'description': '灰色是中性化的颜色，通常传递出来的感觉是沉稳，在配色心理学中描述 “专业化、系统化”的词条中灰色的使用占了较高的比例。建议可用于字体颜色的选择以及界面中大面积背景的底色搭配。',
'colors': [
"#FFFFFF", "#FCFCFC", "#ECECEC",
"#989898", "#CCCCCC", "#D9D9D9",
"#666666", "#323232", "#000000"
]
},
{
'title': 'Red #E01515',
'description': '红色是具有强烈情感因素的颜色，通常红色传递的心理暗示有激情、欲望、战争以及危险。考虑到红色的特性，在后台系统的设计中建议作为辅助色来突出元素特性或是强化信息，常见的有图表元素，状态，危险信号，错误提示等。',
'colors': [
"#F9CCD6", "#FFA5B4", "#FA727D",
"#BB0606", "#E01515", "#FF3858",
"#881414", "#4E1212", "#260404"
]
},
{
'title': 'Green #60BE29',
'description': '绿色是非常务实的颜色，它吸收了蓝色的沉稳同时具备黄色的活力。绿色蕴含着和平、生命、希望、轻松、富饶的含义。在我们的设计实例中绿色可用来传达任务完成、健康状态以及安全感等状态。',
'colors': [
"#E2F582", "#D0EE9C", "#A6E33C",
"#39A30E", "#60BE29", "#70D445",
"#18791B", "#1F4A12", "#102803"
]
},
{
'title': 'Blue #00A0E9',
'description': '这里的蓝色沿用的是蚂蚁金服的品牌色，深蓝色的运用可以传递出可靠和稳定的情绪，而浅蓝色系则更为友好和清新，同时还代表了科技感与想象力。在很多专业类、管理类的后台系统设计中蓝色系常常会被选择作为设计的主色来使用。',
'colors': [
"#CCE4F6", "#95CCF5", "#6AC2F5",
"#1D80D3", "#00A0E9", "#2DB7F5",
"#1F5AA3", "#0B366A", "#08172F"
]
},
{
'title': 'Magenta #E9259E',
'description': '玫红色是较为正面的色彩，含有鼓励、友好、活力的意义。但考虑到洋红色的特性，建议作为辅助色来使用。',
'colors': [
"#F8C5ED", "#F5A6D3", "#F387C0",
"#BC0F69", "#E9259E", "#F056AD",
"#890B4C", "#5E0B36", "#230213"
]
},
{
'title': 'Orange #FF6100',
'description': '介于红色和黄色之间，传达愉悦，创造力，热情，吸引力。但橙色又不如红色那样具侵略性，同时又能够很好的引起视觉的注意力。可以作为设计的主色也可以用于辅助色。但大面积使用时需要慎重。',
'colors': [
"#F1DDBD", "#FBCA72", "#FDAC23",
"#CE630F", "#FF6100", "#FF8A0C",
"#8B4A04", "#523A13", "#341F0B"
]
},
{
'title': 'Purple #5E30B5',
'description': '紫色是赤黄黄绿青蓝紫中最后一名，也是人类可见光谱中波长最短的光，有华贵、信仰、神秘等含义，同时是红与蓝的结合体，传达中性、中立等信息。在界面设计中建议作为辅助颜色使用。',
'colors': [
"#E8DFFA", "#B196EE", "#8867D2",
"#581CB6", "#5E30B5", "#7A43E2",
"#3F187D", "#2B1845", "#0F061B"
]
},
{
'title': 'Yellow #FAC450',
'description': '黄色传达了愉悦，活力，创造力等正面的情绪，是具正能量的色彩。在具体设计中黄色常常于表达警示性的信息。建议作为辅助色来使用。',
'colors': [
"#FAF4B2", "#FDF161", "#FDE023",
"#D9B416", "#FAC450", "#F7CD07",
"#B48513", "#6B4C01", "#241A06"
]
},
{
'title': 'Cyan #01BAD2',
'description': '介于蓝色和绿色之间，带有专业、冷静、从容的心理暗示。在体验专业化和结构化的设计中常常被用到，可以作为系统主色来使用。',
'colors': [
"#E0F7FA", "#B2EBF2", "#80DEEA",
"#00ACC2", "#01BAD2", "#26C6DA",
"#00708F", "#014B62", "#031213"
]
}
];
return
{colors.map((color, i) => {
return ;
})}
;
}
});
ReactDOM.render(, mountNode);
`````
## 色彩和交互
设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 `n+5%` 的规律递增的方式来实现。以下图为例，当鼠标 hover 某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。
## 色彩识别
合适的色彩对比为信息传达加分，同时也应放考虑到有颜色识别障碍人群的需求。我们将每种主色衍生出来的颜色进行了打标，在考虑对比颜色的选择时建议两种颜色对应标签数值的差要大于等于 5。
## 色彩换算工具
> 正数为变淡 `tint` ，负数为加深 `shade`。
`````__react
const Values = require('values.js');
const CopyToClipboard = require('react-copy-to-clipboard');
const classNames = require('classnames');
const antd = require('antd');
const Button = antd.Button;
const InputNumber = antd.InputNumber;
const Slider = antd.Slider;
const Tooltip = antd.Tooltip;
const TintShadeTool = React.createClass({
getInitialState() {
return {
result: '#2db7f5',
color: '#2db7f5',
justCopied: false,
darkBackground: false,
value: 80
};
},
handleChangeColor(e) {
this.setState({
color: e.target.value
}, this.calculate);
},
handleChangeValue(value) {
this.setState({
value: value
}, this.calculate);
},
componentDidMount() {
this.calculate();
},
calculate() {
if (this.state.value === 0) {
this.setState({
result: this.state.color
});
return;
}
const tintOrShade = this.state.value > 0 ? 'tint' : 'shade';
const c = new Values(this.state.color);
const resultColor = c[tintOrShade](Math.abs(this.state.value));
this.setState({
result: '#' + resultColor.hex,
darkBackground: resultColor.getBrightness() < 50
});
},
copySuccess(e) {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
this.setState({ justCopied: false });
}, 1000);
});
},
render() {
const marks = {
'-100': '加黑',
'0': '原色',
'100': '加白'
};
const className = classNames({
'color-block': true,
copied: this.state.justCopied,
dark: this.state.darkBackground,
});
return
{this.state.result}
%
;
}
});
ReactDOM.render(, mountNode);
`````
Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。
less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和 `shade(#2db7f5, 80%)` 的语法。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/colors.md
content----> ---
category: Principles
order: 3
title: Contrast
---
Contrast is one of the effective ways to add visual interest to your page, and to create an organizational hierarchy among different element that aid user in finding the information quickly.
> Note: The important rule for contrast to be effective, it must be strong. Don't be wimp.
---
## The Contrast of major and minor relationship
In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.
---
## Contrast of whole and part
Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic.
---
## Contrast of the state relation
Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better
The forms we usually see include 『static contrast』 and 『dynamic contrast』.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/contrast.en-US.md
content----> ---
category: 十大原则
order: 3
title: 对比
---
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
> 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
---
## 主次关系对比
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
> 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
---
## 总分关系对比
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
---
## 状态关系对比
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
常见类型有『静态对比』、『动态对比』。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/contrast.zh-CN.md
content----> ---
category: Principles
order: 5
title: Make it Direct
---
As Alan Cooper states：『Where there is output, let there be input』. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.
---
## In-Page Editing
Single-Field Inline Edit
If 『readability』 is more important than 『editability』, 『click to edit』 can be used.
If the priority is given to 『readability』 and the 『editability』 of operation lines need to be highlighted at the same time, 『text link/icon edit』can be used.
Multi-Field Inline Edit
>Note：In『Multi-Field Inline Edit』，there are huge different between the content and required field，So it is more needed to use the [『Explain What Just Happened』](../spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
More mode of 『In-page Edit』 ，please visit [『Mode／Table／Interaction』](/docs/pattern/table#模块编辑)
---
## Drag and Drop
Drag and Drop List
Drag and Drop can only limited in one dimension（upper/down or left/right）
Drag and Drop picture/file
Drag and Drop Object（Coming Soon）
Drag and Drop Multi-Objects（Coming Soon）
---
Direct Selection（Coming Soon）
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/direct.en-US.md
content----> ---
category: 十大原则
order: 5
title: 直截了当
---
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
---
## 页内编辑
单字段行内编辑
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
多字段行内编辑
>注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../spec/transition#解释刚刚发生了什么)来消除这种视觉影响。
更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](/docs/pattern/table#模块编辑)中的内容。
---
## 利用拖放
拖放列表
只能限制在一个维度（上/下或者左/右）进行拖放。
拖放图片/文件
拖放对象（敬请期待）
拖放多个对象（敬请期待）
---
直接选择（敬请期待）
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/direct.zh-CN.md
content----> ---
order: 1
title:
zh-CN: 三大特性
en-US: Features
---
与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
微小
致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。
确定
制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
幸福
不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。
.features {
padding: 0 40px;
font-size: 12px;
}
.features h5 {
font-size: 14px;
margin-top: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.features {
width: 100%;
text-align: center;
margin-bottom: 20px;;
}
.features img {
width: 80%;
}
}
---
## 微小
### 微创新
『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。
### 集成创新
选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。
---
## 确定
### 面向对象的方法
探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。
### 通俗而科学的设计原则
详见[『十大原则』](/docs/spec/principle)。
---
## 幸福
### 用户的幸福
漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应；
良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应；
自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。
### 设计者的幸福
从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。
从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/feature.md
content----> ---
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 0
title:
zh-CN: 字体
en-US: Font
---
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
---
## 字体家族
- 中文字体族：
- 英文文字体族：
字体家族 css 代码如下：
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
## 字体使用规范
主标题
我是标题
加粗
#666
16px
次级标题
我是标题
加粗
#666
14px
小标题
我是标题
加粗
#666
12px
正文
我是正文
#666
12px
辅助文字
我是辅助文字
#999
12px
失效文字
我是失效文字
#ccc
12px
Main Head
I am example text
bold
#666
16px
Sub Head
I am example text
bold
#666
14px
Small Head
I am example text
bold
#666
12px
Text
I am example text
#666
12px
Help Text
I am example text
#999
12px
Disabled Text
I am example text
#ccc
12px
.font-type {
margin: 20px 0;
overflow: hidden;
font-size: 12px;
}
.font-type h1,
.font-type h2,
.font-type h3,
.font-type p {
margin: 0;
color: #666;
}
.font-type > * {
display: inline-block;
}
.font-title {
font-size: 14px;
width: 100px;
}
.font-type h1,
.font-type h2,
.font-type h3,
.font-type .font-text {
width: 300px;
}
.font-type h1 span,
.font-type h2 span,
.font-type h3 span,
.font-type .font-text span {
margin-right: 0.6em;
}
.font-type h1 {
font-size: 16px;
}
.font-type h2 {
font-size: 14px;
}
.font-type h3 {
font-size: 12px;
}
.disabled-text .font-text {
color: #ccc;
}
.help-text .font-text {
color: #999;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/font.md
content----> ---
order: 0
title: Ant Design
---
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
Ant Design which is specially created for internal desktop applications, is committed to improving the experience of users and product designers. User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred. Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of background applications and products.
---
## Guidelines and Resources
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- [Principles](/docs/spec/principle)
- [Patterns](/docs/pattern/navigation)
- [Resource Download](/docs/resource/download)
## Front-end Implementation
[React](http://facebook.github.io/react/) is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome.
- [Ant Design of React](/docs/react/introduce) (official implementation)
-
-
-
-
-
## Who's using Ant Design
- [Ant Financial](http://www.antgroup.com/index.htm?locale=en_US)
- [Alibaba](http://www.alibaba.com/)
- [Koubei](http://www.koubei.com/)
- [Meituan](http://www.meituan.com)
- [Didi](http://www.xiaojukeji.com/)
> If your company or products use Ant Design, welcome to click [here](https://github.com/ant-design/ant-design/issues/477) to leave a message.
## How to Contribute
Welcome to contribute to Ant Design on Github. If you have any suggestions for improvement, questions,or concerns, do not hesitate to advice us [here](https://github.com/ant-design/ant-design/issues).
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/introduce.en-US.md
content----> ---
order: 0
title: Ant Design
---
在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
---
## 设计资源
我们提供完善的设计原则、最佳实践和设计资源文件（Sketch 和 Axure），来帮助业务快速设计出高质量的产品原型。
- [设计原则](/docs/spec/principle)
- [设计模式](/docs/pattern/navigation)
- [设计资源](/docs/resource/download)
## 前端实现
我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。
- [Ant Design of React](/docs/react/introduce)（官方实现）
-
-
-
-
-
## 谁在使用
- [蚂蚁金服](http://www.antgroup.com/)
- [阿里巴巴](http://www.alibaba.com/)
- [口碑](http://www.koubei.com/)
- [美团](http://www.meituan.com)
- [滴滴](http://www.xiaojukeji.com/)
> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
## 如何贡献
我们欢迎任何形式的贡献，有任何建议或意见，请给我们 [提问](https://github.com/ant-design/ant-design/issues)。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/introduce.zh-CN.md
content----> ---
category: Principles
order: 8
title: Provide an Invitation
---
A common problem with many of these rich interactions (e.g. Drag and Drop, Inline Editing, and Contextual Tools) is their lack of discoverability. Providing an invitation to the user is one of the keys to successful interactive interfaces.
Invitations are the prompts and cues that lead users through an interaction. They often include just-in-time tips or visual affordances that hint at what will happen next in the interface.
> ** Signifiers ** are signals, communication devices. These signs tell you about the possible actions; what to do, and where to do it. Signifiers are often visible, audible or tangible, from the Design of Everyday Things.
> ** Affordances ** are the relationships (read: possible actions) between an object and an entity (most often a person). The presence of an affordance is determined by the properties of the object and of the abilities of the entity who's interacting with the object, from the Design of Everyday Things.
---
## Static Invitations
By providing cues for interaction directly on the page we can statically indicate to the user the expected interface behavior. Static Invitations provide cues directly on the page.
Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation.
Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction.
>Note that make Tour Invitations short and simple, easy to exit, and clear to restart.
---
## Dynamic Invitations
Dynamic Invitations engage users at the point of the interaction and guide them through the next step of interaction.
Hover Invitation: Provide an invitation during mouse hover.
Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.
More Content Invitation: Indicate that there is more content on the page.
Affordance Invitation (coming soon)
Drag and Drop Invitation (coming soon)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/invitation.en-US.md
content----> ---
category: 十大原则
order: 8
title: 提供邀请
---
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
> ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
---
## 静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。
常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
>注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。
---
## 动态邀请
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
悬停邀请：在鼠标悬停期间提供邀请。
推论邀请：用于交互期间，合理推断用户可能产生的需求。
更多内容邀请：用于邀请用户查看更多内容。
预期功能邀请 (敬请期待)
拖放邀请 (敬请期待)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/invitation.zh-CN.md
content----> ---
category: Principles
order: 6
title: Keep it Lightweight
---
Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user’s interaction. Putting tools in context makes for lightweight interaction.
> 
>** Fitts's Law **: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.
---
## Always-Visible Tools
If an action is critical, expose it directly in the interface and keep it always visible.
---
## Hover-Reveal Tools
Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.
---
## Toggle-Reveal Tools
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
---
## Interaction in Context
If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise.
Some relative knowledge of [Providing an Invitation](/docs/spec/invitation) can also be applied.
---
## Visible Area ≠ Clickable Area
The clickable area of hypertext is affected by the length of the string in a cell. The while cell can be set to a hot spot in order to be triggered easier.
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
>Note that it is especially suited for Mobile.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/lightweight.en-US.md
content----> ---
category: 十大原则
order: 6
title: 简化交互
---
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
> ** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
---
## 实时可见工具
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
---
## 悬停即现工具
如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
---
## 开关显示工具
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
---
## 交互中的工具
如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
此处也可以运用[『提供邀请』](/docs/spec/invitation) 相关的知识点。
---
## 可视区域 ≠ 可点击区域
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
>注：在移动端尤其适用。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/lightweight.zh-CN.md
content----> ---
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 5
title:
zh-CN: 组件动画
en-US: Motion
---
依据『巧用过渡』的设计原则，Ant Design 提供了一些预设的组件动画和缓动函数。更多动画可参考 [Ant Motion](https://motion.ant.design/)
> 示例延长了动画时长以便展示。
`````__react
const cssAnimation = require('css-animation');
const antd = require('antd');
const Select = antd.Select;
const Option = Select.Option;
const OptGroup = Select.OptGroup;
let motions = [];
motions = motions.concat([[{
name: '淡入',
value: 'fade',
direction: 'enter',
type: '渐隐'
}, {
name: '淡出',
value: 'fade',
direction: 'leave',
type: '渐隐'
}]]);
motions = motions.concat([[{
name: '中心放大',
value: 'zoom',
direction: 'enter',
type: '缩放'
}, {
name: '中心缩小',
value: 'zoom',
direction: 'leave',
type: '缩放'
}, {
name: '上方放大',
value: 'zoom-up',
direction: 'enter',
type: '缩放'
}, {
name: '上方缩小',
value: 'zoom-up',
direction: 'leave',
type: '缩放'
}, {
name: '下方放大',
value: 'zoom-down',
direction: 'enter',
type: '缩放'
}, {
name: '下方缩小',
value: 'zoom-down',
direction: 'leave',
type: '缩放'
}, {
name: '左方放大',
value: 'zoom-left',
direction: 'enter',
type: '缩放'
}, {
name: '左方缩小',
value: 'zoom-left',
direction: 'leave',
type: '缩放'
}, {
name: '右方放大',
value: 'zoom-right',
direction: 'enter',
type: '缩放'
}, {
name: '右方缩小',
value: 'zoom-right',
direction: 'leave',
type: '缩放'
}]]);
motions = motions.concat([[{
name: '上方滑入',
value: 'move-up',
direction: 'enter',
type: '移动'
}, {
name: '上方滑出',
value: 'move-up',
direction: 'leave',
type: '移动'
}, {
name: '下方滑入',
value: 'move-down',
direction: 'enter',
type: '移动'
}, {
name: '下方滑出',
value: 'move-down',
direction: 'leave',
type: '移动'
}, {
name: '左方滑入',
value: 'move-left',
direction: 'enter',
type: '移动'
}, {
name: '左方滑出',
value: 'move-left',
direction: 'leave',
type: '移动'
}, {
name: '右方滑入',
value: 'move-right',
direction: 'enter',
type: '移动'
}, {
name: '右方滑出',
value: 'move-right',
direction: 'leave',
type: '移动'
}]]);
motions = motions.concat([[{
name: '上方展开',
value: 'slide-up',
direction: 'enter',
type: '伸缩'
}, {
name: '上方缩回',
value: 'slide-up',
direction: 'leave',
type: '伸缩'
}, {
name: '下方展开',
value: 'slide-down',
direction: 'enter',
type: '伸缩'
}, {
name: '下方缩回',
value: 'slide-down',
direction: 'leave',
type: '伸缩'
}, {
name: '左方展开',
value: 'slide-left',
direction: 'enter',
type: '伸缩'
}, {
name: '左方缩回',
value: 'slide-left',
direction: 'leave',
type: '伸缩'
}, {
name: '右方展开',
value: 'slide-right',
direction: 'enter',
type: '伸缩'
}, {
name: '右方缩回',
value: 'slide-right',
direction: 'leave',
type: '伸缩'
}]]);
motions = motions.concat([[{
name: '摇摆',
value: 'swing',
direction: 'enter',
type: '其他'
}]]);
var leave = '-leave';
var Test = React.createClass({
handleChange(e) {
var value = e;
if (value) {
this.demoNode.style.visibility = '';
cssAnimation(this.demoNode, value, () => {
if (value.slice(-leave.length) === leave) {
this.demoNode.style.visibility = 'hidden';
}
});
}
},
componentDidMount() {
this.demoNode = ReactDOM.findDOMNode(this.refs.demo);
},
render() {
const options = [请选择预设动画].concat(motions.map(function (m, groupIndex) {
const opts = m.map(function (m2, optIndex) {
return {m2.name + " " + m2.value}
});
return {opts};
}));
return
{options}
;
}
});
ReactDOM.render(, mountNode);
`````
## 组件动画
| 组件 | 中文名 | 采用动画 |
|--------------|--------------------|-------------------------------------------------|
| Popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
| Popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
| Tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
| Modal | 弹出框 | `zoom` |
| Badge | 徽标数 | `zoom` |
| message | 信息提示条 | `move-up` |
| notification | 通知框 | `move-right` & `slide-up` |
| Dropdown | 下拉菜单 | `slide-up` |
| Select | 选择框 | `slide-up` |
| Cascader | 级联选择框 | `slide-up` |
| TreeSelect | 树选择框 | `slide-up` |
| DatePicker | 日期选择框 | `slide-up` |
| TatePicker | 日期选择框 | `slide-up` |
| Alert | 警告提示 | `slide-up` |
| Menu | 导航菜单 | `slide-up` |
在 React 的前端实现中，可以使用 [rc-animate](https://github.com/react-component/animate) 的 [transitionName](http://react-component.github.io/animate/examples/simple.html) 属性来给任意元素指定动画。
## 缓动函数
> `move@enter` 表示 `移动@进入`。
| 名称 | 参数 | 说明 | 应用动画 |
| -------------------|------------------------------------------|--------------------|------------|
| @ease-out | `cubic-bezier(0.215,0.61,0.355,1);` | 默认后缓动 | |
| @ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);` | 默认前缓动 | |
| @ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` | 默认前后缓动 | |
| @ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` | 结束回动 | |
| @ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` | 开始回动 | |
| @ease-in-out-back | `cubic-bezier(0.68,-0.55,0.27,1.55);` | 前后回动 | |
| @ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` | 圆形后缓动 | `move@enter` `zoom@enter` |
| @ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` | 圆形前缓动 | `move@leave` |
| @ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` | 圆形前后缓动 | `zoom@leave` |
| @ease-out-quint | `cubic-bezier(0.23, 1, 0.32, 1);` | quint 后缓动 | `slide@enter` |
| @ease-in-quint | `cubic-bezier(0.755, 0.05, 0.855, 0.06);`| quint 前缓动 | `slide@leave` |
| @ease-in-out-quint | `cubic-bezier(0.86, 0, 0.07, 1);` | quint 前后缓动 | |
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/motion.md
content----> ---
category: Principles
order: 0
title: Introduction
---
“It is more difficult to find good design than bad ones. ” Because good design are so natural, it can help users to easily meet the targets, so that the users are not aware of the existence of good design.
After referring to the summary and reasoning of design principles from The Non-Designer’s Design Book” and “Designing Web Interfaces”, and combining with our practice and understanding of the team, we developed the following ten principles, which provide specific criteria and enlightenment of the solutions to problem for designers.
> Note: the design principle is the abstraction and summary of representational design. However, users’ perception of the entire product is from global aspect to local aspect. So it is not desirable to ignore the full picture and only use partial principles. For the design principles, designers should learn them rationally, and then abandon them bravely.
---
Non-Designer's Design Book
Author: Robin Williams
Publisher: Peachpit Press
Designing Web Interfaces
Author: Bill Scott, Theresa Neil
Publisher: O'Reilly Media
#### Ant Design Principles
- [Proximity](/docs/spec/proximity)
- [Alignment](/docs/spec/alignment)
- [Contrast](/docs/spec/contrast)
- [Repetition](/docs/spec/repetition)
- [Make it Direct](/docs/spec/direct)
- [Keep it Lightweight](/docs/spec/lightweight)
- [Stay on the Page](/docs/spec/stay)
- [Provide Invitation](/docs/spec/invitation)
- [Use Transition](/docs/spec/transition)
- [React Immediately](/docs/spec/reaction)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/principle.en-US.md
content----> ---
category: 十大原则
order: 0
title: 引言
---
『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。
> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
---
#### Ant Design 十大设计原则
- [亲密性 Proximity](/docs/spec/proximity)
- [对齐 Alignment](/docs/spec/alignment)
- [对比 Contrast](/docs/spec/contrast)
- [重复 Repetition](/docs/spec/repetition)
- [直截了当 Make it Direct](/docs/spec/direct)
- [简化交互 Keep it Lightweight](/docs/spec/lightweight)
- [足不出户 Stay on the Page](/docs/spec/stay)
- [提供邀请 Provide Invitation](/docs/spec/invitation)
- [巧用过渡 Use Transition](/docs/spec/transition)
- [即时反应 React Immediately](/docs/spec/reaction)
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/principle.zh-CN.md
content----> ---
category: Principles
order: 1
title: Proximity
---
When several items are in close proximity to each other, they become one visual unit rather than several separate units. Otherwise, their distance should be larger and look more like several visual units. The basic purpose of proximity is to organize. To give an apparent view of the page structure and the hierarchy of information to users.
---
## The relation of vertical spacing
Divide the hierarchy of information through three formats:『small spacing』, 『middle spacing』and『large spacing』
In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 『basic spacing』, or adding elements.
> Note: in Ant Design, y=8+8*n, among which，n>=0，y stands for the vertical spacing and 8 represents 『basic spacing』.
---
## Relationship of horizontal spacing
To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout.
In the inner of a component, the horizontal spacing of elements should differ too.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/proximity.en-US.md
content----> ---
category: 十大原则
order: 1
title: 亲密性
---
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
---
## 纵向间距关系
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。
---
## 横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
在一个组件内部，元素的横向间距也应该有所不同。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/proximity.zh-CN.md
content----> ---
category: Principles
order: 10
title: React Immediately
---
Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user’s action.
While we can’t literally extend Newton’s law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded.
> ** Newton’s Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
---
## Lookup Patterns
Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed.
Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category.
Live Suggest: Live Suggest provides real-time search term suggestions for creating a search.
Refining Search: Refining Search provides a set of live filters that allow the search results to be tuned in real time. Learn more on [Pattern/Advanced Search](/docs/pattern/advanced-search).
---
## Live Suggest
Live Preview: A Live Preview gives the users a glimpse beforehand of how the application will interpret their input once submitted.
>Note: An ounce of prevention is worth a pound of cure. Use Live Previews to prevent errors.
Progressive Disclosure: When users are faced with a series of steps, it is often best to provide hints only when they are needed, instead of cluttering the interface by displaying all the hints at once. Learn more cases on [Stay on the Page/Progressive Disclosure](/docs/spec/stay#Process-Flows)。
Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed respectively according to the frequency and importance of operation.
Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh.
Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/reaction.en-US.md
content----> ---
category: 十大原则
order: 10
title: 即时反应
---
『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
> ** 牛顿第三定律 ** ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
---
## 查询模式
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。
根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式／高级搜索』](/docs/pattern/advanced-search)。
---
## 反馈模式
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
>注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。
渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](/docs/spec/stay#流程处理)。
进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。
常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
定时刷新：无需用户介入，定时展示新内容。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/reaction.zh-CN.md
content----> ---
category: Principles
order: 4
title: Repetition
---
The same elements keep repeating in the whole interface, which not only could lower the user’s learning cost effectively, but also help user recognize the relevance between these elements.
---
## Repetitive elements
The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/repetition.en-US.md
content----> ---
category: 十大原则
order: 4
title: 重复
---
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
---
## 重复元素
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/repetition.zh-CN.md
content----> ---
category: Principles
order: 6
title: Stay on the Page
---
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow.
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention，from the term of Change blindness, Wikipedia.
> ** Flow**, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity, from the term of Flow, Wikipedia
---
## Overlays
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.
> Note that when a mouseover event occurs to trigger the Detail Overlay, 0.5-second delay needs to be added, and when the mouse is out, the overlay needs to be closed immediately.
Input Overlay: Let the user enter small amounts of text on the overlay.
---
## Inlays
List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
Detail Inlay (coming soon)
Tabs: Provides additional panels of information accessible by tab controls.
---
## Virtual Pages
In the process of interaction design, Overlays allow you to bring additional interactions or content in a layer above the cur- rent page. Inlays allow you to do this within the page itself. However, another powerful approach to keeping users engaged on the current page is to create a virtual page. That is to say, we create the illusion of a larger virtual page.
Virtual Scrolling and Pagination, more on [Patterns／Lists／Show Long Lists](/docs/pattern/list#显示长列表)
Carousel, more on [Patterns／Lists／Show Images](/docs/pattern/list#显示图片)
Flexible User Interface (coming soon)
---
## Process Flows
It has long been common practice on the Web to turn each step into a separate page. While this may be the simplest way break down the problem, it may not lead to the best solution. For some Process Flows it makes sense to keep the user on the same page throughout the process.
Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
Dialog Overlay Process: Any page switch is an interruption to the user’s mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/stay.en-US.md
content----> ---
category: 十大原则
order: 6
title: 足不出户
---
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
> ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
> ** 心流（Flow）** ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
---
## 覆盖层
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
---
## 嵌入层
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
详情嵌入层 (敬请期待)
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
---
## 虚拟页面
在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
无限加载和分页器，详见[『模式／列表／显示长列表』](/docs/pattern/list#显示长列表)
走马灯，详见[『模式／列表／显示图片』](/docs/pattern/list#显示图片)
伸缩式用户界面（敬请期待）
---
## 流程处理
长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/stay.zh-CN.md
content----> ---
category: Principles
order: 9
title: Use Transition
---
Our Gray Matter are wired to react to dynamic things like movement,shape change and colour change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.
- Adding: The added elements should inform the users how to use, and the modified elements should be recognized.
- Receding: The irrelevant page elements should be removed properly.
- Normal: The elements without any change on the page can be safely ignored.
---
## Maintain Context While Changing Views
Slide In and Slide Out: Create an illusion of virtual space.
Carousel: Carousels are great for extending virtual space.
Accordion: Accordion helps maintain context while switching views.
View Navigation (coming soon)
---
## Explain What Just Happened
Adding an Object: Add an object in the table or chart.
Deleting an Object: Delete an object in the table or chart.
Modifying an Object: Modify an object in the table or chart.
Calling out an Object: Click the page element and call out a new object.
---
## Improve Perceived Performance
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.
Image (coming soon)
---
## Natural Motion
Please refer to [Ant Motion, a motion language](http://motion.ant.design/#/language/)。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/transition.en-US.md
content----> ---
category: 十大原则
order: 9
title: 巧用过渡
---
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
- Receding: 与当前页无关的信息元素应采用适当方式移除。
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
---
## 在视图变化时保持上下文
滑入与滑出：可以有效构建虚拟空间。
传送带：可极大地扩展虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
视图定位 (敬请期待)
---
## 解释刚刚发生了什么
对象增加：在列表/表格中，新增了一个对象。
对象删除：在列表/表格中，删除了一个对象。
对象更改：在列表/表格中，更改了一个对象。
对象呼出：点击页面中元素，呼出一个新对象。
---
## 改善感知性能
当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
图片（敬请期待）
---
## 自然运动
参见 [Ant Motion 动画语言](http://motion.ant.design/language/time)。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/transition.zh-CN.md
content----> ---
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 1
title:
zh-CN: 排版
en-US: Typography
---
良好的排版规范能大大提升用户的视觉体验。
---
## 行高和段落
考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距决定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距决定了段落上下的间距，一般为字号的一倍宽。
12px 段落
汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。
另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。
文案来自 此处。
14px 段落
汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。
另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。
文案来自 此处。
.paragraph-14px, .paragraph-12px {
padding: 15px;
line-height: 1.5;
}
.paragraph-14px p,
.paragraph-12px p {
margin: 1em 0;
}
.paragraph-14px {
font-size: 14px;
}
.paragraph-12px {
font-size: 12px;
}
## 标点和空格
1. 使用全角中文标点。
2. 遇到完整的英文整句、特殊名词，其内容使用半角标点。
3. 数字使用半角字符。
4. 不重复使用标点符号。
### 空格规范
1. 中文和英文间需要空格。
2. 数字与单位之间需要增加空格。
例外：度、百分比与数字之间不需要增加空格。
3. 中文链接之间增加空格。
## 文字背景
当文字和背景明暗对比小于一定比值时，人眼识别文字信息将会变得吃力，尤其在明亮的室外或晃动的情况下。
方法：若彩色背景，可先将色彩去色转为黑白，分别吸取并查看背景和文字的 `HSV` 色值。
两者的 V 值的差额便是明暗对比差。这个明暗对比差建议不小于 40。
## 对齐
### 中文/英文居左对齐
中文和英文均采用左对齐的方式，是因为文字的阅读顺序一般是从左到右的。
### 数字/小数点对齐
数字通常采用右对齐或小数点对齐，这样便于对个十百千位上的数字进行对比。
### 冒号对齐
以冒号对齐的方式在表单中尤其常见。主要是为了区分标题和内容区块，除了美观简洁外，让用户能迅速看清标题减少出错概率。
## 文案长度
语言通常是越简单越明确，而提示性文字更需要简明扼要，让用户一目了然，减少操作失误。提示性句子长度视业务而定，建议一般不超过 16–18 个字。
保持简明准确的方法：
- 每个句子只包含一个观点；
- 使用明确的词；
- 尽可能使用主动语态少用被动语态；
## 层级引导
我们通常使用对比的手法来区分出信息的层次感，信息主次分明能准确地将信息清晰地传达给用户，让用户第一眼获取所需资讯，提升阅读体验。
### Squint test
我们可以采用 [模糊测试](https://chrome.google.com/webstore/detail/the-squint-test/gppnipfbappicilfniaimcnagbpfflpg) 的方法，即眯起眼睛从整体来检视结构上的合理与否。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/typography.md
content----> ---
template: component
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 4
cols: 1
title:
zh-CN: 常用布局
en-US: Layout
---
布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
Ant Design 的布局和导航设计规范如下：
### 尺寸规则
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。
- 顶部导航高度的范围计算公式为：`48+8n`。
- 侧边导航宽度的范围计算公式：`200+8n`。
### 交互原则
- 一级导航和末级的导航需要在可视化的层面被强调出来；
- 当前项应该在呈现上优先级最高；
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
### 视觉原则
导航样式上需要根据信息层级合理的选择样式：
- **大色块强调**
建议用于底色为深色系时，当前页面父级的导航项。
- **高亮火柴棍**
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
- **字体高亮变色**
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
- **字体放大**
`12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/index.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
Affix top
Affix bottom
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/affix/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 固定状态改变的回调
en-US: Callback
---
## zh-CN
可以获得是否固定的状态。
## en-US
Callback with affixed state.
````jsx
import { Affix, Button } from 'antd';
ReactDOM.render(
console.log(affixed)}>
120px to affix top
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/affix/demo/on-change.md
content----> ---
order: 2
title:
zh-CN: 滚动容器
en-US: Container to scroll.
---
## zh-CN
用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
## en-US
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
````jsx
import { Affix, Button } from 'antd';
class Demo extends React.Component {
render() {
return (
{ this.container = node; }}>
this.container}>
Fixed at the top of container
);
}
}
ReactDOM.render(, mountNode);
````
#components-affix-demo-target .scrollable-container {
height: 100px;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/affix/demo/target.md
content----> ---
order: 6
title:
zh-CN: 顶部公告
en-US: Banner
---
## zh-CN
用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。
## en-US
When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/banner.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法，适用于简短的警告提示。
## en-US
The simplest usage for short messages.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 可关闭的警告提示
en-US: Closable
---
## zh-CN
显示关闭按钮，点击可关闭警告提示。
## en-US
To show close button.
````jsx
import { Alert } from 'antd';
const onClose = function (e) {
console.log(e, 'I was closed.');
};
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/closable.md
content----> ---
order: 5
title:
zh-CN: 自定义关闭
en-US: Customized Close Text
---
## zh-CN
可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
## en-US
Replace the default icon with customized text.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/close-text.md
content----> ---
order: 3
title:
zh-CN: 含有辅助性文字介绍
en-US: Description
---
## zh-CN
含有辅助性文字介绍的警告提示。
## en-US
Additional description for alert message.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/description.md
content----> ---
order: 4
title:
zh-CN: 图标
en-US: Icon
---
## zh-CN
可口的图标让信息类型更加醒目。
## en-US
Decent icon make information more clear and more friendly.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/icon.md
content----> ---
order: 1
title:
zh-CN: 四种样式
en-US: More types
---
## zh-CN
共有四种样式 `success`、`info`、`warning`、`error`。
## en-US
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
````jsx
import { Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/alert/demo/style.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
```jsx
import { Anchor } from 'antd';
const { Link } = Anchor;
ReactDOM.render(
, mountNode);
```
.code-box-demo .ant-affix {
z-index: 11;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/anchor/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 固定
en-US: Fixed Anchor
---
## zh-CN
不浮动，状态不随页面滚动变化。
## en-US
Do not change state when page is scrolling.
```jsx
import { Anchor } from 'antd';
const { Link } = Anchor;
ReactDOM.render(
, mountNode);
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/anchor/demo/fixed.md
content----> ---
order: 0
title:
zh-CN: 基本使用
en-US: Basic Usage
---
## zh-CN
基本使用。通过 dataSource 设置自动完成的数据源
## en-US
Basic Usage, set datasource of autocomplete with `dataSource` property.
````jsx
import { AutoComplete } from 'antd';
function onSelect(value) {
console.log('onSelect', value);
}
const Complete = React.createClass({
getInitialState() {
return {
dataSource: [],
};
},
handleChange(value) {
this.setState({
dataSource: !value ? [] : [
value,
value + value,
value + value + value,
],
});
},
render() {
const { dataSource } = this.state;
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/auto-complete/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 自定义选项
en-US: Customized
---
## zh-CN
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
## en-US
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
````jsx
import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;
const Complete = React.createClass({
getInitialState() {
return {
result: [],
};
},
handleChange(value) {
let result;
if (!value || value.indexOf('@') >= 0) {
result = [];
} else {
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
}
this.setState({ result });
},
render() {
const { result } = this.state;
const children = result.map((email) => {
return {email};
});
return (
{children}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/auto-complete/demo/options.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The most basic usage.
````jsx
import { BackTop } from 'antd';
ReactDOM.render(
Scroll down to see the bottom-right
gray
button.
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/back-top/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 自定义样式
en-US: Custom style
---
## zh-CN
可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
## en-US
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
````jsx
import { BackTop } from 'antd';
ReactDOM.render(
UP
Scroll down to see the bottom-right
blue
button.
,
mountNode
);
````
````css
#components-back-top-demo-custom .ant-back-top {
bottom: 100px;
}
#components-back-top-demo-custom .ant-back-top-inner {
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 4px;
background-color: #57c5f7;
color: #fff;
text-align: center;
font-size: 20px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/back-top/demo/custom.md
content----> ---
order: 1
title:
zh-CN: 大数字
en-US: Overflowed count
---
## zh-CN
超过 99 的会显示为 `99+`。
## en-US
`99+` is displayed when count is larger than `99`.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/99plus.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
简单的徽章展示。
## en-US
Simplest Usage.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
````css
.ant-badge:not(.ant-badge-status) {
margin-right: 16px;
}
.head-example {
width: 42px;
height: 42px;
border-radius: 6px;
background: #eee;
display: inline-block;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/basic.md
content----> ---
order: 4
title:
zh-CN: 动态
en-US: Dynamic
---
## zh-CN
展示动态变化的效果。
## en-US
The count will be animated as it changes.
````jsx
import { Badge, Button, Icon } from 'antd';
const ButtonGroup = Button.Group;
const Test = React.createClass({
getInitialState() {
return {
count: 5,
show: true,
};
},
increase() {
const count = this.state.count + 1;
this.setState({ count });
},
decline() {
let count = this.state.count - 1;
if (count < 0) {
count = 0;
}
this.setState({ count });
},
onClick() {
this.setState({
show: !this.state.show,
});
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/change.md
content----> ---
order: 3
title:
zh-CN: 讨嫌的小红点
en-US: Red badge
---
## zh-CN
没有具体的数字。
## en-US
This will simply display a red badge, without a specific count.
````jsx
import { Badge, Icon } from 'antd';
ReactDOM.render(
, mountNode);
````
.anticon-notification {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/dot.md
content----> ---
order: 2
title:
zh-CN: 可点击
en-US: Clickable
---
## zh-CN
用 a 标签进行包裹即可。
## en-US
The badge can be wrapped with `a` tag to make it linkable.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/link.md
content----> ---
order: 0
title:
zh-CN: 独立使用
en-US: Standalone
---
## zh-CN
不包裹任何元素即是独立使用，可自定样式展现。
> 在右上角的 badge 则限定为红色。
## en-US
Used in standalone when children is empty.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/no-wrapper.md
content----> ---
order: 6
title:
zh-CN: 封顶数字
en-US: Customized overflow count
---
## zh-CN
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
## en-US
`${overflowCount}+` is displayed when count is larger than `overflowCount`.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/overflow.md
content----> ---
order: 7
title:
zh-CN: 状态点
en-US: Status
---
## zh-CN
用于表示状态的小圆点。
## en-US
Standalone badge with status.
````jsx
import { Badge } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/badge/demo/status.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic Usage
---
## zh-CN
最简单的用法。
## en-US
The simplest use
````jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
Home
Application Center
Application List
An Application
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/demo/basic.md
content----> ---
order: 2
iframe: true
title:
zh-CN: 路由
en-US: React Router Integration
---
## zh-CN
和 `react-router@2+` 进行结合使用。
## en-US
Used together with `react-router@2+`.
````jsx
import { Router, Route, Link, hashHistory } from 'react-router';
import { Breadcrumb, Alert } from 'antd';
const Apps = () => (
-
Application1：Detail
-
Application2：Detail
);
const Home = ({ routes, params, children }) => (
Home
Application List
{children || 'Home Page'}
);
ReactDOM.render(
, mountNode);
````
````css
#components-breadcrumb-demo-router iframe {
height: 180px;
}
.demo-nav {
height: 30px;
line-height: 30px;
margin-bottom: 15px;
background: #f8f8f8;
}
.demo-nav a {
line-height: 30px;
padding: 0 10px;
}
.app-list {
margin-top: 15px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/demo/router.md
content----> ---
order: 3
title:
zh-CN: 分隔符
en-US: Configuring the Separator
---
## zh-CN
使用 `separator=">"` 可以自定义分隔符。
## en-US
The separator can be customized by setting the separator property: separator=">"
````jsx
import { Breadcrumb } from 'antd';
ReactDOM.render(
Home
Application Center
Application List
An Application
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/demo/separator.md
content----> ---
order: 1
title:
zh-CN: 带有图标的
en-US: With an Icon
---
## zh-CN
图标放在文字前面。
## en-US
The icon should be placed in front of the text.
````jsx
import { Breadcrumb, Icon } from 'antd';
ReactDOM.render(
Application List
Application
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/breadcrumb/demo/withIcon.md
content----> ---
order: 0
title:
zh-CN: 按钮类型
en-US: Type
---
## zh-CN
按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。
通过设置 `type` 为 `primary` `ghost` `dashed` 可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
## en-US
There are primary button, default button, ghost button and dashed button in antd.
`type` can be set as `primary` or `ghost` or `dashed`, in order to create primary button or ghost button or dashed button. If nothing is provided to `type`, we will get default button. Users can tell the significance of button from it's appearance.
Primary button and default button can be used without other button, but ghost button must be used with primary button.
````jsx
import { Button } from 'antd';
ReactDOM.render(
Primary
Default
Ghost
Dashed
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/basic.md
content----> ---
order: 5
title:
zh-CN: 按钮组合
en-US: Button Group
---
## zh-CN
可以将多个 `Button` 放入 `Button.Group` 的容器中。
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
## en-US
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
The `size` can be set to `large`, `small` or left unset resulting in a default size.
````jsx
import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group;
ReactDOM.render(
Basic
Cancel
OK
L
M
R
L
M
M
R
With Icon
Go back
Go forward
mountNode
);
````
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/button-group.md
content----> ---
order: 3
title:
zh-CN: 不可用状态
en-US: Disabled
---
## zh-CN
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
## en-US
To mark a button as disabled, add the `disabled` property to the `Button`.
````jsx
import { Button } from 'antd';
ReactDOM.render(
Primary
Primary(disabled)
Default
Default(disabled)
Ghost
Ghost(disabled)
Dashed
Dashed(disabled)
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/disabled.md
content----> ---
order: 1
title:
zh-CN: 图标按钮
en-US: Icon
---
## zh-CN
当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。
如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。
## en-US
`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`
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.
````jsx
import { Button } from 'antd';
ReactDOM.render(
Search
Search
Search
Search
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/icon.md
content----> ---
order: 4
title:
zh-CN: 加载中状态
en-US: Loading
---
## zh-CN
添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
## en-US
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
````jsx
import { Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
loading: false,
iconLoading: false,
};
},
enterLoading() {
this.setState({ loading: true });
},
enterIconLoading() {
this.setState({ iconLoading: true });
},
render() {
return (
Loading
Loading
Click me!
Click me!
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/loading.md
content----> ---
order: 6
title:
zh-CN: 多个按钮组合
en-US: Multiple Buttons
---
## zh-CN
按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
## en-US
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
````jsx
import { Button, Menu, Dropdown, Icon } from 'antd';
function handleMenuClick(e) {
console.log('click', e);
}
const menu = (
1st item
2nd item
3rd item
);
ReactDOM.render(
primary
secondary
more
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/multiple.md
content----> ---
order: 2
title:
zh-CN: 按钮尺寸
en-US: Size
---
## zh-CN
按钮有大、中、小三种尺寸。
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
## en-US
Ant Design supports a default button size as well as a large and small size.
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.
````jsx
import { Button, Radio, Icon } from 'antd';
class ButtonSize extends React.Component {
state = {
size: 'default',
};
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
render() {
const size = this.state.size;
return (
Large
Default
Small
Download
Normal
Backward
Forward
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/button/demo/size.md
content----> ---
order: 0
title:
zh-CN: 典型卡片
en-US: Basic card
---
## zh-CN
包含标题、内容、操作区域。
## en-US
A basic card containing a title, content and an extra corner content.
````jsx
import { Card } from 'antd';
ReactDOM.render(
More} style={{ width: 300 }}>
Card content
Card content
Card content
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 无边框
en-US: No border
---
## zh-CN
在灰色背景上使用无边框的卡片。
## en-US
A borderless card on a gray background.
````jsx
import { Card } from 'antd';
ReactDOM.render(
Card content
Card content
Card content
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/border-less.md
content----> ---
order: 4
title:
zh-CN: 栅格卡片
en-US: Grid card
---
## zh-CN
在系统概览页面常常和栅格进行配合。
## en-US
Cards usually cooperate with grid layout in overview page.
````jsx
import { Card, Col, Row } from 'antd';
ReactDOM.render(
Card content
Card content
Card content
, mountNode);
````
````css
/* Increase grid spacing of 16px */
.code-box-demo .ant-row {
margin-left: -8px;
margin-right: -8px;
}
.code-box-demo .ant-row > div {
padding: 0 8px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/grid.md
content----> ---
order: 5
title:
zh-CN: 预加载的卡片
en-US: Loading card
---
## zh-CN
数据读入前会有文本块样式。
## en-US
Shows a loading indicator while the contents of the card is being fetched.
````jsx
import { Card } from 'antd';
ReactDOM.render(
Whatever content
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/loading.md
content----> ---
order: 3
title:
zh-CN: 更灵活的内容展示
en-US: Customized content
---
## zh-CN
可以调整默认边距，设定宽度。
## en-US
Customizing default width and margin.
````jsx
import { Card } from 'antd';
ReactDOM.render(
Europe Street beat
www.instagram.com
, mountNode);
````
````css
.custom-image img {
display: block;
}
.custom-card {
padding: 10px 16px;
}
.custom-card p {
color: #999;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/no-padding.md
content----> ---
order: 2
title:
zh-CN: 简洁卡片
en-US: Simple card
---
## zh-CN
只包含内容区域。
## en-US
A simple card only containing a content area.
````jsx
import { Card } from 'antd';
ReactDOM.render(
Card content
Card content
Card content
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/card/demo/simple.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
一个通用的日历面板，支持年/月切换。
## en-US
A basic calendar component with Year/Month switch.
````jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/demo/basic.md
content----> ---
order: 10
title:
zh-CN: 卡片模式
en-US: Card
---
## zh-CN
用于嵌套在空间有限的容器中。
## en-US
Nested inside a container element for rendering in limited space.
````jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/demo/card.md
content----> ---
order: 1
title:
zh-CN: 自定义渲染
en-US: Custom Render
---
## zh-CN
用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
## en-US
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
````jsx
import { Calendar } from 'antd';
import moment from 'moment';
function dateCellRender(value) {
return
}
function monthCellRender(value) {
return
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/demo/custom-render.md
content----> ---
order: 4
title:
zh-CN: 国际化
en-US: locale
---
## zh-CN
通过 `locale` 配置语言, 默认支持 en_US, zh_CN
## en-US
To set the language. en_US, zh_CN are supported by default.
````jsx
import { Calendar } from 'antd';
import enUS from 'antd/lib/calendar/locale/en_US';
import moment from 'moment';
// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue`
// moment.locale('en');
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/demo/locale.md
content----> ---
order: 2
title:
zh-CN: 通知事项日历演示
en-US: A demo of Notice Calendar
---
## zh-CN
一个复杂的应用示例。
## en-US
A complex application.
````jsx
import { Calendar } from 'antd';
function getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'normal', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event.' },
{ type: 'error', content: 'This is error event.' },
{ type: 'error', content: 'This is error event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
default:
}
return listData || [];
}
function dateCellRender(value) {
const listData = getListData(value);
return (
-
●
{item.content}
{
listData.map((item, index) =>
)
}
);
}
function getMonthData(value) {
if (value.month() === 8) {
return 1394;
}
}
function monthCellRender(value) {
const num = getMonthData(value);
return num ?
{num}
Backlog number
}
ReactDOM.render(
, mountNode);
````
````css
.events {
line-height: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.events li {
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.events li span {
vertical-align: middle;
}
.events li span:first-child {
font-size: 9px;
margin-right: 4px;
}
.event-warning {
color: #fac450;
}
.event-normal {
color: #108ee9;
}
.event-error {
color: #f50;
}
.notes-month {
text-align: center;
}
.notes-month section {
font-size: 28px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/calendar/demo/notice-calendar.md
content----> ---
order: 3
title:
zh-CN: 自动切换
en-US: Scroll automatically
---
## zh-CN
定时切换下一张。
## en-US
Timing of scrolling to the next card/picture.
````jsx
import { Carousel } from 'antd';
ReactDOM.render(
1
2
3
4
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/demo/autoplay.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
Basic usage.
````jsx
import { Carousel } from 'antd';
function onChange(a, b, c) {
console.log(a, b, c);
}
ReactDOM.render(
1
2
3
4
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 渐显
en-US: Fade in
---
## zh-CN
切换效果为渐显。
## en-US
Slides use fade for transition.
````jsx
import { Carousel } from 'antd';
ReactDOM.render(
1
2
3
4
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/demo/fade.md
content----> ---
order: 1
title:
zh-CN: 垂直
en-US: Vertical
---
## zh-CN
垂直显示。
## en-US
Vertical pagination.
````jsx
import { Carousel } from 'antd';
ReactDOM.render(
1
2
3
4
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/carousel/demo/vertical.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
省市区级联。
## en-US
Cascade selection box for selecting province/city/district.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/basic.md
content----> ---
order: 5
title:
zh-CN: 选择即改变
en-US: Change on select
---
## zh-CN
这种交互允许只选中父级选项。
## en-US
Allow only select parent options.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hanzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/change-on-select.md
content----> ---
order: 8
title:
zh-CN: 自定义已选项
en-US: Custom render
---
## zh-CN
例如给最后一项加上邮编链接。
## en-US
For instance, add an external link after the selected value.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
code: 752100,
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
code: 453400,
}],
}],
}];
function handleAreaClick(e, label, option) {
e.stopPropagation();
console.log('clicked', label, option);
}
const displayRender = (labels, selectedOptions) => labels.map((label, i) => {
const option = selectedOptions[i];
if (i === labels.length - 1) {
return (
{label} ( handleAreaClick(e, label, option)}>{option.code})
);
}
return {label} / ;
});
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/custom-render.md
content----> ---
order: 1
title:
zh-CN: 可以自定义显示
en-US: Custom trigger
---
## zh-CN
切换按钮和结果分开。
## en-US
Separate trigger button and result.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
}],
}];
const CitySwitcher = React.createClass({
getInitialState() {
return {
text: 'Unselect',
};
},
onChange(value, selectedOptions) {
this.setState({
text: selectedOptions.map(o => o.label).join(', '),
});
},
render() {
return (
{this.state.text}
Change city
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/custom-trigger.md
content----> ---
order: 0
title:
zh-CN: 默认值
en-US: Default value
---
## zh-CN
默认值通过数组的方式指定。
## en-US
Specifies default value by an array.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/default-value.md
content----> ---
order: 4
title:
zh-CN: 禁用选项
en-US: Disabled option
---
## zh-CN
通过指定 options 里的 `disabled` 字段。
## en-US
Disable option by specifying the `disabled` property in `options`.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
disabled: true,
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/disabled-option.md
content----> ---
order: 2
title:
zh-CN: 移入展开
en-US: Hover
---
## zh-CN
通过移入展开下级菜单，点击完成选择。
## en-US
Hover to expand sub menu, click to select option.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
// Just show the latest item.
function displayRender(label) {
return label[label.length - 1];
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/hover.md
content----> ---
order: 9
title:
zh-CN: 搜索
en-US: Search
---
## zh-CN
可以直接搜索选项并选择。
## en-US
Search and select options directly.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua men',
}],
}],
}];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
ReactDOM.render(
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/search.md
content----> ---
order: 7
title:
zh-CN: 大小
en-US: Size
---
## zh-CN
不同大小的级联选择器。
## en-US
Cascade selection box of different sizes.
````jsx
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/cascader/demo/size.md
content----> ---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
简单的 checkbox。
## en-US
Basic usage of checkbox.
````jsx
import { Checkbox } from 'antd';
function onChange(e) {
console.log(`checked = ${e.target.checked}`);
}
ReactDOM.render(
Checkbox
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/demo/basic.md
content----> ---
order: 4
title:
zh-CN: 全选
en-US: Check all
---
## zh-CN
在实现全选效果时，你可能会用到 `indeterminate` 属性。
## en-US
The `indeterminate` property can help you to achieve a 'check all' effect.
````jsx
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
const App = React.createClass({
getInitialState() {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
},
render() {
return (
Check all
);
},
onChange(checkedList) {
this.setState({
checkedList,
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
checkAll: checkedList.length === plainOptions.length,
});
},
onCheckAllChange(e) {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/demo/check-all.md
content----> ---
order: 2
title:
zh-CN: 受控的 Checkbox
en-US: Controlled Checkbox
---
## zh-CN
联动 checkbox。
## en-US
Communicated with other components.
````jsx
import { Checkbox, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
checked: true,
disabled: false,
};
},
render() {
const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
return (
{label}
{!this.state.checked ? 'Check' : 'Uncheck'}
{!this.state.disabled ? 'Disable' : 'Enable'}
);
},
toggleChecked() {
this.setState({ checked: !this.state.checked });
},
toggleDisable() {
this.setState({ disabled: !this.state.disabled });
},
onChange(e) {
console.log('checked = ', e.target.checked);
this.setState({
checked: e.target.checked,
});
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/demo/controller.md
content----> ---
order: 1
title:
zh-CN: 不可用
en-US: Disabled
---
## zh-CN
checkbox 不可用。
## en-US
Disabled checkbox.
````jsx
import { Checkbox } from 'antd';
ReactDOM.render(
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/demo/disabled.md
content----> ---
order: 3
title:
zh-CN: Checkbox 组
en-US: Checkbox Group
---
## zh-CN
方便的从数组生成 Checkbox 组。
## en-US
Generate a group of checkboxes from an array.
````jsx
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/checkbox/demo/group.md
content----> ---
order: 1
title:
zh-CN: 手风琴
en-US: Accordion
---
## zh-CN
手风琴，每次只打开一个tab。默认打开第一个。
## en-US
Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
````jsx
import { Collapse } from 'antd';
const Panel = Collapse.Panel;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
{text}
{text}
{text}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/demo/accordion.md
content----> ---
order: 0
title:
zh-CN: 折叠面板
en-US: Collapse
---
## zh-CN
可以同时展开多个面板，这个例子默认展开了第一个。
## en-US
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
````jsx
import { Collapse } from 'antd';
const Panel = Collapse.Panel;
function callback(key) {
console.log(key);
}
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
{text}
{text}
{text}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 简洁风格
en-US: Borderless
---
## zh-CN
一套没有边框的简洁样式。
## en-US
A borderless style of Collapse.
````jsx
import { Collapse } from 'antd';
const Panel = Collapse.Panel;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
{text}
{text}
{text}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/demo/borderless.md
content----> ---
order: 2
title:
zh-CN: 面板嵌套
en-US: Nested panel
---
## zh-CN
嵌套折叠面板。
## en-US
`Collapse` is nested inside the `Collapse`.
````jsx
import { Collapse } from 'antd';
const Panel = Collapse.Panel;
function callback(key) {
console.log(key);
}
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
{text}
{text}
{text}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/collapse/demo/mix.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法，在浮层中可以选择或者输入日期。
## en-US
Basic use case. Users can select or input a date in panel.
````jsx
import { DatePicker } from 'antd';
const { MonthPicker, RangePicker } = DatePicker;
function onChange(date, dateString) {
console.log(date, dateString);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/basic.md
content----> ---
order: 6
title:
zh-CN: 不可选择日期和时间
en-US: Disabled Date & Time
---
## zh-CN
可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间，其中 `disabledTime` 需要和 `showTime` 一起使用。
## en-US
Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
````jsx
import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
function disabledDate(current) {
// can not select days before today and today
return current && current.valueOf() < Date.now();
}
function disabledDateTime() {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
function disabledRangeTime(_, type) {
if (type === 'start') {
return {
disabledHours: () => range(0, 60).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
return {
disabledHours: () => range(0, 60).splice(20, 4),
disabledMinutes: () => range(0, 31),
disabledSeconds: () => [55, 56],
};
}
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/disabled-date.md
content----> ---
order: 4
title:
zh-CN: 禁用
en-US: Disabled
---
## zh-CN
选择框的不可用状态。
## en-US
A disabled state of the `DatePicker`.
````jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/disabled.md
content----> ---
order: 1
title:
zh-CN: 日期格式
en-US: Date Format
---
## zh-CN
使用 `format` 属性，可以自定义日期显示格式。
## en-US
We can set the date format by `format`.
````jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/format.md
content----> ---
order: 7
title:
zh-CN: 国际化
en-US: Locale
---
## zh-CN
通过 `locale` 设置语言, 默认支持 `en_US`，`zh_CN`。
moment 会自动使用当前时区，如果需要使用别的时区，则需要自行设置，设置方法请参考示例代码中的注释。
## en-US
Use locale to set the language. `en_US`, `zh_CN` are supported by default.
moment will use your time zone automatically. If you want to set other time zone, please set it by yourself.
````jsx
import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
import moment from 'moment-timezone/moment-timezone';
// It's recommended to set moment locale and time zone globally in entry file,
// otherwise, you need to set it by `value` or `defaultValue`.
// moment.locale('en');
// The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json
// moment.tz.add('Europe/London|GMT BST BDST|0 -10 -20|0101010101010101010101010101010101010101010101010121212121210101210101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-2axa0 Rc0 1fA0 14M0 1fc0 1g00 1co0 1dc0 1co0 1oo0 1400 1dc0 19A0 1io0 1io0 WM0 1o00 14o0 1o00 17c0 1io0 17c0 1fA0 1a00 1lc0 17c0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1cM0 1io0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1io0 1qM0 Dc0 2Rz0 Dc0 1zc0 Oo0 1zc0 Rc0 1wo0 17c0 1iM0 FA0 xB0 1fA0 1a00 14o0 bb0 LA0 xB0 Rc0 1wo0 11A0 1o00 17c0 1fA0 1a00 1fA0 1cM0 1fA0 1a00 17c0 1fA0 1a00 1io0 17c0 1lc0 17c0 1fA0 1a00 1io0 17c0 1io0 17c0 1fA0 1a00 1a00 1qM0 WM0 1qM0 11A0 1o00 WM0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1tA0 IM0 90o0 U00 1tA0 U00 1tA0 U00 1tA0 U00 1tA0 WM0 1qM0 WM0 1qM0 WM0 1tA0 U00 1tA0 U00 1tA0 11z0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 14o0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00|10e6');
// moment.tz.setDefault('Europe/London')
const log = console.log.bind(console);
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/locale.md
content----> ---
order: 8
title:
zh-CN: 预设范围
en-US: Presetted Ranges
---
## zh-CN
RangePicker 可以设置常用的 预设范围 提高用户体验。
## en-US
We can set presetted ranges to RangePicker to improve user experience.
````jsx
import { DatePicker } from 'antd';
import moment from 'moment';
const RangePicker = DatePicker.RangePicker;
function onChange(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/presetted-ranges.md
content----> ---
order: 2
title:
zh-CN: 三种大小
en-US: Three Sizes
---
## zh-CN
三种大小的输入框，若不设置，则为 `default`。
## en-US
The input box comes in three sizes. `default` will be used if `size` is omitted.
````jsx
import { DatePicker, Radio } from 'antd';
const { MonthPicker, RangePicker } = DatePicker;
class PickerSizesDemo extends React.Component {
state = {
size: 'default',
};
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
render() {
const { size } = this.state;
return (
Large
Default
Small
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/size.md
content----> ---
order: 6
title:
zh-CN: 自定义日期范围选择
en-US: Customized Range Picker
---
## zh-CN
当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。
> * 通过设置 `disabledDate` 方法，来约束开始和结束日期。
> * 通过 `open` `onOpenChange` 来优化交互。
## en-US
When `RangePicker` is not satisfied your requirements, try to implement similar functionality with two `DatePicker`.
> * Use the `disabledDate` property to limit the start and end dates.
> * Imporve user experience with `open` `onOpenChange`.
````jsx
import { DatePicker } from 'antd';
class DateRange extends React.Component {
state = {
startValue: null,
endValue: null,
endOpen: false,
};
disabledStartDate = (startValue) => {
const endValue = this.state.endValue;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
}
disabledEndDate = (endValue) => {
const startValue = this.state.startValue;
if (!endValue || !startValue) {
return false;
}
return endValue.valueOf() <= startValue.valueOf();
}
onChange = (field, value) => {
this.setState({
[field]: value,
});
}
onStartChange = (value) => {
this.onChange('startValue', value);
}
onEndChange = (value) => {
this.onChange('endValue', value);
}
handleStartOpenChange = (open) => {
if (!open) {
this.setState({ endOpen: true });
}
}
handleEndOpenChange = (open) => {
this.setState({ endOpen: open });
}
render() {
const { startValue, endValue, endOpen } = this.state;
return (
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/start-end.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的下拉菜单。
## en-US
The most basic dropdown menu.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = (
1st menu item
2nd menu item
3d menu item
);
ReactDOM.render(
Hover me
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 日期时间选择
en-US: Choose Time
---
## zh-CN
增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。
## en-US
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
````jsx
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
function onChange(value, dateString) {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/date-picker/demo/time.md
content----> ---
order: 4
title:
zh-CN: 带下拉框的按钮
en-US: Button with dropdown menu
---
## zh-CN
左边是按钮，右边是额外的相关功能菜单。
## en-US
A button is on the left, and a related functional menu is on the right.
````jsx
import { Menu, Dropdown, Button, Icon, message } from 'antd';
function handleButtonClick(e) {
message.info('Click on left button.');
console.log('click left button', e);
}
function handleMenuClick(e) {
message.info('Click on menu item.');
console.log('click', e);
}
const menu = (
1st menu item
2nd menu item
3d menu item
);
ReactDOM.render(
Dropdown
Dropdown
Button
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/dropdown-button.md
content----> ---
order: 3
title:
zh-CN: 触发事件
en-US: Click event
---
## zh-CN
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
## en-US
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
````jsx
import { Menu, Dropdown, Icon, message } from 'antd';
const onClick = function ({ key }) {
message.info(`Click on item ${key}`);
};
const menu = (
1st menu item
2nd memu item
3d menu item
);
ReactDOM.render(
Hover me, Click menu item
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/event.md
content----> ---
order: 1
title:
zh-CN: 其他元素
en-US: Other elements
---
## zh-CN
分割线和不可用菜单项。
## en-US
Divider and disabled menu item.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = (
1st menu item
2nd menu item
3d menu item（disabled）
);
ReactDOM.render(
Hover me
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/item.md
content----> ---
order: 6
title:
zh-CN: 菜单隐藏方式
en-US: The way of hiding menu.
---
## zh-CN
默认是点击关闭菜单，可以关闭此功能。
## en-US
The default is to close the menu when you click on menu items, this feature can be turned off.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const OverlayVisible = React.createClass({
getInitialState() {
return {
visible: false,
};
},
handleMenuClick(e) {
if (e.key === '3') {
this.setState({ visible: false });
}
},
handleVisibleChange(flag) {
this.setState({ visible: flag });
},
render() {
const menu = (
Clicking me will not close the menu.
Clicking me will not close the menu also.
Clicking me will close the menu
);
return (
Hover me
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/overlay-visible.md
content----> ---
order: 5
title:
zh-CN: 多级菜单
en-US: Cascading menu
---
## zh-CN
传入的菜单里有多个层级。
## en-US
The menu has multiple levels.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const menu = (
1st menu item
2nd menu item
3d menu item
4th menu item
);
ReactDOM.render(
Cascading menu
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/sub-menu.md
content----> ---
order: 2
title:
zh-CN: 触发方式
en-US: Trigger mode
---
## zh-CN
默认是移入触发菜单，可以点击触发。
## en-US
The default trigger mode is `hover`, you can change it to `click`.
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = (
1st menu item
2nd menu item
3d menu item
);
ReactDOM.render(
, mountNode);````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/dropdown/demo/trigger.md
content----> ---
order: 3
title:
zh-CN: 高级搜索
en-US: Advanced search
---
## zh-CN
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
## en-US
Three columns layout is often used for advanced searching of data table.
Because the width of label is not fixed, you may need to adjust it by customizing its style.
````jsx
import { Form, Row, Col, Input, Button, Icon } from 'antd';
const FormItem = Form.Item;
class AdvancedSearchForm extends React.Component {
state = {
expand: false,
};
handleSearch = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log('Received values of form: ', values);
});
}
handleReset = () => {
this.props.form.resetFields();
}
toggle = () => {
const { expand } = this.state;
this.setState({ expand: !expand });
}
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 5 },
wrapperCol: { span: 19 },
};
// To generate mock Form.Item
const children = [];
for (let i = 0; i < 10; i++) {
children.push(
{getFieldDecorator(`field-${i}`)(
)}
);
}
const expand = this.state.expand;
const shownCount = expand ? children.length : 6;
return (
{children.slice(0, shownCount)}
Search
Clear
Collapse
);
}
}
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);
ReactDOM.render(
mountNode
);
````
````css
#components-form-demo-advanced-search .ant-advanced-search-form {
padding: 24px;
background: #fbfbfb;
border: 1px solid #d9d9d9;
border-radius: 6px;
}
````
#components-form-demo-advanced-search .ant-form-horizontal {
max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/advanced-search.md
content----> ---
order: 12
title:
zh-CN: 表单联动
en-US: Coordinated Controls
---
## zh-CN
使用 `setFieldsValue` 来动态设置其他控件的值。
## en-US
Use `setFieldsValue` to set other control's value programmaticly.
````jsx
import { Form, Select, Input, Button } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const App = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
handleSelectChange(value) {
console.log(value);
this.props.form.setFieldsValue({
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
});
},
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('note', {
rules: [{ required: true, message: 'Please input your note!' }],
})(
)}
{getFieldDecorator('gender', {
rules: [{ required: true, message: 'Please select your gender!' }],
onChange: this.handleSelectChange,
})(
male
female
)}
Submit
);
},
}));
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/coordinated.md
content----> ---
order: 7
title:
zh-CN: 自定义表单控件
en-US: Customized Form Controls
---
## zh-CN
自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
> * 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。
> * 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。
## en-US
Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
> * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
> * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
````jsx
import { Form, Input, Select, Button } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const PriceInput = React.createClass({
getInitialState() {
const value = this.props.value || {};
return {
number: value.number || 0,
currency: value.currency || 'rmb',
};
},
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState(value);
}
},
handleNumberChange(e) {
const number = parseInt(e.target.value || 0, 10);
if (isNaN(number)) {
return;
}
if (!('value' in this.props)) {
this.setState({ number });
}
this.triggerChange({ number });
},
handleCurrencyChange(currency) {
if (!('value' in this.props)) {
this.setState({ currency });
}
this.triggerChange({ currency });
},
triggerChange(changedValue) {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
onChange(Object.assign({}, this.state, changedValue));
}
},
render() {
const { size } = this.props;
const state = this.state;
return (
RMB
Dollar
);
},
});
const Demo = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
checkPrice(rule, value, callback) {
if (value.number > 0) {
callback();
return;
}
callback('Price must greater than zero!');
},
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('price', {
initialValue: { number: 0, currency: 'rmb' },
rules: [{ validator: this.checkPrice }],
})()}
Submit
);
},
}));
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/customized-form-controls.md
content----> ---
order: 5
title:
zh-CN: 动态增减表单项
en-US: Dynamic Form Item
---
## zh-CN
动态增加、减少表单项。
## en-US
Add or remove form items dynamically.
````jsx
import { Form, Input, Icon, Button } from 'antd';
const FormItem = Form.Item;
let uuid = 0;
class DynamicFieldSet extends React.Component {
componentWillMount() {
this.props.form.setFieldsValue({
keys: [0],
});
}
remove = (k) => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
// We need at least one passenger
if (keys.length === 1) {
return;
}
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});
}
add = () => {
uuid++;
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat(uuid);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});
}
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
};
const formItemLayoutWithOutLabel = {
wrapperCol: { span: 20, offset: 4 },
};
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => {
return (
{getFieldDecorator(`names-${k}`, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
}],
})(
)}
this.remove(k)}
/>
);
});
return (
{formItems}
Add
);
}
}
const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
ReactDOM.render(, mountNode);
````
````css
.dynamic-delete-button {
cursor: pointer;
position: relative;
top: 4px;
font-size: 24px;
color: #999;
transition: all .3s;
}
.dynamic-delete-button:hover {
color: #777;
}
.dynamic-delete-button[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/dynamic-form-item.md
content----> ---
order: 4
title:
zh-CN: 弹出层中的新建表单
en-US: Form in Modal to Create
---
## zh-CN
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
## en-US
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fills in the form to create an item.
````jsx
import { Button, Modal, Form, Input, Radio } from 'antd';
const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
(props) => {
const { visible, onCancel, onCreate, form } = props;
const { getFieldDecorator } = form;
return (
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
)}
{getFieldDecorator('description')()}
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
Public
Private
)}
);
}
);
const CollectionsPage = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({ visible: true });
},
handleCancel() {
this.setState({ visible: false });
},
handleCreate() {
const form = this.form;
form.validateFields((err, values) => {
if (err) {
return;
}
console.log('Received values of form: ', values);
form.resetFields();
this.setState({ visible: false });
});
},
saveFormRef(form) {
this.form = form;
},
render() {
return (
New Collection
);
},
});
ReactDOM.render(, mountNode);
````
````css
.collection-create-form_last-form-item {
margin-bottom: 0;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/form-in-modal.md
content----> ---
order: 8
title:
zh-CN: 表单数据存储于上层组件
en-US: Store Form Data into Upper Component
---
## zh-CN
通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中。
## en-US
We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`.
````jsx
import { Form, Input } from 'antd';
const FormItem = Form.Item;
const CustomizedForm = Form.create({
onFieldsChange(props, changedFields) {
props.onChange(changedFields);
},
mapPropsToFields(props) {
return {
username: {
...props.username,
value: props.username.value.toUpperCase(),
},
};
},
})((props) => {
const { getFieldDecorator } = props.form;
return (
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Username is required!' }],
})()}
);
});
const Demo = React.createClass({
getInitialState() {
return {
fields: {
username: {
value: 'benjycui',
},
},
};
},
handleFormChange(changedFields) {
this.setState({
fields: { ...this.state.fields, ...changedFields },
});
},
render() {
const fields = this.state.fields;
return (
{JSON.stringify(fields, null, 2)}
);
},
});
ReactDOM.render(, mountNode);
````
#components-form-demo-global-state .language-bash {
max-width: 400px;
border-radius: 6px;
margin-top: 24px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/global-state.md
content----> ---
order: 0
title:
zh-CN: 水平登录栏
en-US: Horizontal Login Form
---
## zh-CN
水平登录栏，常用在顶部导航栏中。
## en-US
Horizontal login form is often used in navigation bar.
````jsx
import { Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;
const HorizontalLoginForm = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
} placeholder="Username" />
)}
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
} type="password" placeholder="Password" />
)}
Log in
);
},
}));
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/horizontal-login.md
content----> ---
order: 1
title:
zh-CN: 登录框
en-US: Login Form
---
## zh-CN
普通的登录框，可以容纳更多的元素。
## en-US
Normal login form which can contain more elements.
````jsx
import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;
const NormalLoginForm = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
} placeholder="Username" />
)}
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
} type="password" placeholder="Password" />
)}
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
Remember me
)}
Forgot password
Log in
Or register now!
);
},
}));
ReactDOM.render(, mountNode);
````
```css
#components-form-demo-normal-login .login-form {
max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
float: right;
}
#components-form-demo-normal-login .login-form-button {
width: 100%;
}
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/normal-login.md
content----> ---
order: 2
title:
zh-CN: 注册新用户
en-US: Registration
---
## zh-CN
用户填写必须的信息以注册新用户。
## en-US
Fill in this form to create a new account for you.
````jsx
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const residences = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}];
const RegistrationForm = Form.create()(React.createClass({
getInitialState() {
return {
passwordDirty: false,
};
},
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
handlePasswordBlur(e) {
const value = e.target.value;
this.setState({ passwordDirty: this.state.passwordDirty || !!value });
},
checkPassowrd(rule, value, callback) {
const form = this.props.form;
if (value && value !== form.getFieldValue('password')) {
callback('Two passwords that you enter is inconsistent!');
} else {
callback();
}
},
checkConfirm(rule, value, callback) {
const form = this.props.form;
if (value && this.state.passwordDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
},
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
const tailFormItemLayout = {
wrapperCol: {
span: 14,
offset: 6,
},
};
const prefixSelector = getFieldDecorator('prefix', {
initialValue: '86',
})(
+86
);
return (
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
)}
{getFieldDecorator('password', {
rules: [{
required: true, message: 'Please input your password!',
}, {
validator: this.checkConfirm,
}],
})(
)}
{getFieldDecorator('confirm', {
rules: [{
required: true, message: 'Please confirm your password!',
}, {
validator: this.checkPassowrd,
}],
})(
)}
Nickname
)}
hasFeedback
>
{getFieldDecorator('nickname', {
rules: [{ required: true, message: 'Please input your nickname!' }],
})(
)}
{getFieldDecorator('residence', {
initialValue: ['zhejiang', 'hangzhou', 'xihu'],
rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
})(
)}
{getFieldDecorator('phone', {
rules: [{ required: true, message: 'Please input your phone number!' }],
})(
)}
{getFieldDecorator('captcha', {
rules: [{ required: true, message: 'Please input the captcha you got!' }],
})(
)}
Get captcha
{getFieldDecorator('agreement', {
valuePropName: 'checked',
})(
I had read the agreement
)}
Register
);
},
}));
ReactDOM.render(, mountNode);
````
````css
#components-form-demo-register .icp-selector {
width: 60px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/register.md
content----> ---
order: 6
title:
zh-CN: 时间类控件
en-US: Time-related Controls
---
## zh-CN
`[email protected]` 之后，时间类组件的 `value` 改为 `moment` 类型，所以在提交前需要预处理。
## en-US
After `[email protected]`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values.
````jsx
import { Form, DatePicker, TimePicker, Button } from 'antd';
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;
const TimeRelatedForm = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
// Should format date value before submit.
const rangeValue = fieldsValue['range-picker'];
const rangeTimeValue = fieldsValue['range-time-picker'];
const values = {
...fieldsValue,
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
'range-time-picker': [
rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
],
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
};
console.log('Received values of form: ', values);
});
},
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const config = {
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
};
const rangeConfig = {
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
};
return (
{getFieldDecorator('date-picker', config)(
)}
{getFieldDecorator('date-time-picker', config)(
)}
{getFieldDecorator('month-picker', config)(
)}
{getFieldDecorator('range-picker', rangeConfig)(
)}
{getFieldDecorator('range-time-picker', rangeConfig)(
)}
{getFieldDecorator('time-picker', config)(
)}
Submit
);
},
}));
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/time-related-controls.md
content----> ---
order: 11
title:
zh-CN: 校验其他组件
en-US: Other Form Controls
---
## zh-CN
以上演示没有出现的表单控件对应的校验演示。
## en-US
Demostration for validataion configuration for form controls which are not show in the above demos.
````jsx
import {
Form, Select, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Demo = Form.create()(React.createClass({
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
normFile(e) {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
},
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
return (
{getFieldDecorator('select', {
rules: [
{ required: true, message: 'Please select your country!' },
],
})(
China
U.S.A
)}
{getFieldDecorator('select-multiple', {
rules: [
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
],
})(
Red
Green
Blue
)}
{getFieldDecorator('input-number', { initialValue: 3 })(
)}
machines
{getFieldDecorator('switch', { valuePropName: 'checked' })(
)}
{getFieldDecorator('slider')(
)}
{getFieldDecorator('radio-group')(
item 1
item 2
item 3
)}
{getFieldDecorator('radio-button')(
item 1
item 2
item 3
)}
{getFieldDecorator('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})(
Click to upload
)}
Submit
);
},
}));
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/validate-other.md
content----> ---
order: 10
title:
zh-CN: 校验提示
en-US: Validation message
---
## zh-CN
我们为表单控件定义了三种校验状态，为 `` 定义 `validateStatus` 属性即可。
validateStatus: 'success', 'warning', 'error', 'validating'。
另外为输入框添加反馈图标，设置 `` 的 `hasFeedback` 属性值为 `true` 即可。
**注意**: 反馈图标只对 `` 有效。
## en-US
We provide three kinds of validation status for form. You can use it just define `validateStatus` property on ``.
validateStatus: 'success', 'warning', 'error', 'validating'。
To set `hasFeedback` property to `true` enable to display feed icon of input control.
**PS**: Feed icon is just available for ``.
````jsx
import { Form, Input, DatePicker, Col } from 'antd';
const FormItem = Form.Item;
ReactDOM.render(
-
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/validate-static.md
content----> ---
order: 9
title:
zh-CN: 自行处理表单数据
en-US: Handle Form Data Manually
---
## zh-CN
使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。
## en-US
`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy you business, you can drop `Form.create` and handle form data manually.
````jsx
import { Form, InputNumber } from 'antd';
const FormItem = Form.Item;
function validatePrimeNumber(number) {
if (number === 11) {
return {
validateStatus: 'success',
errorMsg: null,
};
}
return {
validateStatus: 'error',
errorMsg: 'The prime between 8 and 12 is 11!',
};
}
class RawForm extends React.Component {
state = {
number: {
value: 11,
},
};
handleNumberChange = (value) => {
this.setState({
number: {
...validatePrimeNumber(value),
value,
},
});
}
render() {
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
};
const number = this.state.number;
const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
return (
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/form/demo/without-form-create.md
content----> ---
order: 0
title:
zh-CN: 基础栅格
en-US: Basic Grid
---
## zh-CN
从堆叠到水平排列。
使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
## en-US
From the stack to the horizontal arrangement.
You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, all of the columns (Col) must be placed in `Row`.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/basic.md
content----> ---
order: 5
title:
zh-CN: Flex 对齐
en-US: Flex Alignment
---
## zh-CN
Flex 子元素垂直对齐。
## en-US
Flex child elements vertically aligned.
````jsx
import { Row, Col } from 'antd';
const DemoBox = props =>
{props.children}
;ReactDOM.render(
Align Top
col-4
col-4
col-4
col-4
Align Center
col-4
col-4
col-4
col-4
Align Bottom
col-4
col-4
col-4
col-4
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/flex-align.md
content----> ---
order: 6
title:
zh-CN: Flex 排序
en-US: Flex Order
---
## zh-CN
通过 Flex 布局的 Order 来改变元素的排序。
## en-US
To change the element sort by Flex layout order.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/flex-order.md
content----> ---
order: 4
title:
zh-CN: Flex 布局
en-US: Flex Layout
---
## zh-CN
Flex 布局基础。
使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
## en-US
Use `row-flex` define` flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
sub-element align left
col-4
col-4
col-4
col-4
sub-element align center
col-4
col-4
col-4
col-4
sub-element align right
col-4
col-4
col-4
col-4
sub-element monospaced arrangement
col-4
col-4
col-4
col-4
sub-element align full
col-4
col-4
col-4
col-4
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/flex.md
content----> ---
order: 1
title:
zh-CN: 区块间隔
en-US: Grid Gutter
---
## zh-CN
栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。
## en-US
You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
, mountNode);
````
````css
.gutter-example .ant-row > div {
background: transparent;
border: 0;
}
.gutter-box {
background: #00A0E9;
padding: 5px 0;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/gutter.md
content----> ---
order: 2
title:
zh-CN: 左右偏移
en-US: Column offset
---
## zh-CN
列偏移。
使用 `offset` 可以将列向右侧偏。例如，`offset={4}` 将元素向右侧偏移了 4 个列（column）的宽度。
## en-US
`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/offset.md
content----> ---
order: 8
title:
zh-CN: 其他属性的响应式
en-US: More responsive
---
## zh-CN
`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。
其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
## en-US
`Span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` properties to use,
where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
Col
Col
Col
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/reponsive-more.md
content----> ---
order: 7
title:
zh-CN: 响应式布局
en-US: Responsive
---
## zh-CN
参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。
## en-US
Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs` `sm` `md` `lg`.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
Col
Col
Col
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/reponsive.md
content----> ---
order: 3
title:
zh-CN: 栅格排序
en-US: Grid sort
---
## zh-CN
列排序。
通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。
## en-US
By using `push` and` pull` class you can easily change column order.
````jsx
import { Row, Col } from 'antd';
ReactDOM.render(
col-18 col-push-6
col-6 col-pull-18
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/grid/demo/sort.md
content----> ---
order: 2
title:
zh-CN: 前置/后置标签
en-US: Pre / Post tab
---
## zh-CN
用于配置一些固定组合。
## en-US
Using pre & post tabs example.
````jsx
import { Input, Select, Icon } from 'antd';
const Option = Select.Option;
const selectBefore = (
Http://
Https://
);
const selectAfter = (
.com
.jp
.cn
.org
);
ReactDOM.render(
} defaultValue="mysite" />
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/addon.md
content----> ---
order: 6
title:
zh-CN: 适应文本高度的文本域
en-US: Autosizing the height to fit the content
---
## zh-CN
`autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。
## en-US
`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content.
An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
````jsx
import { Input } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/autosize-textarea.md
content----> ---
order: 0
title:
zh-CN: 基本使用
en-US: Basic usage
---
## zh-CN
基本使用。
## en-US
Basic usage example
````jsx
import { Input } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 输入框组合
en-US: Input Group
---
## zh-CN
输入框的组合展现。
## en-US
Input.Group example
````jsx
import { Input, Col } from 'antd';
const InputGroup = Input.Group;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/group.md
content----> ---
order: 4
title:
zh-CN: 搜索框
en-US: Search box
---
## zh-CN
带有搜索按钮的输入框，`2.5.0` 时新增。
## en-US
Example of creating a search box by grouping a standard input with a search button, added in `2.5.0`.
````jsx
import { Input } from 'antd';
const Search = Input.Search;
ReactDOM.render(
console.log(value)} />
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/search-input.md
content----> ---
order: 1
title:
zh-CN: 三种大小
en-US: Three sizes of Input
---
## zh-CN
我们为 `` 输入框定义了三种尺寸（大、默认、小），高度分别为 `32px`、`28px` 和 `22px`。
注意： 在表单里面，我们只使用大尺寸的输入框。
## en-US
There are three sizes of an Input box: `large` (32px)、`default` (28px) and `small` (22px).
Note: Inside of forms, only the large size is used.
````jsx
import { Input } from 'antd';
ReactDOM.render(
, mountNode);
````
````css
.example-input .ant-input {
width: 200px;
margin: 0 8px 8px 0;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/size.md
content----> ---
order: 5
title:
zh-CN: 文本域
en-US: Textarea
---
## zh-CN
用于多行输入，指定 `type` 为一个特殊的 `textarea`。
## en-US
For multi-line user input cases, an input whose `type` prop has the value of `"textarea"` can be used.
````jsx
import { Input } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/textarea.md
content----> ---
order: 7
title:
zh-CN: 数值输入框
en-US: Numeric Input
---
## zh-CN
结合 [Tooltip](/components/tooltip) 组件，实现一个数值输入框，方便内容超长时的全量展现。
## en-US
You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
````jsx
import { Input, Tooltip } from 'antd';
function formatNumber(value) {
value += '';
const list = value.split('.');
const prefix = list[0].charAt(0) === '-' ? '-' : '';
let num = prefix ? list[0].slice(1) : list[0];
let result = '';
while (num.length > 3) {
result = `,${num.slice(-3)}${result}`;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}
class NumericInput extends React.Component {
onChange = (e) => {
const { value } = e.target;
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
this.props.onChange(value);
}
}
// '.' at the end or only '-' in the input box.
onBlur = () => {
const { value } = this.props;
if (value.charAt(value.length - 1) === '.' || value === '-') {
this.props.onChange({ value: value.slice(0, -1) });
}
if (this.props.onBlur) {
this.props.onBlur();
}
}
render() {
const { value } = this.props;
const title = (value ?
(
{value !== '-' ? formatNumber(value) : '-'}
) : '');
return (
);
}
}
class NumericInputDemo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
onChange = (value) => {
this.setState({ value });
}
render() {
const { value } = this.state;
return (
);
}
}
ReactDOM.render(, mountNode);
````
````css
/* to prevent the arrow overflow the popup container,
or the height is not enough when content is empty */
.numeric-input .ant-tooltip-inner {
min-width: 32px;
min-height: 37px;
}
.numeric-input .numeric-input-title {
font-size: 14px;
}
.numeric-input-demo {
width: 120px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input/demo/tooltip.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
数字输入框。
## en-US
Numeric-only input box.
````jsx
import { InputNumber } from 'antd';
function onChange(value) {
console.log('changed', value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 小数
en-US: Decimals
---
## zh-CN
和原生的数字输入框一样，value 的精度由 step 的小数位数决定。
## en-US
A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
````jsx
import { InputNumber } from 'antd';
function onChange(value) {
console.log('changed', value);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/demo/digit.md
content----> ---
order: 2
title:
zh-CN: 不可用
en-US: Disabled
---
## zh-CN
点击按钮切换可用状态。
## en-US
Click the button to toggle between available and disabled states.
````jsx
import { InputNumber, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
disabled: true,
};
},
toggle() {
this.setState({
disabled: !this.state.disabled,
});
},
render() {
return (
Toggle disabled
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/demo/disabled.md
content----> ---
order: 1
title:
zh-CN: 三种大小
en-US: Sizes
---
## zh-CN
三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
## en-US
There are three sizes available to a numeric input box. By default, the size is `28px`. The two additional sizes are `large` and `small` which means `32px` and `22px`, respectively.
````jsx
import { InputNumber } from 'antd';
function onChange(value) {
console.log('changed', value);
}
ReactDOM.render(
, mountNode);
````
````css
.ant-input-number {
margin-right: 10px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/input-number/demo/size.md
content----> ---
order: 2
title:
zh-CN: 所有组件
en-US: All components
---
## zh-CN
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。涉及时间的组件请注意时区设置 [DatePicker](/components/date-picker/#components-date-picker-demo-locale)。
## en-US
Components which need localization support are listed here, you can toggle the language in the demo.
````jsx
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'filter1',
value: 'filter1',
}],
}, {
title: 'Age',
dataIndex: 'age',
}];
const Page = React.createClass({
getInitialState() {
return {
visible: false,
};
},
showModal() {
this.setState({ visible: true });
},
hideModal() {
this.setState({ visible: false });
},
render() {
const info = () => {
Modal.info({
title: 'some info',
content: 'some info',
});
};
const confirm = () => {
Modal.confirm({
title: 'some info',
content: 'some info',
});
};
return (
);
},
});
const App = React.createClass({
getInitialState() {
return {
locale: enUS,
};
},
changeLocale(e) {
const localeValue = e.target.value;
this.setState({ locale: localeValue });
if (!localeValue) {
moment.locale('zh-cn');
} else {
moment.locale('en');
}
},
render() {
return (
Change locale of components:
English
中文
);
},
});
ReactDOM.render(, mountNode);
````
````css
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.example {
margin: 16px 0;
}
.example > * {
margin-right: 8px;
}
.change-locale {
margin-bottom: 16px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/locale-provider/demo/all.md
content----> ---
order: 1
title:
zh-CN: 国际化
en-US: Localization
---
## zh-CN
用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
## en-US
Wrap your app with `LocaleProvider`, and apply the corresponding language package.
````jsx
import { Pagination, LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
function App() {
return (
);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/locale-provider/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 异步加载
en-US: Asynchronous loading
---
## zh-CN
匹配内容列表为异步返回时。
## en-US
async
````jsx
import { Mention } from 'antd';
const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
const AsyncMention = React.createClass({
getInitialState() {
return {
suggestions: [],
loading: false,
};
},
fetchSuggestions(value, callback) {
setTimeout(() => {
callback(users.filter(item => item.indexOf(value) !== -1));
}, 500);
},
onSearchChange(value) {
this.fetchSuggestions(value, (suggestions) => {
this.setState({
suggestions,
loading: false,
});
});
this.setState({
loading: true,
});
},
render() {
const { suggestions, loading } = this.state;
return (
);
},
});
ReactDOM.render(
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/async.md
content----> ---
order: 3
title:
zh-CN: 头像
en-US: Icon Image
---
## zh-CN
自定义建议（含头像）
注意，自定义建议时，onSearchChange 必须不能为空。
## en-US
Customize suggestions
````jsx
import { Mention } from 'antd';
const Nav = Mention.Nav;
const webFrameworks = [
{ name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg' },
{ name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png' },
{ name: 'Dva', type: 'Javascript', icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png' },
{ name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
];
const CustomNavMention = React.createClass({
getInitialState() {
return {
suggestions: [],
};
},
onSearchChange(value) {
const searchValue = value.toLowerCase();
const filtered = webFrameworks.filter(item =>
item.name.toLowerCase().indexOf(searchValue) !== -1
);
const suggestions = filtered.map(suggestion =>
{suggestion.name} - {suggestion.type}
);
this.setState({
suggestions,
});
},
render() {
const { suggestions } = this.state;
return (
);
},
});
ReactDOM.render(
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/avatar.md
content----> ---
order: 0
title:
zh-CN: 基本使用
en-US: Basic
---
## zh-CN
基本使用
## en-US
Basic usage.
````jsx
import { Mention } from 'antd';
const { toString, toEditorState } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
function onSelect(suggestion) {
console.log('onSelect', suggestion);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 受控模式
en-US: Controlled
---
## zh-CN
受控模式.
## en-US
Controlled mode.
````jsx
import { Mention } from 'antd';
const { toEditorState } = Mention;
const App = React.createClass({
getInitialState() {
return {
value: toEditorState('@afc163'),
};
},
handleChange(editorState) {
this.setState({
value: editorState,
});
},
render() {
return ();
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/controllder-simple.md
content----> ---
order: 4
title:
zh-CN: 配合 Form 使用
en-US: With Form
---
## zh-CN
受控模式，例如配合 Form 使用
## en-US
Controlled mode, for example, to work with `Form` .
````jsx
import { Mention, Form, Button } from 'antd';
const { toEditorState, getMentions } = Mention;
const FormItem = Form.Item;
let App = React.createClass({
getInitialState() {
return {
initValue: toEditorState('@afc163'),
};
},
handleReset(e) {
e.preventDefault();
this.props.form.resetFields();
},
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (errors) {
console.log('Errors in form!!!');
return;
}
console.log('Submit!!!');
console.log(values);
});
},
checkMention(rule, value, callback) {
const { getFieldValue } = this.props.form;
const mentions = getMentions(getFieldValue('mention'));
if (mentions.length < 2) {
callback(new Error('More than one must be selected!'));
} else {
callback();
}
},
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
console.log('>> render', getFieldValue('mention') === this.state.initValue);
return (
{getFieldDecorator('mention', {
rules: [
{ validator: this.checkMention },
],
initialValue: this.state.initValue,
})(
)}
Submit
Reset
);
},
});
App = Form.create()(App);
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/controlled.md
content----> ---
order: 2
title:
zh-CN: 自定义建议
en-US: Customize Suggestion
---
## zh-CN
自定义建议
注意，自定义建议时，onSearchChange 必须不能为空。
## en-US
Customize suggestions.
````jsx
import { Mention } from 'antd';
const Nav = Mention.Nav;
const webFrameworks = [
{ name: 'React', type: 'JavaScript' },
{ name: 'Angular', type: 'JavaScript' },
{ name: 'Laravel', type: 'PHP', disabled: true },
{ name: 'Flask', type: 'Python' },
{ name: 'Django', type: 'Python' },
];
function onSelect(suggestion, data) {
console.log('onSelect', suggestion, data);
}
const CustomNavMention = React.createClass({
getInitialState() {
return {
suggestions: [],
};
},
onSearchChange(value) {
const searchValue = value.toLowerCase();
const filtered = webFrameworks.filter(item =>
item.name.toLowerCase().indexOf(searchValue) !== -1
);
const suggestions = filtered.map(suggestion =>
{suggestion.name} - {suggestion.type}
);
this.setState({ suggestions });
},
render() {
const { suggestions } = this.state;
return (
);
},
});
ReactDOM.render(
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/custom-tag.md
content----> ---
order: 5
title:
zh-CN: 多行
en-US: Multi-lines Mode
---
## zh-CN
多行模式，多行模式必须指定高度。
## en-US
Multi lines mode.
````jsx
import { Mention } from 'antd';
const { toString } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/multilines.md
content----> ---
order: 6
title:
zh-CN: 建议渲染父节点
en-US: SuggestionContainer
---
## zh-CN
指定提示渲染的父节点。
## en-US
To set the container of the suggestion.
````jsx
import { Mention, Popover, Button } from 'antd';
const { toString, toEditorState } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
function onSelect(suggestion) {
console.log('onSelect', suggestion);
}
const PopoverContainer = React.createClass({
getSuggestionContainer() {
return this.popover.getPopupDomNode();
},
render() {
const mention = ();
return ( this.popover = popover}>
Click Me
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/mention/demo/popupContainer.md
content----> ---
order: 0
title:
zh-CN: 顶部导航
en-US: Top Navigation
---
## zh-CN
水平的顶部导航菜单。
## en-US
Horizontal top navigation menu.
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const App = React.createClass({
getInitialState() {
return {
current: 'mail',
};
},
handleClick(e) {
console.log('click ', e);
this.setState({
current: e.key,
});
},
render() {
return (
Navigation One
Navigation Two
Navigation Three - Submenu}>
Option 1
Option 2
Option 3
Option 4
Navigation Four - Link
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/horizontal.md
content----> ---
order: 2
title:
zh-CN: 只展开当前父级菜单
en-US: Open current submenu only
---
## zh-CN
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
> 该用法要求 [email protected]+
## en-US
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
> This demo is for [email protected]+.
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const Sider = React.createClass({
getInitialState() {
return {
current: '1',
openKeys: [],
};
},
handleClick(e) {
console.log('Clicked: ', e);
this.setState({ current: e.key });
},
onOpenChange(openKeys) {
const state = this.state;
const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));
let nextOpenKeys = [];
if (latestOpenKey) {
nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
}
if (latestCloseKey) {
nextOpenKeys = this.getAncestorKeys(latestCloseKey);
}
this.setState({ openKeys: nextOpenKeys });
},
getAncestorKeys(key) {
const map = {
sub3: ['sub2'],
};
return map[key] || [];
},
render() {
return (
Navigation One}>
Option 1
Option 2
Option 3
Option 4
Navigation Two}>
Option 5
Option 6
Option 7
Option 8
Navigation Three}>
Option 9
Option 10
Option 11
Option 12
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/sider-current.md
content----> ---
order: 1
title:
zh-CN: 内嵌菜单
en-US: Vertical menu with inline children
---
## zh-CN
垂直菜单，子菜单内嵌在菜单区域。
## en-US
Vertical menu with inline submenus.
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Sider = React.createClass({
getInitialState() {
return {
current: '1',
};
},
handleClick(e) {
console.log('click ', e);
this.setState({
current: e.key,
});
},
render() {
return (
Navigation One}>
Option 1
Option 2
Option 3
Option 4
Navigation Two}>
Option 5
Option 6
Option 7
Option 8
Navigation Three}>
Option 9
Option 10
Option 11
Option 12
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/sider.md
content----> ---
order: 5
title:
zh-CN: 切换菜单类型
en-US: Switch the menu type
---
## zh-CN
展示动态切换模式。
## en-US
Show the dynamic switching mode (between 'inline' and 'vertical').
````jsx
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Sider = React.createClass({
getInitialState() {
return {
mode: 'inline',
};
},
changeMode(value) {
this.setState({
mode: value ? 'vertical' : 'inline',
});
},
render() {
return (
Navigation One}>
Option 1
Option 2
Option 3
Option 4
Navigation Two}>
Option 5
Option 6
Option 7
Option 8
Navigation Three}>
Option 9
Option 10
Option 11
Option 12
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/switch-mode.md
content----> ---
order: 4
title:
zh-CN: 主题
en-US: Menu Themes
---
## zh-CN
内建了两套主题 `light|dark`，默认 `light`。
## en-US
There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
````jsx
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
const Sider = React.createClass({
getInitialState() {
return {
theme: 'dark',
current: '1',
};
},
changeTheme(value) {
this.setState({
theme: value ? 'dark' : 'light',
});
},
handleClick(e) {
console.log('click ', e);
this.setState({
current: e.key,
});
},
render() {
return (
Navigation One}>
Option 1
Option 2
Option 3
Option 4
Navigtion Two}>
Option 5
Option 6
Option 7
Option 8
Navigation Three}>
Option 9
Option 10
Option 11
Option 12
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/theme.md
content----> ---
order: 3
title:
zh-CN: 垂直菜单
en-US: Vertical menu
---
## zh-CN
子菜单是弹出的形式。
## en-US
Submenus open as pop-ups.
````jsx
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
function handleClick(e) {
console.log('click', e);
}
ReactDOM.render(
Navigation One}>
Option 1
Option 2
Option 3
Option 4
Navigation Two}>
Option 5
Option 6
Option 7
Option 8
Navigation Three}>
Option 9
Option 10
Option 11
Option 12
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/menu/demo/vertical.md
content----> ---
order: 2
title:
zh-CN: 修改延时
en-US: Customize duration
---
## zh-CN
自定义时长 `10s`，默认时长为 `1.5s`。
## en-US
Customize message display duration from default `1.5s` to `10s`.
````jsx
import { message, Button } from 'antd';
const success = function () {
message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
};
ReactDOM.render(Customized display duration
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/demo/duration.md
content----> ---
order: 0
title:
zh-CN: 普通提示
en-US: Normal prompt
---
## zh-CN
信息提醒反馈。
## en-US
Normal messages as feedbacks.
````jsx
import { message, Button } from 'antd';
const info = function () {
message.info('This is a normal message');
};
ReactDOM.render(Display normal message
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/demo/info.md
content----> ---
order: 3
title:
zh-CN: 加载中
en-US: Message of loading
---
## zh-CN
进行全局 loading，异步自行移除。
## en-US
Display a global loading indicator, which is dismissed by itself asynchronously.
````jsx
import { message, Button } from 'antd';
const success = () => {
const hide = message.loading('Action in progress..', 0);
// Dismiss manually and asynchronously
setTimeout(hide, 2500);
};
ReactDOM.render(Display a loading indicator
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/demo/loading.md
content----> ---
order: 1
title:
zh-CN: 其他提示类型
en-US: Other types of message
---
## zh-CN
包括成功、失败、警告。
## en-US
Messages of success, error and warning types.
````jsx
import { message, Button } from 'antd';
const success = function () {
message.success('This is a message of success');
};
const error = function () {
message.error('This is a message of error');
};
const warning = function () {
message.warning('This is message of warning');
};
ReactDOM.render(
Success
Error
Warning
````
#components-message-demo-other .ant-btn {
margin-right: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/message/demo/other.md
content----> ---
order: 1
title:
zh-CN: 异步关闭
en-US: Asynchronously close
---
## zh-CN
点击确定后异步关闭对话框，例如提交表单。
## en-US
Asynchronously close a modal dialog when a user clicked OK button, for example,
you can use this pattern when you submit a form.
````jsx
import { Modal, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
ModalText: 'Content of the modal dialog',
visible: false,
};
},
showModal() {
this.setState({
visible: true,
});
},
handleOk() {
this.setState({
ModalText: 'The modal dialog will be closed after two seconds',
confirmLoading: true,
});
setTimeout(() => {
this.setState({
visible: false,
confirmLoading: false,
});
}, 2000);
},
handleCancel() {
console.log('Clicked cancel button');
this.setState({
visible: false,
});
},
render() {
return (
Open a modal dialog
{this.state.ModalText}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/async.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
第一个对话框。
## en-US
Basic modal dialog.
````jsx
import { Modal, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({
visible: true,
});
},
handleOk() {
console.log('Clicked OK');
this.setState({
visible: false,
});
},
handleCancel(e) {
console.log(e);
this.setState({
visible: false,
});
},
render() {
return (
Open a modal dialog
some contents...
some contents...
some contents...
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/basic.md
content----> ---
order: 5
title:
zh-CN: 确认对话框
en-US: Confirmation modal dialog
---
## zh-CN
使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
## en-US
To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
delay closing the dialog.
````jsx
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm() {
confirm({
title: 'Want to delete these items?',
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});
}
ReactDOM.render(
Confirmation modal dialog
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/confirm-promise.md
content----> ---
order: 3
title:
zh-CN: 确认对话框
en-US: Confirmation modal dialog
---
## zh-CN
使用 `confirm()` 可以快捷地弹出确认框。
## en-US
To use `confirm()` to popup a confirmation modal dialog.
````jsx
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm() {
confirm({
title: 'Want to delete these items?',
content: 'some descriptions',
onOk() {
console.log('OK');
},
onCancel() {},
});
}
ReactDOM.render(
confirmation modal dialog
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/confirm.md
content----> ---
order: 2
title:
zh-CN: 自定义页脚
en-US: Customized footer
---
## zh-CN
更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
## en-US
A more complex example, as illustrated in this example, we define a customized footer button bar,
the dialog will change to loading state after clicking submit button , when the loading is over,
the modal dialog will be closed.
````jsx
import { Modal, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
loading: false,
visible: false,
};
},
showModal() {
this.setState({
visible: true,
});
},
handleOk() {
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false, visible: false });
}, 3000);
},
handleCancel() {
this.setState({ visible: false });
},
render() {
return (
Open modal dialog
Return,
Submit
,
]}
>
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/footer.md
content----> ---
order: 5
title:
zh-CN: 信息提示
en-US: Information modal dialog
---
## zh-CN
各种类型的信息提示，只提供一个按钮用于关闭。
## en-US
In the various types of information modal dialog, only one button to close dialog is provided.
````jsx
import { Modal, Button } from 'antd';
function info() {
Modal.info({
title: 'This is a notification message',
content: (
some messages...some messages...
some messages...some messages...
),
onOk() {},
});
}
function success() {
Modal.success({
title: 'This is a success message',
content: 'some messages...some messages...',
});
}
function error() {
Modal.error({
title: 'This is an error message',
content: 'some messages...some messages...',
});
}
function warning() {
Modal.warning({
title: 'This is a warning message',
content: 'some messages...some messages...',
});
}
ReactDOM.render(
Info
Success
Error
Warning
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/info.md
content----> ---
order: 6
title:
zh-CN: 国际化
en-US: Internationalization
---
## zh-CN
设置 `okText` 与 `cancelText` 以自定义按钮文字。
## en-US
To customize the text of the buttons, you need to set `okText` and `cancelText` props.
````jsx
import { Modal, Button } from 'antd';
const LocalizedModal = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({
visible: true,
});
},
handleOk() {
this.setState({
visible: false,
});
},
handleCancel() {
this.setState({
visible: false,
});
},
render() {
return (
Show Modal
Bla bla ...
Bla bla ...
Bla bla ...
);
},
});
function confirm() {
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
});
}
ReactDOM.render(
confirm
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/locale.md
content----> ---
order: 7
debug: true
title:
zh-CN: 手动移除
en-US: Manual to destroy
---
## zh-CN
手动关闭modal。
## en-US
Manually destroying a modal.
````jsx
import { Modal, Button } from 'antd';
function success() {
const modal = Modal.success({
title: 'This is a notification message',
content: 'This modal will be destroyed after 1 second',
});
setTimeout(() => modal.destroy(), 1000);
}
ReactDOM.render(
Success
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/manual.md
content----> ---
order: 7
title:
zh-CN: 自定义位置
en-US: To customize the position of modal
---
## zh-CN
`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
## en-US
After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
set position of modal dialog.
````jsx
import { Modal, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
modal1Visible: false,
modal2Visible: false,
};
},
setModal1Visible(modal1Visible) {
this.setState({ modal1Visible });
},
setModal2Visible(modal2Visible) {
this.setState({ modal2Visible });
},
render() {
return (
this.setModal1Visible(true)}>Display a modal dialog at 20px to Top
this.setModal1Visible(false)}
onCancel={() => this.setModal1Visible(false)}
>
some contents...
some contents...
some contents...
this.setModal2Visible(true)}>Vertically centered modal dialog
this.setModal2Visible(false)}
onCancel={() => this.setModal2Visible(false)}
>
some contents...
some contents...
some contents...
);
},
});
ReactDOM.render(, mountNode);
````
````css
/* use css to set position of modal */
.vertical-center-modal {
text-align: center;
white-space: nowrap;
}
.vertical-center-modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.vertical-center-modal .ant-modal {
display: inline-block;
vertical-align: middle;
top: 0;
text-align: left;
}
/*
// Use flex which not working in IE
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
}
.vertical-center-modal .ant-modal {
top: 0;
}
*/
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/modal/demo/position.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法，4.5 秒后自动关闭。
## en-US
The simplest usage that close the notification box after 4.5s.
````jsx
import { Button, notification } from 'antd';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
ReactDOM.render(
Open the notification box
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/demo/basic.md
content----> ---
order: 4
title:
zh-CN: 自定义图标
en-US: Customized Icon
---
## zh-CN
图标可以被自定义。
## en-US
The icon can be customized to any react node.
````jsx
import { Button, notification, Icon } from 'antd';
const openNotification = () => {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: ,
});
};
ReactDOM.render(
Open the notification box
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/demo/custom-icon.md
content----> ---
order: 1
title:
zh-CN: 自动关闭的延时
en-US: Duration after which the notification box is closed
---
## zh-CN
自定义通知框自动关闭的延时，默认`4.5s`，取消自动关闭只要将该值设为 `0` 即可。
## en-US
`Duration` can be used to specify how long the notification stays open. After the duration time elapses,
the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
the notification box will never close automatically.
````jsx
import { Button, notification } from 'antd';
const openNotification = () => {
const args = {
message: 'Notification Title',
description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
duration: 0,
};
notification.open(args);
};
ReactDOM.render(
Open the notification box
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/demo/duration.md
content----> ---
order: 3
title:
zh-CN: 自定义按钮
en-US: Custom close button
---
## zh-CN
自定义关闭按钮的样式和文字。
## en-US
To customize the style or font of the close button.
````jsx
import { Button, notification } from 'antd';
const close = () => {
console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
};
const openNotification = () => {
const key = `open${Date.now()}`;
const btnClick = function () {
// to hide notification box
notification.close(key);
};
const btn = (
Confirm
);
notification.open({
message: 'Notification Title',
description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
ReactDOM.render(
Open the notification box
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/demo/with-btn.md
content----> ---
order: 2
title:
zh-CN: 带有图标的通知提醒框
en-US: Notification with icon
---
## zh-CN
通知提醒框左侧有图标。
## en-US
A notification box with a icon at the left side.
````jsx
import { Button, notification } from 'antd';
const openNotificationWithIcon = (type) => {
notification[type]({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
ReactDOM.render(
openNotificationWithIcon('success')}>Success
openNotificationWithIcon('info')}>Info
openNotificationWithIcon('warning')}>Warning
openNotificationWithIcon('error')}>Error
, mountNode);
````
.code-box-demo .ant-btn {
margin-right: 1em;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/notification/demo/with-icon.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
基础分页。
## en-US
Basic pagination.
````jsx
import { Pagination } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 改变
en-US: Changer
---
## zh-CN
改变每页显示条目数。
## en-US
Change `pageSize`.
````jsx
import { Pagination } from 'antd';
function onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/changer.md
content----> ---
order: 8
title:
zh-CN: 受控
en-US: Controlled
---
## zh-CN
受控制的页码。
## en-US
Controlled page number.
````jsx
import { Pagination } from 'antd';
const Container = React.createClass({
getInitialState() {
return {
current: 3,
};
},
onChange(page) {
console.log(page);
this.setState({
current: page,
});
},
render() {
return ;
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/controlled.md
content----> ---
order: 3
title:
zh-CN: 跳转
en-US: Jumper
---
## zh-CN
快速跳转到某一页。
## en-US
Jump to a page directly.
````jsx
import { Pagination } from 'antd';
function onChange(pageNumber) {
console.log('Page: ', pageNumber);
}
ReactDOM.render(
,
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/jump.md
content----> ---
order: 4
title:
zh-CN: 迷你
en-US: Mini size
---
## zh-CN
迷你版本。
## en-US
Mini size pagination.
````jsx
import { Pagination } from 'antd';
function showTotal(total) {
return `Total ${total} items`;
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/mini.md
content----> ---
order: 1
title:
zh-CN: 更多
en-US: More
---
## zh-CN
更多分页。
## en-US
More pages.
````jsx
import { Pagination } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/more.md
content----> ---
order: 6
title:
zh-CN: 简洁
en-US: Simple mode
---
## zh-CN
简单的翻页。
## en-US
Simple mode.
````jsx
import { Pagination } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/simple.md
content----> ---
order: 9
title:
zh-CN: 总数
en-US: Total number
---
## zh-CN
通过设置 `showTotal` 展示总共有多少数据。
## en-US
You can show the total number of data by setting `showTotal`.
````jsx
import { Pagination } from 'antd';
ReactDOM.render(
`Total ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
`${range[0]}-${range[1]} of ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/pagination/demo/total.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The basic example.
````jsx
import { Popconfirm, message } from 'antd';
function confirm() {
message.success('Click on Yes');
}
function cancel() {
message.error('Click on No');
}
ReactDOM.render(
Delete
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 条件触发
en-US: Conditional trigger
---
## zh-CN
可以判断是否需要弹出。
## en-US
Make it pop up under some conditions.
````jsx
import { Popconfirm, Switch, message } from 'antd';
const App = React.createClass({
getInitialState() {
return {
visible: false,
condition: true, // Whether meet the condition, if not show popconfirm.
};
},
changeCondition(value) {
this.setState({ condition: value });
},
confirm() {
this.setState({ visible: false });
message.success('Next step.');
},
cancel() {
this.setState({ visible: false });
message.error('Click on cancel.');
},
handleVisibleChange(visible) {
if (!visible) {
this.setState({ visible });
return;
}
// Determining condition before show the popconfirm.
console.log(this.state.condition);
if (this.state.condition) {
this.confirm(); // next step
} else {
this.setState({ visible }); // show the popconfirm
}
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/demo/dynamic-trigger.md
content----> ---
order: 1
title:
zh-CN: 国际化
en-US: Locale text
---
## zh-CN
使用 `okText` 和 `cancelText` 自定义按钮文字。
## en-US
Set `okText` and `cancelText` props to customise the button's labels.
````jsx
import { Popconfirm } from 'antd';
ReactDOM.render(
Delete
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/demo/locale.md
content----> ---
order: 2
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
## en-US
There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
````jsx
import { Popconfirm, message, Button } from 'antd';
const text = 'Are you sure delete this task?';
function confirm() {
message.info('Click on Yes.');
}
ReactDOM.render(
TL
Top
TR
LT
Left
LB
RT
Right
RB
BL
Bottom
BR
````
.code-box-demo .ant-popover-wrap > a {
margin-right: 8px;
}
.code-box-demo .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
#components-popconfirm-demo-placement .ant-btn {
width: 70px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popconfirm/demo/placement.md
content----> ---
order: 4
title:
zh-CN: 箭头指向
en-US: Arrow pointing
---
## zh-CN
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
## en-US
The arrow points to the center of the target element, which set `arrowPointAtCenter`.
````jsx
import { Popover, Button } from 'antd';
const text = Title;
const content = (
Content
Content
);
ReactDOM.render(
Align edge / 边缘对齐
Arrow points to center / 箭头指向中心
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/demo/arrow-point-at-center.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法，浮层的大小由内容区域决定。
## en-US
The most basic example. The size of the floating layer depends on the contents region.
````jsx
import { Popover, Button } from 'antd';
const content = (
Content
Content
);
ReactDOM.render(
Hover me
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 从浮层内关闭
en-US: Controlling the close of the dialog
---
## zh-CN
使用 `visible` 属性控制浮层显示。
## en-US
Use `visible` prop to control the display of the card.
````jsx
import { Popover, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
visible: false,
};
},
hide() {
this.setState({
visible: false,
});
},
handleVisibleChange(visible) {
this.setState({ visible });
},
render() {
return (
Close}
title="Title"
trigger="click"
visible={this.state.visible}
onVisibleChange={this.handleVisibleChange}
>
Cilck me
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/demo/control.md
content----> ---
order: 2
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
位置有十二个方向。
## en-US
There are 12 `placement` options available.
````jsx
import { Popover, Button } from 'antd';
const text = Title;
const content = (
Content
Content
);
const buttonWidth = 70;
ReactDOM.render(
TL
Top
TR
LT
Left
LB
RT
Right
RB
BL
Bottom
BR
, mountNode);
````
.code-box-demo .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
#components-popover-demo-placement .ant-btn {
width: 70px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/demo/placement.md
content----> ---
order: 1
title:
zh-CN: 三种触发方式
en-US: Three ways to trigger
---
## zh-CN
鼠标移入、聚集、点击。
## en-US
Mouse to click, focus and move in.
````jsx
import { Popover, Button } from 'antd';
const content = (
Content
Content
);
ReactDOM.render(
Hover me
Focus me
Click me
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/popover/demo/triggerType.md
content----> ---
order: 4
title:
zh-CN: 进度圈动态展示
en-US: Dynamic circular progress bar
---
## zh-CN
会动的进度条才是好进度条。
## en-US
A dynamic progress bar is better.
````jsx
import { Progress, Button } from 'antd';
const ButtonGroup = Button.Group;
const MyProgress = React.createClass({
getInitialState() {
return {
percent: 0,
};
},
increase() {
let percent = this.state.percent + 10;
if (percent > 100) {
percent = 100;
}
this.setState({ percent });
},
decline() {
let percent = this.state.percent - 10;
if (percent < 0) {
percent = 0;
}
this.setState({ percent });
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/circle-dynamic.md
content----> ---
order: 3
title:
zh-CN: 小型进度圈
en-US: Mini size circular progress bar
---
## zh-CN
小一号的圈形进度。
## en-US
A smaller circular progress bar.
````jsx
import { Progress } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/circle-mini.md
content----> ---
order: 1
title:
zh-CN: 进度圈
en-US: Circular progress bar
---
## zh-CN
圈形的进度。
## en-US
A circular progress bar.
````jsx
import { Progress } from 'antd';
ReactDOM.render(
, mountNode);
````
.ant-progress-circle-wrap,
.ant-progress-line-wrap {
margin-right: 8px;
margin-bottom: 5px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/circle.md
content----> ---
order: 4
title:
zh-CN: 动态展示
en-US: Dynamic
---
## zh-CN
会动的进度条才是好进度条。
## en-US
A dynamic progress bar is better.
````jsx
import { Progress, Button } from 'antd';
const ButtonGroup = Button.Group;
const MyProgress = React.createClass({
getInitialState() {
return {
percent: 0,
};
},
increase() {
let percent = this.state.percent + 10;
if (percent > 100) {
percent = 100;
}
this.setState({ percent });
},
decline() {
let percent = this.state.percent - 10;
if (percent < 0) {
percent = 0;
}
this.setState({ percent });
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/dynamic.md
content----> ---
order: 6
title:
zh-CN: 自定义文字格式
en-US: Custom text format
---
## zh-CN
`format` 属性指定格式。
## en-US
You can custom text format by setting `format`.
````jsx
import { Progress } from 'antd';
ReactDOM.render(
`${percent} Days`} />
'Done'} />
, mountNode);
````
.ant-progress-circle,
.ant-progress-line {
margin-right: 8px;
margin-bottom: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/format.md
content----> ---
order: 2
title:
zh-CN: 小型进度条
en-US: Mini size progress bar
---
## zh-CN
适合放在较狭窄的区域内。
## en-US
Appropriate for a narrow area.
````jsx
import { Progress } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/line-mini.md
content----> ---
order: 0
title:
zh-CN: 进度条
en-US: Progress bar
---
## zh-CN
标准的进度条。
## en-US
A standard progress bar.
````jsx
import { Progress } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/progress/demo/line.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest use.
```jsx
import { Radio } from 'antd';
ReactDOM.render(Radio, mountNode);
```
2
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 不可用
en-US: disabled
---
## zh-CN
Radio 不可用。
## en-US
Radio unavailable.
```jsx
import { Radio, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
disabled: true,
};
},
toggleDisabled() {
this.setState({
disabled: !this.state.disabled,
});
},
render() {
return (
Disabled
Disabled
Toggle disabled
);
},
});
ReactDOM.render(, mountNode);
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/disable.md
content----> ---
order: 3
title:
zh-CN: 按钮样式
en-US: radio style
------------------
## zh-CN
按钮样式的单选组合。
## en-US
The combination of radio button style.
```jsx
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
function onChange(e) {
console.log(`radio checked:${e.target.value}`);
}
ReactDOM.render(
Hangzhou
Shanghai
Beijing
Chengdu
Hangzhou
Shanghai
Beijing
Chengdu
Hangzhou
Shanghai
Beijing
Chengdu
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/radiobutton.md
content----> ---
order: 2
title:
zh-CN: RadioGroup 垂直
en-US: Vertical RadioGroup
--------------------------
## zh-CN
垂直的 RadioGroup，配合更多输入框选项。
## en-US
Vertical RadioGroup, with more radios.
```jsx
import { Radio, Input } from 'antd';
const RadioGroup = Radio.Group;
const App = React.createClass({
getInitialState() {
return {
value: 1,
};
},
onChange(e) {
console.log('radio checked', e.target.value);
this.setState({
value: e.target.value,
});
},
render() {
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
};
return (
Option A
Option B
Option C
More...
{this.state.value === 4 ? : null}
);
},
});
ReactDOM.render(, mountNode);
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/radiogroup-more.md
content----> ---
order: 1
title:
zh-CN: RadioGroup 组合
en-US: RadioGroup group
-----------------------
## zh-CN
一组互斥的 Radio 配合使用。
## en-US
A set of mutually exclusive Radio with the use of
```jsx
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
const App = React.createClass({
getInitialState() {
return {
value: 1,
};
},
onChange(e) {
console.log('radio checked', e.target.value);
this.setState({
value: e.target.value,
});
},
render() {
return (
A
B
C
D
);
},
});
ReactDOM.render(, mountNode);
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/radiogroup.md
content----> ---
order: 5
title:
zh-CN: 大小
en-US: Size
-----------
## zh-CN
大中小三种组合，可以和表单输入框进行对应配合。
## en-US
There are three sizes available: large, medium, and small. It can coordinate with input box.
```jsx
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
ReactDOM.render(
Hangzhou
Shanghai
Beijing
Chengdu
Hangzhou
Shanghai
Beijing
Chengdu
Hangzhou
Shanghai
Beijing
Chengdu
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/radio/demo/size.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Rate } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 只读
en-US: Read only
---
## zh-CN
只读，无法进行鼠标交互。
## en-US
Read only, can't use mouse to interact.
````jsx
import { Rate } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/demo/disabled.md
content----> ---
order: 1
title:
zh-CN: 半星
en-US: Half star
---
## zh-CN
支持选中半星。
## en-US
Support select half star.
````jsx
import { Rate } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/demo/half.md
content----> ---
order: 2
title:
zh-CN: 文案展现
en-US: Show copywriting
---
## zh-CN
给评分组件加上文案展示。
## en-US
Add copywriting in rate components.
````jsx
import { Rate } from 'antd';
const Rater = React.createClass({
getInitialState() {
return {
value: 3,
count: null,
};
},
handleChange(value) {
this.setState({ value });
},
render() {
const { value } = this.state;
return (
{value && {value} stars}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/rate/demo/text.md
content----> ---
order: 11
title:
zh-CN: 自动分词
en-US: Automatic tokenization
---
## zh-CN
试下复制 `露西,杰克` 到输入框里。只在 tags 和 multiple 模式下可用。
## en-US
Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push({i.toString(36) + i});
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
{children}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/automatic-tokenization.md
content----> ---
order: 0
title:
zh-CN: 基本使用
en-US: Basic Usage
---
## zh-CN
基本使用。
## en-US
Basic Usage.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
Jack
Lucy
Disabled
yiminghe
Lucy
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/basic.md
content----> ---
order: 4
title:
zh-CN: 智能提示
en-US: Automatic completion
---
## zh-CN
输入框自动完成功能，下面是一个账号注册表单的例子。
推荐使用 [AutoComplete](/components/auto-complete/) 组件。
## en-US
Automatic completion of select input.
Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const Test = React.createClass({
getInitialState() {
return {
options: [],
};
},
handleChange(value) {
let options;
if (!value || value.indexOf('@') >= 0) {
options = [];
} else {
options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
const email = `${value}@${domain}`;
return {email};
});
}
this.setState({ options });
},
render() {
// filterOption needs to be false，as the value is dynamically generated
return (
{this.state.options}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/combobox.md
content----> ---
order: 6
title:
zh-CN: 联动
en-US: coordinate
---
## zh-CN
省市联动是典型的例子。
推荐使用 [Cascader](/components/cascader/) 组件。
## en-US
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
const App = React.createClass({
getInitialState() {
return {
cities: cityData[provinceData[0]],
secondCity: cityData[provinceData[0]][0],
};
},
handleProvinceChange(value) {
this.setState({
cities: cityData[value],
secondCity: cityData[value][0],
});
},
onSecondCityChange(value) {
this.setState({
secondCity: value,
});
},
render() {
const provinceOptions = provinceData.map(province => {province});
const cityOptions = this.state.cities.map(city => {city});
return (
{provinceOptions}
{cityOptions}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/coordinate.md
content----> ---
order: 10
title:
zh-CN: 获得选项的文本
en-US: Get value of selected item
---
## zh-CN
默认情况下 `onChange` 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 `labelInValue` 属性。
选中项的 label 会被包装到 value 中传递给 `onChange` 等函数，此时 value 是一个对象。
## en-US
As a default behavior, the onChange callback can only get the value of the selected item. The labelInValue prop can be used to get the label property of the selected item.
The label of the selected item will be packed as an object for passing to the onChange callback.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(value); // { key: "lucy", label: "Lucy (101)" }
}
ReactDOM.render(
Jack (100)
Lucy (101)
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/label-in-value.md
content----> ---
order: 2
title:
zh-CN: 多选
en-US: multiple selection
---
## zh-CN
多选，从已有条目中选择（scroll the menu）
## en-US
Multiple selection, selecting from existing items (scroll the menu).
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push({i.toString(36) + i});
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
{children}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/multiple.md
content----> ---
order: 5
title:
zh-CN: 分组
en-US: Option Group
---
## zh-CN
用 `OptGroup` 进行选项分组。
## en-US
Using `OptGroup` to group the options.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const OptGroup = Select.OptGroup;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
Jack
Lucy
yiminghe
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/optgroup.md
content----> ---
order: 9
title:
zh-CN: 搜索框
en-US: Search Box
---
## zh-CN
带有搜索按钮的自动补全输入框。
## en-US
Autocomplete select with search field.
````jsx
import { Input, Select, Button, Icon } from 'antd';
import jsonp from 'jsonp';
import querystring from 'querystring';
import classNames from 'classnames';
const Option = Select.Option;
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`, (err, d) => {
if (currentValue === value) {
const result = d.result;
const data = [];
result.forEach((r) => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
const SearchInput = React.createClass({
getInitialState() {
return {
data: [],
value: '',
focus: false,
};
},
handleChange(value) {
this.setState({ value });
fetch(value, data => this.setState({ data }));
},
handleSubmit() {
console.log('输入框内容是: ', this.state.value);
},
handleFocus() {
this.setState({ focus: true });
},
handleBlur() {
this.setState({ focus: false });
},
render() {
const btnCls = classNames({
'ant-search-btn': true,
'ant-search-btn-noempty': !!this.state.value.trim(),
});
const searchCls = classNames({
'ant-search-input': true,
'ant-search-input-focus': this.state.focus,
});
const options = this.state.data.map(d => {d.text});
return (
{options}
);
},
});
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/search-box.md
content----> ---
order: 1
title:
zh-CN: 带搜索框
en-US: Select with search field
---
## zh-CN
展开后可对选项进行搜索。
## en-US
Search the options while expanded.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
Jack
Lucy
Tom
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/search.md
content----> ---
order: 0
title:
zh-CN: 三种大小
en-US: Three sizes
---
## zh-CN
三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
## en-US
The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px.
````jsx
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
Jack
Lucy
Disabled
Yiminghe
Jack
Lucy
Disabled
Yiminghe
Jack
Lucy
Disabled
Yiminghe
, mountNode);
````
````css
.code-box-demo .ant-select {
margin: 0 8px 10px 0;
}
#components-select-demo-search-box .code-box-demo .ant-select {
margin: 0;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/size.md
content----> ---
order: 3
title:
zh-CN: 标签
en-US: Tags
---
## zh-CN
tags select，随意输入的内容（scroll the menu）
## en-US
Select with tags, transform input to tag (scroll the menu)
````jsx
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push({i.toString(36) + i});
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
{children}
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/select/demo/tags.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。
## en-US
Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
````jsx
import { Slider, Switch } from 'antd';
class Demo extends React.Component {
state = {
disabled: false,
};
handleDisabledChange = (disabled) => {
this.setState({ disabled });
}
render() {
const { disabled } = this.state;
return (
Disabled:
);
}
}
ReactDOM.render(, mountNode);
````
.code-box-demo .ant-slider {
margin-bottom: 16px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/basic.md
content----> ---
order: 4
title:
zh-CN: 事件
en-US: Event
---
## zh-CN
当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。
## en-US
The `onChange` callback function will fire when the user changes the slider's value.
The `onAfterChange` callback function will fire when `onmouseup` fired.
````jsx
import { Slider } from 'antd';
function onChange(value) {
console.log('onChange: ', value);
}
function onAfterChange(value) {
console.log('onAfterChange: ', value);
}
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/event.md
content----> ---
order: 2
title:
zh-CN: 带 icon 的滑块
en-US: Slider with icon
---
## zh-CN
滑块左右可以设置图标来表达业务含义。
## en-US
You can add an icon beside the slider to make it meaningful.
````jsx
import { Slider, Icon } from 'antd';
const IconSlider = React.createClass({
getInitialState() {
const max = this.props.max;
const min = this.props.min;
const mid = ((max - min) / 2).toFixed(5);
return {
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
mid,
sliderValue: this.props.value,
};
},
handleChange(v) {
this.setState({
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v,
});
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
````css
.icon-wrapper {
position: relative;
padding: 0px 30px;
}
.icon-wrapper .anticon {
position: absolute;
top: -3px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
color: #ccc;
}
.icon-wrapper .anticon:first-child {
left: 0;
}
.icon-wrapper .anticon:last-child {
right: 0;
}
.anticon.anticon-highlight {
color: #666;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/icon-slider.md
content----> ---
order: 1
title:
zh-CN: 带输入框的滑块
en-US: Slider with InputNumber
---
## zh-CN
和 [数字输入框](/components/input-number/) 组件保持同步。
## en-US
Synchronize with [InptNumber](/components/input-number/) component.
````jsx
import { Slider, InputNumber, Row, Col } from 'antd';
const IntegerStep = React.createClass({
getInitialState() {
return {
inputValue: 1,
};
},
onChange(value) {
this.setState({
inputValue: value,
});
},
render() {
return (
);
},
});
const DecimalStep = React.createClass({
getInitialState() {
return {
inputValue: 0,
};
},
onChange(value) {
this.setState({
inputValue: value,
});
},
render() {
return (
);
},
});
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/input-number.md
content----> ---
order: 5
title:
zh-CN: 带标签的滑块
en-US: Graduated slider
---
## zh-CN
使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。
## en-US
Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb.
When `included` is false, means that different thumbs are coordinative.
when `step` is null, users can only slide the thumbs onto marks.
````jsx
import { Slider } from 'antd';
const marks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
label: 100°C,
},
};
ReactDOM.render(
included=true
included=false
marks & step
step=null
, mountNode);
````
#components-slider-demo-mark h4 {
margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
margin-bottom: 44px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/mark.md
content----> ---
order: 3
title:
zh-CN: 自定义提示
en-US: Customerize tooltip
---
## zh-CN
使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。
## en-US
Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
````jsx
import { Slider } from 'antd';
function formatter(value) {
return `${value}%`;
}
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/slider/demo/tip-formatter.md
content----> ---
order: 0
title:
zh-CN: 基本用法
en-US: basic Usage
---
## zh-CN
一个简单的 loading 状态。
## en-US
A simple loading status.
````jsx
import { Spin } from 'antd';
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 容器
en-US: Inside a container
---
## zh-CN
放入一个容器中。
## en-US
Spin in a container.
````jsx
import { Spin } from 'antd';
ReactDOM.render(
, mountNode);
````
````css
.example {
text-align: center;
background: rgba(0,0,0,0.05);
border-radius: 4px;
margin-bottom: 20px;
padding: 30px 50px;
margin: 20px 0;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/demo/inside.md
content----> ---
order: 3
title:
zh-CN: 卡片加载中
en-US: Embedded mode
---
## zh-CN
可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。
## en-US
Embedding content into `Spin` will alter it into loading state.
````jsx
import { Spin, Switch, Alert } from 'antd';
const Card = React.createClass({
getInitialState() {
return { loading: false };
},
toggle(value) {
this.setState({ loading: value });
},
render() {
const container = (
);
return (
{container}
Loading state：
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/demo/nested.md
content----> ---
order: 1
title:
zh-CN: 各种大小
en-US: Size
---
## zh-CN
小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。
## en-US
A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
````jsx
import { Spin } from 'antd';
ReactDOM.render(
, mountNode);
````
.ant-spin {
margin-right: 16px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/demo/size.md
content----> ---
order: 4
title:
zh-CN: 自定义描述文案
en-US: Customized description
---
## zh-CN
自定义描述文案。
## en-US
Customized description content.
````jsx
import { Spin, Alert } from 'antd';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/spin/demo/tip.md
content----> ---
order: 6
title:
zh-CN: 步骤运行错误
en-US: Error status
---
## zh-CN
使用 Steps 的 `status` 属性来指定当前步骤的状态。
## en-US
By using `status` of `Steps`, you can specify the state for current step.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/error.md
content----> ---
order: 2
title:
zh-CN: 带图标的步骤条
en-US: With icon
---
## zh-CN
通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。
## en-US
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
````jsx
import { Steps, Icon } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
} />
} />
} />
} />
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/icon.md
content----> ---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
简单的步骤条。
## en-US
The most basic step bar.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/simple.md
content----> ---
order: 1
title:
zh-CN: 迷你版
en-US: Mini version
---
## zh-CN
迷你版的步骤条，通过设置 `` 启用.
## en-US
By setting like this: ``, you can get a mini version.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/small-size.md
content----> ---
order: 3
title:
zh-CN: 步骤切换
en-US: Switch Step
---
## zh-CN
通常配合内容及按钮使用，表示一个流程的处理进度。
## en-US
Cooperate with the content and buttons, to represent the progress of a process.
````jsx
import { Steps, Button, message } from 'antd';
const Step = Steps.Step;
const steps = [{
title: 'First',
content: 'First-content',
}, {
title: 'Second',
content: 'Second-content',
}, {
title: 'Last',
content: 'Last-content',
}];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
};
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
render() {
const { current } = this.state;
return (
{steps.map(item => )}
{
this.state.current < steps.length - 1
&&
this.next()}>Next
}
{
this.state.current === steps.length - 1
&&
message.success('Processing complete!')}>Done
}
{
this.state.current > 0
&&
this.prev()}>
Previous
}
);
}
}
ReactDOM.render(, mountNode);
````
````css
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/step-next.md
content----> ---
order: 5
title:
zh-CN: 竖直方向的小型步骤条
en-US: Vertical mini version
---
## zh-CN
简单的竖直方向的小型步骤条。
## en-US
A simple mini version step bar in the vertical direction.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/vertical-small.md
content----> ---
order: 4
title:
zh-CN: 竖直方向的步骤条
en-US: Vertical
---
## zh-CN
简单的竖直方向的步骤条。
## en-US
A simple step bar in the vertical direction.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/steps/demo/vertical.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The most basic usage.
````jsx
import { Switch } from 'antd';
function onChange(checked) {
console.log(`switch to ${checked}`);
}
ReactDOM.render(
,
mountNode
);
````
.ant-switch {
margin-bottom: 8px;
}
<style>
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 不可用
en-US: Disabled
---
## zh-CN
Switch 失效状态。
## en-US
Disabled state of `Switch`.
````jsx
import { Switch, Button } from 'antd';
const Test = React.createClass({
getInitialState() {
return {
disabled: true,
};
},
toggle() {
this.setState({
disabled: !this.state.disabled,
});
},
render() {
return (
<div>
<Switch disabled={this.state.disabled} />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>
);
},
});
ReactDOM.render(<Test />, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/demo/disabled.md
content----> ---
order: 3
title:
zh-CN: 两种大小
en-US: Two sizes
---
## zh-CN
`size="small"` 表示小号开关。
## en-US
`size="small"` represents a small sized switch.
````jsx
import { Switch } from 'antd';
ReactDOM.render(
<div>
<Switch />
<br />
<Switch size="small" />
</div>
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/demo/size.md
content----> ---
order: 2
title:
zh-CN: 文字和图标
en-US: Text & icon
---
## zh-CN
带有文字和图标。
## en-US
With text and icon.
````jsx
import { Switch, Icon } from 'antd';
ReactDOM.render(<div>
<Switch checkedChildren={'开'} unCheckedChildren={'关'} />
<br />
<Switch checkedChildren="1" unCheckedChildren="0" />
<br />
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
</div>, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/switch/demo/text.md
content----> ---
order: 9
title:
en-US: Ajax
zh-CN: 远程加载数据
---
## zh-CN
这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 `onFilter` 和 `sorter` 函数，而是在把筛选和排序的参数发到服务端来处理。
**注意，此示例使用 [模拟接口](https://randomuser.me)，展示数据可能不准确，请打开网络面板查看请求。**
## en-US
This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
````jsx
import { Table } from 'antd';
import reqwest from 'reqwest';
const columns = [{
title: 'Name',
dataIndex: 'name',
sorter: true,
render: name => `${name.first} ${name.last}`,
width: '20%',
}, {
title: 'Gender',
dataIndex: 'gender',
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
width: '20%',
}, {
title: 'Email',
dataIndex: 'email',
}];
const Test = React.createClass({
getInitialState() {
return {
data: [],
pagination: {},
loading: false,
};
},
handleTableChange(pagination, filters, sorter) {
const pager = this.state.pagination;
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
},
fetch(params = {}) {
console.log('params:', params);
this.setState({ loading: true });
reqwest({
url: 'https://randomuser.me/api',
method: 'get',
data: {
results: 10,
...params,
},
type: 'json',
}).then((data) => {
const pagination = this.state.pagination;
// Read total count from server
// pagination.total = data.totalCount;
pagination.total = 200;
this.setState({
loading: false,
data: data.results,
pagination,
});
});
},
componentDidMount() {
this.fetch();
},
render() {
return (
<Table columns={columns}
rowKey={record => record.registered}
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
);
},
});
ReactDOM.render(<Test />, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/ajax.md
content----> ---
order: 0
title:
en-US: Basic Usage
zh-CN: 基本用法
---
## zh-CN
简单的表格，最后一列是各种操作。
## en-US
Simple table with actions.
````jsx
import { Table, Icon } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/basic.md
content----> ---
order: 11
title:
en-US: border, title and footer
zh-CN: 带边框
---
## zh-CN
添加表格边框线，页头和页脚。
## en-US
Add border, title and footer for table.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Cash Assets',
className: 'column-money',
dataIndex: 'money',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
money: '￥300,000.00',
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
money: '￥1,256,000.00',
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
money: '￥120,000.00',
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
title={() => 'Header'}
footer={() => 'Footer'}
/>
, mountNode);
````
````css
.column-money {
text-align: right;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/bordered.md
content----> ---
order: 14
title:
en-US: colSpan and rowSpan
zh-CN: 表格行/列合并
---
## zh-CN
表头只支持列合并，使用 column 里的 colSpan 进行设置。
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
## en-US
Table column title supports `colSpan` that set in `column`.
Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.
````jsx
import { Table } from 'antd';
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
};
const columns = [{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a href="#">{text}</a>;
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5,
},
};
},
}, {
title: 'Age',
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 2) {
obj.props.rowSpan = 2;
}
// These two are merged into above cell
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
},
}, {
title: 'Phone',
colSpan: 0,
dataIndex: 'phone',
render: renderContent,
}, {
title: 'Address',
dataIndex: 'address',
render: renderContent,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
}, {
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/colspan-rowspan.md
content----> ---
order: 8
title:
en-US: Customized filter panel
zh-CN: 自定义筛选菜单
---
## zh-CN
通过 `filterDropdown`、`filterDropdownVisible` 和 `filterDropdownVisibleChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。
## en-US
Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
````jsx
import { Table, Input, Button } from 'antd';
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
const App = React.createClass({
getInitialState() {
return {
filterDropdownVisible: false,
data,
searchText: '',
};
},
onInputChange(e) {
this.setState({ searchText: e.target.value });
},
onSearch() {
const { searchText } = this.state;
const reg = new RegExp(searchText, 'gi');
this.setState({
filterDropdownVisible: false,
data: data.map((record) => {
const match = record.name.match(reg);
if (!match) {
return null;
}
return {
...record,
name: (
<span>
{record.name.split(reg).map((text, i) => (
i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
))}
</span>
),
};
}).filter(record => !!record),
});
},
render() {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: (
<div className="custom-filter-dropdown">
<Input
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
/>
<Button type="primary" onClick={this.onSearch}>Search</Button>
</div>
),
filterDropdownVisible: this.state.filterDropdownVisible,
onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }),
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}];
return <Table columns={columns} dataSource={this.state.data} />;
},
});
ReactDOM.render(<App />, mountNode);
````
````css
.custom-filter-dropdown {
padding: 8px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.custom-filter-dropdown input {
width: 130px;
margin-right: 8px;
}
.highlight {
color: #f50;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/custom-filter-panel.md
content----> ---
order: 22
title:
en-US: Dynamic Settings
zh-CN: 动态控制表格属性
---
## zh-CN
选择不同配置组合查看效果。
## en-US
Select different settings to see the result.
````jsx
import { Table, Icon, Switch, Radio, Form } from 'antd';
const FormItem = Form.Item;
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 150,
render: text => <a href="#">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 70,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
width: 360,
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: `${i}2`,
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const expandedRowRender = record => <p>{record.description}</p>;
const title = () => 'Here is title';
const footer = () => 'Here is footer';
const scroll = { y: 240 };
class Demo extends React.Component {
state = {
bordered: false,
loading: false,
pagination: true,
size: 'default',
expandedRowRender,
title,
footer,
rowSelection: {},
scroll: undefined,
}
handleToggle = (prop) => {
return (enable) => {
this.setState({ [prop]: enable });
};
}
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
handleExpandChange = (enable) => {
this.setState({ expandedRowRender: enable ? expandedRowRender : false });
}
handleTitleChange = (enable) => {
this.setState({ title: enable ? title : undefined });
}
handleFooterChange = (enable) => {
this.setState({ footer: enable ? footer : undefined });
}
handleRowSelectionChange = (enable) => {
this.setState({ rowSelection: enable ? {} : undefined });
}
handleScollChange = (enable) => {
this.setState({ scroll: enable ? scroll : undefined });
}
render() {
const state = this.state;
return (
<div>
<div className="components-table-demo-control-bar">
<Form inline>
<FormItem label="Bordered">
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
</FormItem>
<FormItem label="loading">
<Switch checked={state.loading} onChange={this.handleToggle('loading')} />
</FormItem>
<FormItem label="Pagination">
<Switch checked={state.pagination} onChange={this.handleToggle('pagination')} />
</FormItem>
<FormItem label="Title">
<Switch checked={!!state.title} onChange={this.handleTitleChange} />
</FormItem>
<FormItem label="Footer">
<Switch checked={!!state.footer} onChange={this.handleFooterChange} />
</FormItem>
<FormItem label="Expandable">
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
</FormItem>
<FormItem label="Checkbox">
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
</FormItem>
<FormItem label="Fixed Header">
<Switch checked={!!state.scroll} onChange={this.handleScollChange} />
</FormItem>
<FormItem label="Size">
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="middle">Middle</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</FormItem>
</Form>
</div>
<Table {...this.state} columns={columns} dataSource={data} />
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
````
<style>
.components-table-demo-control-bar {
margin-bottom: 10px;
}
.components-table-demo-control-bar .ant-form-item {
margin-right: 16px;
margin-bottom: 8px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/dynamic-settings.md
content----> ---
order: 22
title:
en-US: Editable Cells
zh-CN: 可编辑单元格
---
## zh-CN
带单元格编辑功能的表格。
## en-US
Table with editable cells.
````jsx
import { Table, Input, Icon, Button, Popconfirm } from 'antd';
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: false,
}
handleChange = (e) => {
const value = e.target.value;
this.setState({ value });
}
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}
edit = () => {
this.setState({ editable: true });
}
render() {
const { value, editable } = this.state;
return (
{
editable ?
:
{value || ' '}
}
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '30%',
render: (text, record, index) => (
),
}, {
title: 'age',
dataIndex: 'age',
}, {
title: 'address',
dataIndex: 'address',
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record, index) => {
return (
this.state.dataSource.length > 1 ?
(
Delete
) : null
);
},
}];
this.state = {
dataSource: [{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
}, {
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
}],
count: 2,
};
}
onCellChange = (index, key) => {
return (value) => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
}
onDelete = (index) => {
return () => {
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);
this.setState({ dataSource });
};
}
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`,
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1,
});
}
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
Add
}
}
ReactDOM.render(, mountNode);
````
````css
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
line-height: 18px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color:#2db7f5;
}
.editable-add-btn {
margin-bottom: 8px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/edit-cell.md
content----> ---
order: 23
title:
en-US: Editable Rows
zh-CN: 可编辑行
---
## zh-CN
带行编辑功能的表格。
## en-US
Table with editable rows.
````jsx
import { Table, Input, Popconfirm } from 'antd';
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: this.props.editable || false,
}
componentWillReceiveProps(nextProps) {
if (nextProps.editable !== this.state.editable) {
this.setState({ editable: nextProps.editable });
if (nextProps.editable) {
this.cacheValue = this.state.value;
}
}
if (nextProps.status && nextProps.status !== this.props.status) {
if (nextProps.status === 'save') {
this.props.onChange(this.state.value);
} else if (nextProps.status === 'cancel') {
this.setState({ value: this.cacheValue });
this.props.onChange(this.cacheValue);
}
}
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.editable !== this.state.editable ||
nextState.value !== this.state.value;
}
handleChange(e) {
const value = e.target.value;
this.setState({ value });
}
render() {
const { value, editable } = this.state;
return (
{
editable ?
this.handleChange(e)}
/>
:
{value || ' '}
}
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
render: (text, record, index) => this.renderColumns(this.state.data, index, 'name', text),
}, {
title: 'age',
dataIndex: 'age',
width: '15%',
render: (text, record, index) => this.renderColumns(this.state.data, index, 'age', text),
}, {
title: 'address',
dataIndex: 'address',
width: '40%',
render: (text, record, index) => this.renderColumns(this.state.data, index, 'address', text),
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record, index) => {
const { editable } = this.state.data[index].name;
return (
{
editable ?
this.editDone(index, 'save')}>Save
this.editDone(index, 'cancel')}>
Cancel
:
this.edit(index)}>Edit
}
},
}];
this.state = {
data: [{
key: '0',
name: {
editable: false,
value: 'Edward King 0',
},
age: {
editable: false,
value: '32',
},
address: {
value: 'London, Park Lane no. 0',
},
}],
};
}
renderColumns(data, index, key, text) {
const { editable, status } = data[index][key];
if (typeof editable === 'undefined') {
return text;
}
return ( this.handleChange(key, index, value)}
status={status}
/>);
}
handleChange(key, index, value) {
const { data } = this.state;
data[index][key].value = value;
this.setState({ data });
}
edit(index) {
const { data } = this.state;
Object.keys(data[index]).forEach((item) => {
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
data[index][item].editable = true;
}
});
this.setState({ data });
}
editDone(index, type) {
const { data } = this.state;
Object.keys(data[index]).forEach((item) => {
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
data[index][item].editable = false;
data[index][item].status = type;
}
});
this.setState({ data }, () => {
Object.keys(data[index]).forEach((item) => {
if (data[index][item] && typeof data[index][item].editable !== 'undefined') {
delete data[index][item].status;
}
});
});
}
render() {
const { data } = this.state;
const dataSource = data.map((item) => {
const obj = {};
Object.keys(item).forEach((key) => {
obj[key] = key === 'key' ? item[key] : item[key].value;
});
return obj;
});
const columns = this.columns;
return ;
}
}
ReactDOM.render(, mountNode);
````
````css
.editable-row-text {
padding: 5px;
}
.editable-row-operations a {
margin-right: 8px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/edit-row.md
content----> ---
order: 16
title:
en-US: Tree data
zh-CN: 树形数据展示
---
## zh-CN
表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。
> 注：暂不支持父子数据递归关联选择。
## en-US
Display tree structure data in Table, control the indent width by setting `indentSize`.
> Note, no support for recursive selection of tree structure data table yet.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '40%',
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '30%',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
width: '30%',
}];
const data = [{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
}, {
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
}],
}, {
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
}, {
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
}],
}],
}],
}, {
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
// rowSelection objects indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
};
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/expand-children.md
content----> ---
order: 13
title:
en-US: Expandable Row
zh-CN: 可展开
---
## zh-CN
当表格内容较多不能一次性完全展示时。
## en-US
When there's too much information to show and the table can't display all at once.
````jsx
import { Table } from 'antd';
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', render: () => Delete },
];
const data = [
{ key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
{ key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
{ key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
];
ReactDOM.render(
{record.description}
}dataSource={data}
className="table"
/>
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/expand.md
content----> ---
order: 19
title:
en-US: Fixed Columns and Header
zh-CN: 固定头和列
---
## zh-CN
适合同时展示有大量数据和数据列。
> 若列头与内容不对齐，请指定每列宽度 `width`。
> 建议指定 `scroll.x` 为固定宽度。注意，非固定列宽度之和不要超过 `scroll.x`。
## en-US
Suitable for large amounts of data with long columns.
> Specify the width of each column if header and cell do not align properly.
> A fixed width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
````jsx
import { Table } from 'antd';
const columns = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{ title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
{ title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
{ title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => action,
},
];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/fixed-columns-header.md
content----> ---
order: 18
title:
en-US: Fixed Columns
zh-CN: 固定列
---
## zh-CN
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
> 若列头与内容不对齐，请指定每列宽度 `width`。
> 建议指定 scroll.x 为固定宽度。
## en-US
Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
> Specify the width of each column if header and cell do not align properly.
> A fixed width for `scroll.x` is recommended.
````jsx
import { Table } from 'antd';
const columns = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => action,
},
];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
}, {
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
}];
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/fixed-columns.md
content----> ---
order: 17
title:
en-US: Fixed Header
zh-CN: 固定表头
---
## zh-CN
方便一页内展示大量数据。
需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
## en-US
Display large amounts of data in scrollable view.
> Specify the width of each column if header and cell do not align properly.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
width: 150,
}, {
title: 'Age',
dataIndex: 'age',
width: 150,
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/fixed-header.md
content----> ---
order: 21
title:
en-US: Grouping table head
zh-CN: 表头分组
---
## zh-CN
`columns[n]` 可以内嵌 `children`，以渲染分组表头。
## en-US
Group table head with `columns[n].children`.
```jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
filters: [{
text: 'Joe',
value: 'Joe',
}, {
text: 'John',
value: 'John',
}],
onFilter: (value, record) => record.name.indexOf(value) === 0,
}, {
title: 'Other',
children: [{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
sorter: (a, b) => a.age - b.age,
}, {
title: 'Address',
children: [{
title: 'Street',
dataIndex: 'street',
key: 'street',
width: 200,
}, {
title: 'Block',
children: [{
title: 'Building',
dataIndex: 'building',
key: 'building',
width: 50,
}, {
title: 'Door No.',
dataIndex: 'number',
key: 'number',
width: 100,
}],
}],
}],
}, {
title: 'Company',
children: [{
title: 'Company Address',
dataIndex: 'companyAddress',
key: 'companyAddress',
width: 200,
}, {
title: 'Company Name',
dataIndex: 'companyName',
key: 'companyName',
width: 200,
}],
}, {
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
width: 60,
fixed: 'right',
}];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
ReactDOM.render(
, mountNode);
```
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/grouping-columns.md
content----> ---
order: 7
title:
en-US: Filter and sorter
zh-CN: 筛选和排序
---
## zh-CN
对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
## en-US
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'Joe',
value: 'Joe',
}, {
text: 'Jim',
value: 'Jim',
}, {
text: 'Submenu',
value: 'Submenu',
children: [{
text: 'Green',
value: 'Green',
}, {
text: 'Black',
value: 'Black',
}],
}],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
}, {
title: 'Age',
dataIndex: 'age',
sorter: (a, b) => a.age - b.age,
}, {
title: 'Address',
dataIndex: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
filterMultiple: false,
onFilter: (value, record) => record.address.indexOf(value) === 0,
sorter: (a, b) => a.address.length - b.address.length,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
function onChange(pagination, filters, sorter) {
console.log('params', pagination, filters, sorter);
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/head.md
content----> ---
order: 1
title:
en-US: JSX style API
zh-CN: JSX 风格的 API
---
## zh-CN
使用 JSX 风格的 API（2.5.0 以后引入）
## en-US
Using JSX style API (introduced in 2.5.0)
````jsx
import { Table, Icon } from 'antd';
const { Column, ColumnGroup } = Table;
const data = [{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
(
Action 一 {record.name}
Delete
More actions
)}
/>
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/jsx.md
content----> ---
order: 6
title:
en-US: pagination
zh-CN: 分页
---
## zh-CN
数据项较多时显示分页。
## en-US
when use pagination in table.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => {text},
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const pagination = {
total: data.length,
showSizeChanger: true,
onShowSizeChange: (current, pageSize) => {
console.log('Current: ', current, '; PageSize: ', pageSize);
},
onChange: (current) => {
console.log('Current: ', current);
},
};
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/paging.md
content----> ---
order: 7
title:
en-US: Reset filters and sorters
zh-CN: 可控的筛选和排序
---
## zh-CN
使用受控属性对筛选和排序状态进行控制。
> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
> 3. 务必指定 `column.key`。
## en-US
Control filters and sorters by `fileredValue` and `sortOrder`.
> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode.
> 2. Make sure `sortOrder` is assigned for only one column.
> 3. `column.key` is required.
````jsx
import { Table } from 'antd';
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
const App = React.createClass({
getInitialState() {
return {
filteredInfo: null,
sortedInfo: null,
};
},
handleChange(pagination, filters, sorter) {
console.log('Various parameters', pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
},
clearFilters(e) {
e.preventDefault();
this.setState({ filteredInfo: null });
},
clearAll(e) {
e.preventDefault();
this.setState({
filteredInfo: null,
sortedInfo: null,
});
},
setAgeSort(e) {
e.preventDefault();
this.setState({
sortedInfo: {
order: 'descend',
columnKey: 'age',
},
});
},
render() {
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: filteredInfo.name,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: filteredInfo.address,
onFilter: (value, record) => record.address.includes(value),
sorter: (a, b) => a.address.length - b.address.length,
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
}];
return (
);
},
});
ReactDOM.render(, mountNode);
````
````css
.table-operations {
font-size: 12px;
text-align: right;
margin-bottom: 16px;
}
.table-operations a {
margin-left: 8px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/reset-filter.md
content----> ---
order: 3
title:
en-US: Selection and operation
zh-CN: 选择和操作
---
## zh-CN
选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
## en-US
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
````jsx
import { Table, Button } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const App = React.createClass({
getInitialState() {
return {
selectedRowKeys: [], // Check here to configure the default column
loading: false,
};
},
start() {
this.setState({ loading: true });
// ajax request after empty completing
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false,
});
}, 1000);
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
},
render() {
const { loading, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return (
Reload
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/row-selection-and-operation.md
content----> ---
order: 2
title:
en-US: selection
zh-CN: 可选择
---
## zh-CN
第一列是联动的选择框。
## en-US
Rows can be selectable by making first column as a selectable column.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => {text},
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
}];
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
};
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/row-selection.md
content----> ---
order: 10
title:
en-US: size
zh-CN: 紧凑型
---
## zh-CN
两种紧凑型的列表，小型列表只用于对话框内。
## en-US
Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
````jsx
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
Middle size table
Small size table
, mountNode);
````
#components-table-demo-size h4 { margin-bottom: 16px; }
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/table/demo/size.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
默认选中第一项。
## en-US
Default activate first tab.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
function callback(key) {
console.log(key);
}
ReactDOM.render(
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/basic.md
content----> ---
order: 10
title:
zh-CN: 卡片式页签容器
en-US: Container of card type Tab
---
## zh-CN
用于容器顶部，需要一点额外的样式覆盖。
## en-US
Should be used at the top of container, needs to override styles.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
, mountNode);
````
````css
#components-tabs-demo-card-top .code-box-demo {
background: #ECECEC;
overflow: hidden;
padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
height: 120px;
margin-top: -16px;
}
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
background: #fff;
padding: 16px;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
border-color: transparent;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
border-color: #fff;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/card-top.md
content----> ---
order: 8
title:
zh-CN: 卡片式页签
en-US: Card type tab
---
## zh-CN
另一种样式的页签，不提供对应的垂直样式。
## en-US
Another type Tabs, which doesn't support vertical mode.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
function callback(key) {
console.log(key);
}
ReactDOM.render(
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/card.md
content----> ---
order: 11
title:
zh-CN: 自定义新增页签触发器
en-US: Customized trigger of new tab
---
## zh-CN
隐藏默认的页签增加图标，给自定义触发器绑定事件。
## en-US
Hide default plus icon, and bind event for customized trigger.
````jsx
import { Tabs, Button } from 'antd';
const TabPane = Tabs.TabPane;
const Demo = React.createClass({
getInitialState() {
this.newTabIndex = 0;
const panes = [
{ title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
];
return {
activeKey: panes[0].key,
panes,
};
},
onChange(activeKey) {
this.setState({ activeKey });
},
onEdit(targetKey, action) {
this[action](targetKey);
},
add() {
const panes = this.state.panes;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
this.setState({ panes, activeKey });
},
remove(targetKey) {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
this.setState({ panes, activeKey });
},
render() {
return (
ADD
{this.state.panes.map(pane => {pane.content})}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/custom-add-trigger.md
content----> ---
order: 1
title:
zh-CN: 禁用
en-US: Disabled
---
## zh-CN
禁用某一项。
## en-US
Disabled a tab.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
Tab 1
Tab 2
Tab 3
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/disabled.md
content----> ---
order: 9
title:
zh-CN: 新增和关闭页签
en-US: Add & close tab
---
## zh-CN
只有卡片样式的页签支持新增和关闭选项。
## en-US
Only card type Tabs support adding & closeable.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
const Demo = React.createClass({
getInitialState() {
this.newTabIndex = 0;
const panes = [
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
];
return {
activeKey: panes[0].key,
panes,
};
},
onChange(activeKey) {
this.setState({ activeKey });
},
onEdit(targetKey, action) {
this[action](targetKey);
},
add() {
const panes = this.state.panes;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
this.setState({ panes, activeKey });
},
remove(targetKey) {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
this.setState({ panes, activeKey });
},
render() {
return (
{this.state.panes.map(pane => {pane.content})}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/editable-card.md
content----> ---
order: 4
title:
zh-CN: 附加内容
en-US: Extra content
---
## zh-CN
可以在页签右边添加附加操作。
## en-US
You can add extra actions to the right of Tabs.
````jsx
import { Tabs, Button } from 'antd';
const TabPane = Tabs.TabPane;
const operations = Extra Action;
ReactDOM.render(
Content of tab 1
Content of tab 2
Content of tab 3
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/extra.md
content----> ---
order: 2
title:
zh-CN: 图标
en-US: Icon
---
## zh-CN
有图标的标签。
## en-US
The Tab with Icon.
````jsx
import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
Tab 1} key="1">
Tab 1
Tab 2} key="2">
Tab 2
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/icon.md
content----> ---
order: 6
title:
zh-CN: 位置
en-US: Position
---
## zh-CN
有四个位置，`tabPosition="left|right|top|bottom"`。
## en-US
Tab's position: left, right, top or bottom.
````jsx
import { Tabs, Select } from 'antd';
const TabPane = Tabs.TabPane;
const Option = Select.Option;
const Demo = React.createClass({
getInitialState() {
return {
tabPosition: 'top',
};
},
changeTabPosition(tabPosition) {
this.setState({ tabPosition });
},
render() {
return (
Tab position：
top
bottom
left
right
Content of Tab 1
Content of Tab 2
Content of Tab 3
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/position.md
content----> ---
order: 5
title:
zh-CN: 迷你型
en-US: Mini tab
---
## zh-CN
用在弹出框等较狭窄的容器内。
## en-US
Small size can be used in Modal.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
Content of tab 1
Content of tab 2
Content of tab 3
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/size.md
content----> ---
order: 3
title:
zh-CN: 滑动
en-US: Slide
---
## zh-CN
可以左右滑动，容纳更多标签。
## en-US
Tab can be slide to left or right, which is used for a lot of tabs.
````jsx
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
Content of tab 1
Content of tab 2
Content of tab 3
Content of tab 4
Content of tab 5
Content of tab 6
Content of tab 7
Content of tab 8
Content of tab 9
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tabs/demo/slide.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。
## en-US
Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
````jsx
import { Tag } from 'antd';
function log(e) {
console.log(e);
}
function preventDefault(e) {
e.preventDefault();
console.log('Clicked! But prevent default.');
}
ReactDOM.render(
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 可选择
en-US: Checkable
---
## zh-CN
可通过 Tag.CheckableTag 实现类似 Checkbox 的效果，该组件为完全受控组件，不支持非受控用法。
## en-US
Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode.
````jsx
import { Tag } from 'antd';
const CheckableTag = Tag.CheckableTag;
class UncontrolledCheckableTag extends React.Component {
state = { checked: false };
handleChange = (checked) => {
this.setState({ checked });
}
render() {
return ;
}
}
ReactDOM.render(
Unchecked
Checked
Uncontrolled
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/demo/checkable.md
content----> ---
order: 1
title:
zh-CN: 多彩标签
en-US: Colorful
---
## zh-CN
基本标签可以通过 `color` 设置背景色，以提供视觉暗示区分不同目的的标签。
## en-US
We can set the background color of basic Tag by `color`, and it's helpful to tell different Tags.
````jsx
import { Tag } from 'antd';
ReactDOM.render(
#f50
#87d068
#108ee9
mountNode
);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/demo/colorful.md
content----> ---
order: 2
title:
zh-CN: 动态添加和删除
en-US: Add & Remove Dynamically
---
## zh-CN
用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。
## en-US
Generating a set of Tags by array, you can add and remove dynamically.
It's based on `afterClose` event, which will be triggered while the close animation end.
````jsx
import { Tag, Input, Tooltip, Button } from 'antd';
class EditableTagGroup extends React.Component {
state = {
tags: ['Unremovable', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: '',
};
handleClose = (removedTag) => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
console.log(tags);
this.setState({ tags });
}
showInput = () => {
this.setState({ inputVisible: true }, () => this.input.focus());
}
handleInputChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleInputConfirm = () => {
const state = this.state;
const inputValue = state.inputValue;
let tags = state.tags;
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
console.log(tags);
this.setState({
tags,
inputVisible: false,
inputValue: '',
});
}
saveInputRef = input => this.input = input
render() {
const { tags, inputVisible, inputValue } = this.state;
return (
{tags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
);
return isLongTag ? {tagElem} : tagElem;
})}
{inputVisible && (
)}
{!inputVisible && + New Tag}
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/demo/control.md
content----> ---
order: 4
title:
zh-CN: 热门标签
en-US: Hot Tags
---
## zh-CN
选择你感兴趣的话题。
## en-US
Select your favourite topics.
````jsx
import { Tag } from 'antd';
const CheckableTag = Tag.CheckableTag;
const tagsFromServer = ['Movie', 'Books', 'Music'];
class HotTags extends React.Component {
state = {
selectedTags: [],
};
handleChange(tag, checked) {
const { selectedTags } = this.state;
const nextSelectedTags = checked ?
[...selectedTags, tag] :
selectedTags.filter(t => t !== tag);
console.log('You are interested in: ', nextSelectedTags);
this.setState({ selectedTags: nextSelectedTags });
}
render() {
const { selectedTags } = this.state;
return (
Hots:
{tagsFromServer.map(tag => (
-1}
onChange={checked => this.handleChange(tag, checked)}
>
{tag}
))}
);
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tag/demo/hot-tags.md
content----> ---
order: 6
title:
zh-CN: 附加内容
en-US: Addon
---
## zh-CN
在 TimePicker 选择框底部显示自定义的内容。
## en-US
Render addon contents to timepicker panel's bottom.
````jsx
import { TimePicker, Button } from 'antd';
ReactDOM.render(
(
panel.close()}>
Ok
)}
/>
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/addon.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
## en-US
Click `TimePicker`, and then we could select or input a time in panel.
````jsx
import { TimePicker } from 'antd';
function onChange(time, timeString) {
console.log(time, timeString);
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/basic.md
content----> ---
order: 5
title:
zh-CN: 禁止选项
en-US: Disabled Time
---
## zh-CN
可以使用 `disabledHours` `disabledMinutes` `disabledSeconds` 组合禁止用户选择某个时间，配合 `hideDisabledOptions` 可以直接把不可选择的项隐藏。
## en-US
Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`.
````jsx
import { TimePicker } from 'antd';
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
function disabledHours() {
const hours = range(0, 60);
hours.splice(20, 4);
return hours;
}
function disabledMinutes(h) {
if (h === 20) {
return range(0, 31);
} else if (h === 23) {
return range(30, 60);
}
return [];
}
ReactDOM.render(
, mountNode);
````
#components-time-picker-demo-disable-options .ant-time-picker {
width: 120px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/disable-options.md
content----> ---
order: 3
title:
zh-CN: 禁用
en-US: disabled
---
## zh-CN
禁用时间选择。
## en-US
A disabled state of the `TimePicker`.
````jsx
import { TimePicker } from 'antd';
import moment from 'moment';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/disabled.md
content----> ---
order: 4
title:
zh-CN: 选择时分
en-US: Hour and minute
---
## zh-CN
TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
## en-US
While part of `format` is omitted, the corresponding column in panel will disappear, too.
````jsx
import { TimePicker } from 'antd';
import moment from 'moment';
const format = 'HH:mm';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/hide-column.md
content----> ---
order: 2
title:
zh-CN: 三种大小
en-US: Three Sizes
---
## zh-CN
三种大小的输入框，大的用在表单中，中的为默认。
## en-US
The input box comes in three sizes. large is used in the form, while the medium size is the default.
````jsx
import { TimePicker } from 'antd';
import moment from 'moment';
ReactDOM.render(
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/size.md
content----> ---
order: 1
title:
zh-CN: 受控组件
en-US: Under Control
---
## zh-CN
value 和 onChange 需要配合使用。
## en-US
`value` and `onChange` should be used together,
````jsx
import { TimePicker } from 'antd';
class Demo extends React.Component {
state = {
value: null,
};
onChange = (time) => {
console.log(time);
this.setState({ value: time });
}
render() {
return ;
}
}
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/time-picker/demo/value.md
content----> ---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
基本的时间轴。
## en-US
Basic timeline.
````jsx
import { Timeline } from 'antd';
ReactDOM.render(
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 圆圈颜色
en-US: Color
---
## zh-CN
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
## en-US
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
````jsx
import { Timeline } from 'antd';
ReactDOM.render(
Create a services site 2015-09-01
Create a services site 2015-09-01
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/demo/color.md
content----> ---
order: 4
title:
zh-CN: 自定义时间轴点
en-US: Custom
---
## zh-CN
可以设置为图标或其他自定义元素。
## en-US
Set a node as an icon or other custom element.
````jsx
import { Timeline, Icon } from 'antd';
ReactDOM.render(
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
} color="red">Technical testing 2015-09-01
Network problems being solved 2015-09-01
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/demo/custom.md
content----> ---
order: 2
title:
zh-CN: 最后一个
en-US: Last node
---
## zh-CN
在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。
## en-US
When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`。
````jsx
import { Timeline } from 'antd';
ReactDOM.render(
See more}>
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/timeline/demo/pending.md
content----> ---
order: 2
title:
zh-CN: 箭头指向
en-US: Arrow pointing at the center
---
## zh-CN
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
## en-US
By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
````jsx
import { Tooltip, Button } from 'antd';
ReactDOM.render(
Align edge / 边缘对齐
Arrow points to center / 箭头指向中心
, mountNode);
````
.code-box-demo .ant-btn {
margin-right: 1em;
margin-bottom: 1em;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tooltip/demo/arrow-point-at-center.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Tooltip } from 'antd';
ReactDOM.render(
Tooltip will show when mouse enter.
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tooltip/demo/basic.md
content----> ---
order: 1
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
位置有 12 个方向。
## en-US
The ToolTip has 12 placements choice.
````jsx
import { Tooltip } from 'antd';
const text = prompt text;
ReactDOM.render(
, mountNode);
````
#components-tooltip-demo-placement .code-box-demo a {
display: inline-block;
line-height: 32px;
height: 32px;
width: 60px;
font-size: 14px;
text-align: center;
background: #f5f5f5;
margin-right: 1em;
margin-bottom: 1em;
border-radius: 6px;
}
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tooltip/demo/placement.md
content----> ---
order: 2
title:
zh-CN: 高级用法
en-US: Advanced
---
## zh-CN
穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。
## en-US
Advanced Usage of Transfer.
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
````jsx
import { Transfer, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
mockData: [],
targetKeys: [],
};
},
componentDidMount() {
this.getMock();
},
getMock() {
const targetKeys = [];
const mockData = [];
for (let i = 0; i < 20; i++) {
const data = {
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
targetKeys.push(data.key);
}
mockData.push(data);
}
this.setState({ mockData, targetKeys });
},
handleChange(targetKeys) {
this.setState({ targetKeys });
},
renderFooter() {
return (
reload
);
},
render() {
return (
`${item.title}-${item.description}`}
footer={this.renderFooter}
/>
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/demo/advanced.md
content----> ---
order: 0
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
最基本的用法，展示了 `dataSource`、`targetKeys`、每行的渲染函数 `render` 以及回调函数 `onChange` 的用法。
## en-US
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and change callback functions.
````jsx
import { Transfer } from 'antd';
const mockData = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
disabled: i % 3 < 1,
});
}
const targetKeys = mockData
.filter(item => +item.key % 3 > 1)
.map(item => item.key);
const App = React.createClass({
getInitialState() {
return {
targetKeys,
selectedKeys: [],
};
},
handleChange(nextTargetKeys, direction, moveKeys) {
this.setState({ targetKeys: nextTargetKeys });
console.log('targetKeys: ', targetKeys);
console.log('direction: ', direction);
console.log('moveKeys: ', moveKeys);
},
handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
console.log('targetSelectedKeys: ', targetSelectedKeys);
},
render() {
const state = this.state;
return (
item.title}
/>
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/demo/basic.md
content----> ---
order: 3
title:
zh-CN: 自定义渲染行数据
en-US: Custom datasource
---
## zh-CN
自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
## en-US
Custom each Transfer Item, and in this way you can render a complex datasource.
````jsx
import { Transfer } from 'antd';
const App = React.createClass({
getInitialState() {
return {
mockData: [],
targetKeys: [],
};
},
componentDidMount() {
this.getMock();
},
getMock() {
const targetKeys = [];
const mockData = [];
for (let i = 0; i < 20; i++) {
const data = {
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
targetKeys.push(data.key);
}
mockData.push(data);
}
this.setState({ mockData, targetKeys });
},
handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys, direction, moveKeys);
this.setState({ targetKeys });
},
renderItem(item) {
const customLabel = (
{item.title} - {item.description}
);
return {
label: customLabel, // for displayed item
value: item.title, // for title and filter matching
};
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/demo/custom-item.md
content----> ---
order: 4
debug: true
title:
zh-CN: 大数据性能测试
en-US: Performance Test
---
## zh-CN
2000 条数据。
## en-US
2000 items.
````jsx
import { Transfer } from 'antd';
const App = React.createClass({
getInitialState() {
return {
mockData: [],
targetKeys: [],
};
},
componentDidMount() {
this.getMock();
},
getMock() {
const targetKeys = [];
const mockData = [];
for (let i = 0; i < 2000; i++) {
const data = {
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
targetKeys.push(data.key);
}
mockData.push(data);
}
this.setState({ mockData, targetKeys });
},
handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys, direction, moveKeys);
this.setState({ targetKeys });
},
render() {
return (
item.title}
/>
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/demo/large-data.md
content----> ---
order: 1
title:
zh-CN: 带搜索框
en-US: Search
---
## zh-CN
带搜索框的穿梭框，可以自定义搜索函数。
## en-US
Transfer with a search box.
````jsx
import { Transfer } from 'antd';
const App = React.createClass({
getInitialState() {
return {
mockData: [],
targetKeys: [],
};
},
componentDidMount() {
this.getMock();
},
getMock() {
const targetKeys = [];
const mockData = [];
for (let i = 0; i < 20; i++) {
const data = {
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
chosen: Math.random() * 2 > 1,
};
if (data.chosen) {
targetKeys.push(data.key);
}
mockData.push(data);
}
this.setState({ mockData, targetKeys });
},
filterOption(inputValue, option) {
return option.description.indexOf(inputValue) > -1;
},
handleChange(targetKeys) {
this.setState({ targetKeys });
},
render() {
return (
item.title}
/>
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/transfer/demo/search.md
content----> ---
order: 1
title:
zh-CN: 受控操作示例
en-US: basic controlled example
---
## zh-CN
受控操作示例
## en-US
basic controlled example
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const Demo = React.createClass({
getInitialState() {
return {
expandedKeys: ['0-0-0', '0-0-1'],
autoExpandParent: true,
checkedKeys: ['0-0-0'],
selectedKeys: [],
};
},
onExpand(expandedKeys) {
console.log('onExpand', arguments);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys,
autoExpandParent: false,
});
},
onCheck(checkedKeys) {
this.setState({
checkedKeys,
selectedKeys: ['0-3', '0-4'],
});
},
onSelect(selectedKeys, info) {
console.log('onSelect', info);
this.setState({ selectedKeys });
},
render() {
const loop = data => data.map((item) => {
if (item.children) {
return (
{loop(item.children)}
);
}
return ;
});
return (
{loop(gData)}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/demo/basic-controlled.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: basic
---
## zh-CN
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
## en-US
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const Demo = React.createClass({
getDefaultProps() {
return {
keys: ['0-0-0', '0-0-1'],
};
},
getInitialState() {
const keys = this.props.keys;
return {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
defaultCheckedKeys: keys,
};
},
onSelect(info) {
console.log('selected', info);
},
onCheck(info) {
console.log('onCheck', info);
},
render() {
return (
sss} key="0-0-1-0" />
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 拖动示例
en-US: draggable
---
## zh-CN
将节点拖拽到其他节点内部或前后。
## en-US
Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const Demo = React.createClass({
getInitialState() {
return {
gData,
expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
};
},
onDragEnter(info) {
console.log(info);
// expandedKeys 需要受控时设置
// this.setState({
// expandedKeys: info.expandedKeys,
// });
},
onDrop(info) {
console.log(info);
const dropKey = info.node.props.eventKey;
const dragKey = info.dragNode.props.eventKey;
// const dragNodesKeys = info.dragNodesKeys;
const loop = (data, key, callback) => {
data.forEach((item, index, arr) => {
if (item.key === key) {
return callback(item, index, arr);
}
if (item.children) {
return loop(item.children, key, callback);
}
});
};
const data = [...this.state.gData];
let dragObj;
loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
if (info.dropToGap) {
let ar;
let i;
loop(data, dropKey, (item, index, arr) => {
ar = arr;
i = index;
});
ar.splice(i, 0, dragObj);
} else {
loop(data, dropKey, (item) => {
item.children = item.children || [];
// where to insert 示例添加到尾部，可以是随意位置
item.children.push(dragObj);
});
}
this.setState({
gData: data,
});
},
render() {
const loop = data => data.map((item) => {
if (item.children && item.children.length) {
return {loop(item.children)};
}
return ;
});
return (
{loop(this.state.gData)}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/demo/draggable.md
content----> ---
order: 3
title:
zh-CN: 异步数据加载
en-US: load data asynchronously
---
## zh-CN
点击展开节点，动态加载数据。
## en-US
To load data asynchronously when click to expand a treeNode.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
function generateTreeNodes(treeNode) {
const arr = [];
const key = treeNode.props.eventKey;
for (let i = 0; i < 3; i++) {
arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });
}
return arr;
}
function setLeaf(treeData, curKey, level) {
const loopLeaf = (data, lev) => {
const l = lev - 1;
data.forEach((item) => {
if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
curKey.indexOf(item.key) !== 0) {
return;
}
if (item.children) {
loopLeaf(item.children, l);
} else if (l < 1) {
item.isLeaf = true;
}
});
};
loopLeaf(treeData, level + 1);
}
function getNewTreeData(treeData, curKey, child, level) {
const loop = (data) => {
if (level < 1 || curKey.length - 3 > level * 2) return;
data.forEach((item) => {
if (curKey.indexOf(item.key) === 0) {
if (item.children) {
loop(item.children);
} else {
item.children = child;
}
}
});
};
loop(treeData);
setLeaf(treeData, curKey, level);
}
const Demo = React.createClass({
getInitialState() {
return {
treeData: [],
};
},
componentDidMount() {
setTimeout(() => {
this.setState({
treeData: [
{ name: 'pNode 01', key: '0-0' },
{ name: 'pNode 02', key: '0-1' },
{ name: 'pNode 03', key: '0-2', isLeaf: true },
],
});
}, 100);
},
onSelect(info) {
console.log('selected', info);
},
onLoadData(treeNode) {
return new Promise((resolve) => {
setTimeout(() => {
const treeData = [...this.state.treeData];
getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
this.setState({ treeData });
resolve();
}, 1000);
});
},
render() {
const loop = data => data.map((item) => {
if (item.children) {
return {loop(item.children)};
}
return ;
});
const treeNodes = loop(this.state.treeData);
return (
{treeNodes}
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/demo/dynamic.md
content----> ---
order: 4
title:
zh-CN: 可搜索
en-US: Searchable
---
## zh-CN
可搜索的树。
## en-US
Searchable Tree.
````jsx
import { Tree, Input } from 'antd';
const TreeNode = Tree.TreeNode;
const Search = Input.Search;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const dataList = [];
const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
dataList.push({ key, title: key });
if (node.children) {
generateList(node.children, node.key);
}
}
};
generateList(gData);
const getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
class SearchTree extends React.Component {
state = {
expandedKeys: [],
searchValue: '',
autoExpandParent: true,
}
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false,
});
}
onChange = (e) => {
const value = e.target.value;
const expandedKeys = [];
dataList.forEach((item) => {
if (item.key.indexOf(value) > -1) {
expandedKeys.push(getParentKey(item.key, gData));
}
});
const uniqueExpandedKeys = [];
expandedKeys.forEach((item) => {
if (item && uniqueExpandedKeys.indexOf(item) === -1) {
uniqueExpandedKeys.push(item);
}
});
this.setState({
expandedKeys: uniqueExpandedKeys,
searchValue: value,
autoExpandParent: true,
});
}
render() {
const { searchValue, expandedKeys, autoExpandParent } = this.state;
const loop = data => data.map((item) => {
const index = item.key.search(searchValue);
const beforeStr = item.key.substr(0, index);
const afterStr = item.key.substr(index + searchValue.length);
const title = index > -1 ? (
{beforeStr}
{searchValue}
{afterStr}
) : {item.key};
if (item.children) {
return (
{loop(item.children)}
);
}
return ;
});
return (
{loop(gData)}
);
}
}
ReactDOM.render(, mountNode);
````
````css
.ant-tree-searchable-filter {
color: #f50;
transition: all .3s ease;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree/demo/search.md
content----> ---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The most basic usage.
````jsx
import { TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const Demo = React.createClass({
getInitialState() {
return {
value: undefined,
};
},
onChange(value) {
console.log(arguments);
this.setState({ value });
},
render() {
return (
sss} key="random3" />
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree-select/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 多选
en-US: Multiple
---
## zh-CN
多选和勾选框功能。
## en-US
Multiple and checkable.
````jsx
import { TreeSelect } from 'antd';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const treeData = [{
label: 'Node1',
value: '0-0',
key: '0-0',
children: [{
label: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
}],
}, {
label: 'Node2',
value: '0-1',
key: '0-1',
children: [{
label: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
}, {
label: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
}, {
label: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
}],
}];
const Demo = React.createClass({
getInitialState() {
return {
value: ['0-0-0'],
};
},
onChange(value) {
console.log('onChange ', value, arguments);
this.setState({ value });
},
render() {
const tProps = {
treeData,
value: this.state.value,
onChange: this.onChange,
multiple: true,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
searchPlaceholder: 'Please select',
style: {
width: 300,
},
};
return ;
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree-select/demo/checkable.md
content----> ---
order: 1
title:
zh-CN: 从数据直接生成
en-US: Generate form tree data
---
## zh-CN
使用 `treeData` 把 JSON 数据直接生成树结构。
## en-US
The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
````jsx
import { TreeSelect } from 'antd';
const treeData = [{
label: 'Node1',
value: '0-0',
key: '0-0',
children: [{
label: 'Child Node1',
value: '0-0-1',
key: '0-0-1',
}, {
label: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
}],
}, {
label: 'Node2',
value: '0-1',
key: '0-1',
}];
const Demo = React.createClass({
getInitialState() {
return {
value: undefined,
};
},
onChange(value) {
console.log(arguments);
this.setState({ value });
},
render() {
return (
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/tree-select/demo/treeData.md
content----> ---
order: 1
title:
zh-CN: 用户头像
en-US: Avatar
---
## zh-CN
点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。
> `beforeUpload` 的返回值可以是一个 Promise 以支持也支持异步检查：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
## en-US
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
````jsx
import { Upload, Icon, message } from 'antd';
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
function beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}
class Avatar extends React.Component {
state = {};
handleChange = (info) => {
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
}
}
render() {
const imageUrl = this.state.imageUrl;
return (
{
imageUrl ?
:
}
);
}
}
ReactDOM.render(, mountNode);
````
````css
.avatar-uploader,
.avatar-uploader-trigger,
.avatar {
width: 150px;
height: 150px;
}
.avatar-uploader {
display: block;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
.avatar-uploader-trigger {
display: table-cell;
vertical-align: middle;
font-size: 28px;
color: #999;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/avatar.md
content----> ---
order: 0
title:
zh-CN: 点击上传
en-US: Upload by clicking
---
## zh-CN
经典款式，用户点击按钮弹出文件选择框。
## en-US
Classic mode. File selection dialog pops up when upload button is clicked
````jsx
import { Upload, message, Button, Icon } from 'antd';
const props = {
name: 'file',
action: '/upload.do',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
ReactDOM.render(
Click to Upload
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/basic.md
content----> ---
order: 2
title:
zh-CN: 传入已上传的文件
en-US: Set files that have been uploaded
---
## zh-CN
对已上传的文件进行编辑。
## en-US
Edit uploaded files
````jsx
import { Upload, Button, Icon } from 'antd';
const props = {
action: '/upload.do',
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file);
console.log(info.fileList);
}
},
defaultFileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
}, {
uid: -2,
name: 'yyy.png',
status: 'done',
url: 'http://www.baidu.com/yyy.png',
}],
};
ReactDOM.render(
Upload
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/defaultFileList.md
content----> ---
order: 5
title:
zh-CN: 拖拽上传
en-US: Drag and Drop
---
## zh-CN
把文件拖入指定区域，完成上传，同样支持点击上传。
设置 `multiple` 后，在 `IE10+` 可以一次上传多个文件。
## en-US
You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.
We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
````jsx
import { Upload, Icon, message } from 'antd';
const Dragger = Upload.Dragger;
const props = {
name: 'file',
multiple: true,
showUploadList: false,
action: '/upload.do',
onChange(info) {
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`);
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
ReactDOM.render(
Click or drag file to this area to upload
Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/drag.md
content----> ---
order: 4
title:
zh-CN: 完全控制的上传列表
en-US: Complete control over file list
---
## zh-CN
使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：
1) 上传列表数量的限制。
2) 读取远程路径并显示链接。
3) 按照服务器返回信息筛选成功上传的文件。
## en-US
You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows three circumstances:
1) limit the number of uploaded files.
2) read from response and show file link.
3) filter successfully uploaded files according to response from server.
````jsx
import { Upload, Button, Icon } from 'antd';
const MyUpload = React.createClass({
getInitialState() {
return {
fileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
}],
};
},
handleChange(info) {
let fileList = info.fileList;
// 1. Limit the number of uploaded files
// Only to show two recent uploaded files, and old ones will be replaced by the new
fileList = fileList.slice(-2);
// 2. read from response and show file link
fileList = fileList.map((file) => {
if (file.response) {
// Component will show file.url as link
file.url = file.response.url;
}
return file;
});
// 3. filter successfully uploaded files according to response from server
fileList = fileList.filter((file) => {
if (file.response) {
return file.response.status === 'success';
}
return true;
});
this.setState({ fileList });
},
render() {
const props = {
action: '/upload.do',
onChange: this.handleChange,
multiple: true,
};
return (
upload
);
},
});
ReactDOM.render(, mountNode);
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/fileList.md
content----> ---
order: 3
title:
zh-CN: 照片墙
en-US: Pictures Wall
---
## zh-CN
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
## en-US
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
````jsx
import { Upload, Icon, Modal } from 'antd';
class PicturesWall extends React.Component {
state = {
previewVisible: false,
previewImage: '',
fileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
};
handleCancel = () => this.setState({ previewVisible: false })
handlePreview = (file) => {
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
}
handleChange = ({ fileList }) => this.setState({ fileList })
render() {
const { previewVisible, previewImage, fileList } = this.state;
const uploadButton = (
);
return (
{fileList.length >= 3 ? null : uploadButton}
);
}
}
ReactDOM.render(, mountNode);
````
````css
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
font-size: 28px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/picture-card.md
content----> ---
order: 6
title:
zh-CN: 图片列表样式
en-US: Pictures with list style
---
## zh-CN
上传文件为图片，可展示本地缩略图。`IE8/9` 不支持浏览器本地缩略图展示（[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)），可以写 `thumbUrl` 属性来代替。
## en-US
If uploade file is picture, a thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
````jsx
import { Upload, Button, Icon } from 'antd';
const props = {
action: '/upload.do',
listType: 'picture',
defaultFileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}, {
uid: -2,
name: 'yyy.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
};
ReactDOM.render(
upload
upload
, mountNode);
````
````css
/* tile uploaded pictures */
.upload-list-inline .ant-upload-list-item {
display: inline-block;
width: 200px;
margin-right: 8px;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/components/upload/demo/picture-style.md
content----> ---
order: 4
title: 可收起展开的侧边导航
---
页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。
````jsx
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
const SubMenu = Menu.SubMenu;
const AsideCollapse = React.createClass({
getInitialState() {
return {
collapse: true,
};
},
onCollapseChange() {
this.setState({
collapse: !this.state.collapse,
})
},
render() {
const collapse = this.state.collapse;
return (
{!collapse && 导航一}
{!collapse && 导航二}
{!collapse && 导航三}
{!collapse && 导航四}
{!collapse && 导航五}
{collapse ? : }
首页
应用列表
某应用
内容区域
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
);
},
});
ReactDOM.render(, mountNode);
````
````css
.ant-layout-aside {
position: relative;
min-height: 100%;
}
.ant-layout-aside .ant-layout-logo {
width: 150px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 24px 16px 28px;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-logo {
width: 32px;
margin: 16px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: visible;
padding-bottom: 24px;
height: 100%;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-sider {
width: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-sider > .ant-menu {
margin-bottom: 20px;
}
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
margin: 16px 0;
}
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
vertical-align: baseline;
display: inline-block;
}
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
transition: font-size .3s;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
transition: all 0s ease;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
font-size: 16px;
display: inline-block;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
display: none;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
background: #2db7f5;
color: #fff;
transition: all 0s ease;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
display: inline-block;
vertical-align: top;
background: #2db7f5;
color: #fff;
padding-right: 16px;
border-radius: 0 5px 5px 0;
}
/* 实际使用中需要改成 position: fixed */
.ant-layout-aside .ant-aside-action {
height: 42px;
width: 224px;
position: absolute;
bottom: 0;
background: #656565;
color: #fff;
text-align: center;
line-height: 42px;
cursor: pointer;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-aside-action {
width: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.ant-layout-aside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-main {
margin-left: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-container {
margin: 24px 16px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
padding: 24px;
}
.ant-layout-aside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/demo/aside-collapse.md
content----> ---
order: 2
title: 侧边导航
---
顶级导航在侧边栏。
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
````jsx
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
const SubMenu = Menu.SubMenu;
ReactDOM.render(
导航一}>
选项1
选项2
选项3
选项4
导航二}>
选项5
选项6
选项7
选项8
导航三}>
选项9
选项10
选项11
选项12
首页
应用列表
某应用
内容区域
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
, mountNode);
````
````css
.ant-layout-aside {
position: relative;
min-height: 100%;
}
.ant-layout-aside .ant-layout-logo {
width: 150px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 24px 16px 28px;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: auto;
padding-bottom: 24px;
height: 100%;
}
.ant-layout-aside .ant-layout-sider > .ant-menu {
margin-bottom: 20px;
}
.ant-layout-aside .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.ant-layout-aside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px;
}
.ant-layout-aside .ant-layout-container {
margin: 24px 16px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
padding: 24px;
}
.ant-layout-aside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/demo/aside.md
content----> ---
order: 3
title: 吊顶规范
---
吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。
吊顶背景深色，高度 `30px`，和浅色调的主导航配合使用。
````jsx
import { Menu, Breadcrumb } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
ReactDOM.render(
, mountNode);
````
````css
.ant-layout-ceiling-demo {
height: 100%;
}
.ant-layout-ceiling {
font-size: 12px;
height: 30px;
line-height: 30px;
background-color: #242736;
color: #ddd;
}
.ant-layout-ceiling .right {
float: right;
}
.ant-layout-ceiling ul li {
display: inline-block;
margin: 0 4px;
}
.ant-layout-ceiling-demo .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-ceiling-demo .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #d9d9d9;
}
.ant-layout-ceiling-demo .ant-layout-logo {
width: 120px;
height: 32px;
background: #eee;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/demo/ceiling.md
content----> ---
order: 1
title: 顶部导航 + 侧边栏
---
顶级导航在头部，次级导航在侧边栏。
````jsx
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
const SubMenu = Menu.SubMenu;
ReactDOM.render(
导航一
导航二
导航三
二级导航
二级导航
二级导航
首页
应用列表
某应用
导航一}>
选项1
选项2
选项3
选项4
导航二}>
选项5
选项6
选项7
选项8
导航三}>
选项9
选项10
选项11
选项12
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
, mountNode);
````
````css
.ant-layout-topaside {
height: 100%;
}
.ant-layout-topaside .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-topaside .ant-layout-header {
background: #404040;
height: 64px;
}
.ant-layout-topaside .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-topaside .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-topaside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-topaside .ant-layout-container {
background: #fff;
margin: 24px 0 0;
position: relative;
padding: 24px 0;
overflow: hidden;
}
.ant-layout-topaside .ant-layout-sider {
width: 224px;
float: left;
}
.ant-layout-topaside .ant-layout-content {
border-left: 1px solid #e9e9e9;
padding: 0 24px;
overflow: auto;
position: relative;
left: -1px;
}
.ant-layout-topaside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/demo/top-aside.md
content----> ---
order: 0
title: 顶部导航
---
一二级导航都在顶部。
顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
> `` 做演示用，无须复制。
````jsx
import { Menu, Breadcrumb } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
ReactDOM.render(
导航一
导航二
导航三
二级导航
二级导航
二级导航
首页
应用列表
某应用
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
, mountNode);
````
````css
.ant-layout-top {
height: 100%;
}
.ant-layout-top .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-top .ant-layout-header {
background: #404040;
height: 64px;
}
.ant-layout-top .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-top .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-top .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-top .ant-layout-container {
background: #fff;
margin: 24px 0 0;
position: relative;
padding-top: 24px;
overflow: hidden;
}
.ant-layout-top .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}
````
getRemainingRequest---> /Users/qingtian/Desktop/sy-standard-project/docs/spec/layout/demo/top.md
📦 999/1123 build modulests-loader: Using [email protected] and /Users/qingtian/Desktop/sy-standard-project/tsconfig.json
📦 1027/1191 build modules