mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 04:13:13 +08:00
docs: remove useless newline in documentation
This commit is contained in:
parent
ee4877a32c
commit
df3ba36720
@ -3,8 +3,6 @@ order: 4
|
|||||||
chinese: 更新日志
|
chinese: 更新日志
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 0.12.13
|
## 0.12.13
|
||||||
|
|
||||||
`2016-03-29`
|
`2016-03-29`
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的用法。
|
最简单的用法。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Affix, Button } from 'antd';
|
import { Affix, Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 下方固定
|
|||||||
|
|
||||||
固定在屏幕下方
|
固定在屏幕下方
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Affix, Button } from 'antd';
|
import { Affix, Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 偏移
|
|||||||
|
|
||||||
达到一定的偏移量才触发。
|
达到一定的偏移量才触发。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Affix, Button } from 'antd';
|
import { Affix, Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 其它
|
|||||||
english: Affix
|
english: Affix
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
将页面元素钉在可视范围。
|
将页面元素钉在可视范围。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的用法,适用于简短的警告提示。
|
最简单的用法,适用于简短的警告提示。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 可关闭的警告提示
|
|||||||
|
|
||||||
显示关闭按钮,点击可关闭警告提示。
|
显示关闭按钮,点击可关闭警告提示。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 自定义关闭
|
|||||||
|
|
||||||
可以自定义关闭,自定义的文字会替换原先的关闭 `Icon`。
|
可以自定义关闭,自定义的文字会替换原先的关闭 `Icon`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 含有辅助性文字介绍
|
|||||||
|
|
||||||
含有辅助性文字介绍的警告提示。
|
含有辅助性文字介绍的警告提示。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 图标
|
|||||||
|
|
||||||
可口的图标让信息类型更加醒目。
|
可口的图标让信息类型更加醒目。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 四种样式
|
|||||||
|
|
||||||
共有四种样式 `success`、`info`、`warning`、`error`。
|
共有四种样式 `success`、`info`、`warning`、`error`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Alert } from 'antd';
|
import { Alert } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 展示
|
|||||||
english: Alert
|
english: Alert
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
警告提示,展现需要关注的信息。
|
警告提示,展现需要关注的信息。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 大数字
|
|||||||
|
|
||||||
超过 99 的会显示为 `99+`。
|
超过 99 的会显示为 `99+`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge } from 'antd';
|
import { Badge } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
简单的徽章展示。
|
简单的徽章展示。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge } from 'antd';
|
import { Badge } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 动态
|
|||||||
|
|
||||||
展示动态变化的效果。
|
展示动态变化的效果。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge, Button, Icon } from 'antd';
|
import { Badge, Button, Icon } from 'antd';
|
||||||
const ButtonGroup = Button.Group;
|
const ButtonGroup = Button.Group;
|
||||||
|
@ -5,8 +5,6 @@ title: 讨嫌的小红点
|
|||||||
|
|
||||||
没有具体的数字。
|
没有具体的数字。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge, Icon } from 'antd';
|
import { Badge, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 可点击
|
|||||||
|
|
||||||
用 a 标签进行包裹即可。
|
用 a 标签进行包裹即可。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge } from 'antd';
|
import { Badge } from 'antd';
|
||||||
|
|
||||||
|
@ -7,8 +7,6 @@ title: 独立使用
|
|||||||
|
|
||||||
> 在右上角的 badge 则限定为红色。
|
> 在右上角的 badge 则限定为红色。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge } from 'antd';
|
import { Badge } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 封顶数字
|
|||||||
|
|
||||||
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
|
超过 `overflowCount` 的会显示为 `${overflowCount}+`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Badge } from 'antd';
|
import { Badge } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 展示
|
|||||||
english: Badge
|
english: Badge
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
图标右上角的圆形徽标数字。
|
图标右上角的圆形徽标数字。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的用法。
|
最简单的用法。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Breadcrumb } from 'antd';
|
import { Breadcrumb } from 'antd';
|
||||||
|
|
||||||
|
@ -6,8 +6,6 @@ title: 路由
|
|||||||
|
|
||||||
和 `react-router@2.x` 进行结合使用。
|
和 `react-router@2.x` 进行结合使用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
const ReactRouter = require('react-router');
|
const ReactRouter = require('react-router');
|
||||||
let { Router, Route, Link, hashHistory } = ReactRouter;
|
let { Router, Route, Link, hashHistory } = ReactRouter;
|
||||||
@ -64,7 +62,6 @@ ReactDOM.render(
|
|||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
|
||||||
|
|
||||||
````css
|
````css
|
||||||
#components-breadcrumb-demo-router iframe {
|
#components-breadcrumb-demo-router iframe {
|
||||||
height: 180px;
|
height: 180px;
|
||||||
|
@ -5,8 +5,6 @@ title: 分隔符
|
|||||||
|
|
||||||
使用 `separator=">"` 可以自定义分隔符。
|
使用 `separator=">"` 可以自定义分隔符。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Breadcrumb } from 'antd';
|
import { Breadcrumb } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 带有图标的
|
|||||||
|
|
||||||
图标放在文字前面。
|
图标放在文字前面。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Breadcrumb, Icon } from 'antd';
|
import { Breadcrumb, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 导航
|
|||||||
english: Breadcrumb
|
english: Breadcrumb
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
显示当前页面在系统层级结构中的位置,并能向上返回。
|
显示当前页面在系统层级结构中的位置,并能向上返回。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -9,8 +9,6 @@ title: 按钮类型
|
|||||||
|
|
||||||
主按钮和次按钮可独立使用,需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。
|
主按钮和次按钮可独立使用,需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
@ -7,8 +7,6 @@ title: 按钮组合
|
|||||||
|
|
||||||
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
|
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button, Icon } from 'antd';
|
import { Button, Icon } from 'antd';
|
||||||
const ButtonGroup = Button.Group;
|
const ButtonGroup = Button.Group;
|
||||||
|
@ -5,8 +5,6 @@ title: 不可用
|
|||||||
|
|
||||||
添加 `disabled` 属性即可让按钮处于不可用状态,同时按钮样式也会改变。
|
添加 `disabled` 属性即可让按钮处于不可用状态,同时按钮样式也会改变。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 图标按钮
|
|||||||
|
|
||||||
`Button` 内可以嵌套图标,图标可以放在文字前、后,也可以单独存在。
|
`Button` 内可以嵌套图标,图标可以放在文字前、后,也可以单独存在。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 加载中
|
|||||||
|
|
||||||
添加 `loading` 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
|
添加 `loading` 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button, Icon } from 'antd';
|
import { Button, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -7,8 +7,6 @@ title: 按钮尺寸
|
|||||||
|
|
||||||
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`,则尺寸为中。
|
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`,则尺寸为中。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 基本
|
|||||||
english: Button
|
english: Button
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
按钮用于开始一个即时操作。
|
按钮用于开始一个即时操作。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
一个通用的日历面板,支持年/月切换。
|
一个通用的日历面板,支持年/月切换。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Calendar } from 'antd';
|
import { Calendar } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 卡片模式
|
|||||||
|
|
||||||
用于嵌套在空间有限的容器中。
|
用于嵌套在空间有限的容器中。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Calendar } from 'antd';
|
import { Calendar } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 自定义渲染
|
|||||||
|
|
||||||
用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
|
用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Calendar } from 'antd';
|
import { Calendar } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 国际化
|
|||||||
|
|
||||||
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
|
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Calendar } from 'antd';
|
import { Calendar } from 'antd';
|
||||||
import enUS from 'antd/lib/calendar/locale/en_US';
|
import enUS from 'antd/lib/calendar/locale/en_US';
|
||||||
|
@ -5,8 +5,6 @@ title: 通知事项日历演示
|
|||||||
|
|
||||||
一个复杂的应用实例。
|
一个复杂的应用实例。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Calendar } from 'antd';
|
import { Calendar } from 'antd';
|
||||||
|
|
||||||
@ -54,7 +52,6 @@ function dateCellRender(value) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function getMonthData(value) {
|
function getMonthData(value) {
|
||||||
if (value.getMonth() === 8) {
|
if (value.getMonth() === 8) {
|
||||||
return 1394;
|
return 1394;
|
||||||
@ -74,7 +71,6 @@ ReactDOM.render(
|
|||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
|
||||||
|
|
||||||
````css
|
````css
|
||||||
.events {
|
.events {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
@ -6,8 +6,6 @@ cols: 1
|
|||||||
english: Calendar
|
english: Calendar
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
按照日历形式展示数据的容器。
|
按照日历形式展示数据的容器。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 典型卡片
|
|||||||
|
|
||||||
包含标题、内容、操作区域。
|
包含标题、内容、操作区域。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 栅格卡片
|
|||||||
|
|
||||||
在系统概览页面常常和栅格进行配合。
|
在系统概览页面常常和栅格进行配合。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Card, Col, Row } from 'antd';
|
import { Card, Col, Row } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 预加载的卡片
|
|||||||
|
|
||||||
数据读入前会有文本块样式。
|
数据读入前会有文本块样式。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 更灵活的内容展示
|
|||||||
|
|
||||||
可以调整默认边距,设定宽度。
|
可以调整默认边距,设定宽度。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 简洁卡片
|
|||||||
|
|
||||||
只包含内容区域。
|
只包含内容区域。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Card } from 'antd';
|
import { Card } from 'antd';
|
||||||
|
|
||||||
|
@ -6,8 +6,6 @@ cols: 1
|
|||||||
english: Card
|
english: Card
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
通用卡片容器。
|
通用卡片容器。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 自动切换
|
|||||||
|
|
||||||
定时切换下一张。
|
定时切换下一张。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Carousel } from 'antd';
|
import { Carousel } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的用法。
|
最简单的用法。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Carousel } from 'antd';
|
import { Carousel } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 渐显
|
|||||||
|
|
||||||
切换效果为渐显。
|
切换效果为渐显。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Carousel } from 'antd';
|
import { Carousel } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 垂直
|
|||||||
|
|
||||||
垂直显示。
|
垂直显示。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Carousel } from 'antd';
|
import { Carousel } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 展示
|
|||||||
english: Carousel
|
english: Carousel
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
旋转木马,一组轮播的区域。
|
旋转木马,一组轮播的区域。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
省市区级联。
|
省市区级联。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 选择即改变
|
|||||||
|
|
||||||
这种交互允许只选中父级选项。
|
这种交互允许只选中父级选项。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 可以自定义显示
|
|||||||
|
|
||||||
切换按钮和结果分开。
|
切换按钮和结果分开。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 默认值
|
|||||||
|
|
||||||
默认值通过数组的方式指定。
|
默认值通过数组的方式指定。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 禁用选项
|
|||||||
|
|
||||||
通过指定 options 里的 `disabled` 字段。
|
通过指定 options 里的 `disabled` 字段。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 移入展开
|
|||||||
|
|
||||||
通过移入展开下级菜单,点击完成选择。
|
通过移入展开下级菜单,点击完成选择。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 大小
|
|||||||
|
|
||||||
不同大小的级联选择器。
|
不同大小的级联选择器。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Cascader } from 'antd';
|
import { Cascader } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 表单
|
|||||||
english: Cascader
|
english: Cascader
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
级联选择框。
|
级联选择框。
|
||||||
|
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 基本用法
|
|||||||
|
|
||||||
简单的 checkbox。
|
简单的 checkbox。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Checkbox } from 'antd';
|
import { Checkbox } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 和外部组件通信
|
|||||||
|
|
||||||
联动 checkbox。
|
联动 checkbox。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Checkbox, Button } from 'antd';
|
import { Checkbox, Button } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 不可用
|
|||||||
|
|
||||||
checkbox 不可用。
|
checkbox 不可用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Checkbox } from 'antd';
|
import { Checkbox } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: Checkbox 组
|
|||||||
|
|
||||||
方便的从数组生成 Checkbox 组。
|
方便的从数组生成 Checkbox 组。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Checkbox } from 'antd';
|
import { Checkbox } from 'antd';
|
||||||
const CheckboxGroup = Checkbox.Group;
|
const CheckboxGroup = Checkbox.Group;
|
||||||
|
@ -5,8 +5,6 @@ type: 表单
|
|||||||
english: Checkbox
|
english: Checkbox
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
多选框。
|
多选框。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 手风琴
|
|||||||
|
|
||||||
手风琴,每次只打开一个tab。默认打开第一个。
|
手风琴,每次只打开一个tab。默认打开第一个。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Collapse } from 'antd';
|
import { Collapse } from 'antd';
|
||||||
const Panel = Collapse.Panel;
|
const Panel = Collapse.Panel;
|
||||||
|
@ -5,8 +5,6 @@ title: 折叠面板
|
|||||||
|
|
||||||
可以同时展开多个面板,这个例子默认展开了第一个。
|
可以同时展开多个面板,这个例子默认展开了第一个。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Collapse } from 'antd';
|
import { Collapse } from 'antd';
|
||||||
const Panel = Collapse.Panel;
|
const Panel = Collapse.Panel;
|
||||||
|
@ -5,8 +5,6 @@ title: 面板嵌套
|
|||||||
|
|
||||||
手风琴嵌套折叠面板。
|
手风琴嵌套折叠面板。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Collapse } from 'antd';
|
import { Collapse } from 'antd';
|
||||||
const Panel = Collapse.Panel;
|
const Panel = Collapse.Panel;
|
||||||
|
@ -5,8 +5,6 @@ type: 展示
|
|||||||
english: Collapse
|
english: Collapse
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
可以折叠/展开的内容区域。
|
可以折叠/展开的内容区域。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的用法。
|
最简单的用法。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -7,8 +7,6 @@ title: 指定不可选择日期
|
|||||||
|
|
||||||
如上例:不可选择今天之后的日期。
|
如上例:不可选择今天之后的日期。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 禁用
|
|||||||
|
|
||||||
选择框的不可用状态。
|
选择框的不可用状态。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 日期格式
|
|||||||
|
|
||||||
使用 `format` 属性,可以自定义你需要的日期显示格式,如 `yyyy/MM/dd`。
|
使用 `format` 属性,可以自定义你需要的日期显示格式,如 `yyyy/MM/dd`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 国际化
|
|||||||
|
|
||||||
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
|
通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
import enUS from 'antd/lib/date-picker/locale/en_US';
|
import enUS from 'antd/lib/date-picker/locale/en_US';
|
||||||
|
@ -5,8 +5,6 @@ title: 月选择器
|
|||||||
|
|
||||||
使用 `MonthPicker` 实现月选择器.
|
使用 `MonthPicker` 实现月选择器.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
const MonthPicker = DatePicker.MonthPicker;
|
const MonthPicker = DatePicker.MonthPicker;
|
||||||
|
@ -5,8 +5,6 @@ title: 日期范围二
|
|||||||
|
|
||||||
使用 `RangePicker` 实现日期范围选择有更好的交互体验。
|
使用 `RangePicker` 实现日期范围选择有更好的交互体验。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
const RangePicker = DatePicker.RangePicker;
|
const RangePicker = DatePicker.RangePicker;
|
||||||
|
@ -5,8 +5,6 @@ title: 三种大小
|
|||||||
|
|
||||||
三种大小的输入框,大的用在表单中,中的为默认。
|
三种大小的输入框,大的用在表单中,中的为默认。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 日期范围一
|
|||||||
|
|
||||||
可以设置 `disabledDate` 方法,来约束开始和结束日期。
|
可以设置 `disabledDate` 方法,来约束开始和结束日期。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 日期时间选择
|
|||||||
|
|
||||||
增加选择时间功能。不要修改时间的格式 `HH:mm:ss`。
|
增加选择时间功能。不要修改时间的格式 `HH:mm:ss`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -6,8 +6,6 @@ title: 日期时间选择二
|
|||||||
|
|
||||||
和 <a href="/components/time-picker">时间选择框</a> 配合使用。
|
和 <a href="/components/time-picker">时间选择框</a> 配合使用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { DatePicker, TimePicker } from 'antd';
|
import { DatePicker, TimePicker } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 表单
|
|||||||
english: DatePicker
|
english: DatePicker
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
输入或选择日期的控件。
|
输入或选择日期的控件。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
最简单的下拉菜单。
|
最简单的下拉菜单。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown, Icon } from 'antd';
|
import { Menu, Dropdown, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 带下拉框的按钮
|
|||||||
|
|
||||||
左边是按钮,右边是额外的相关功能菜单。
|
左边是按钮,右边是额外的相关功能菜单。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown } from 'antd';
|
import { Menu, Dropdown } from 'antd';
|
||||||
const DropdownButton = Dropdown.Button;
|
const DropdownButton = Dropdown.Button;
|
||||||
|
@ -5,8 +5,6 @@ title: 触发事件
|
|||||||
|
|
||||||
点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。
|
点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown, Icon } from 'antd';
|
import { Menu, Dropdown, Icon } from 'antd';
|
||||||
const onClick = function ({ key }) {
|
const onClick = function ({ key }) {
|
||||||
|
@ -5,8 +5,6 @@ title: 其他元素
|
|||||||
|
|
||||||
分割线和不可用菜单项。
|
分割线和不可用菜单项。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown, Icon } from 'antd';
|
import { Menu, Dropdown, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ title: 多级菜单
|
|||||||
|
|
||||||
传入的菜单里有多个层级。
|
传入的菜单里有多个层级。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown, Icon } from 'antd';
|
import { Menu, Dropdown, Icon } from 'antd';
|
||||||
const SubMenu = Menu.SubMenu;
|
const SubMenu = Menu.SubMenu;
|
||||||
|
@ -5,8 +5,6 @@ title: 触发方式
|
|||||||
|
|
||||||
默认是移入触发菜单,可以点击触发。
|
默认是移入触发菜单,可以点击触发。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Menu, Dropdown, Icon } from 'antd';
|
import { Menu, Dropdown, Icon } from 'antd';
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 展示
|
|||||||
english: Dropdown
|
english: Dropdown
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
向下弹出的列表。
|
向下弹出的列表。
|
||||||
|
|
||||||
## 何时使用
|
## 何时使用
|
||||||
|
@ -7,8 +7,6 @@ title: 高级搜索
|
|||||||
|
|
||||||
有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。
|
有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, Row, Col, Button } from 'antd';
|
import { Form, Input, Row, Col, Button } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -7,8 +7,6 @@ title: 表单控件
|
|||||||
|
|
||||||
`注`: 输入框:只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
`注`: 输入框:只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, Select, Checkbox, Radio } from 'antd';
|
import { Form, Input, Select, Checkbox, Radio } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -5,8 +5,6 @@ title: 典型表单
|
|||||||
|
|
||||||
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
|
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, Button, Checkbox, Radio, Row, Col, Tooltip, Icon } from 'antd';
|
import { Form, Input, Button, Checkbox, Radio, Row, Col, Tooltip, Icon } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -5,8 +5,6 @@ title: 平行排列
|
|||||||
|
|
||||||
行内排列,常用于登录界面。
|
行内排列,常用于登录界面。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, Button, Checkbox } from 'antd';
|
import { Form, Input, Button, Checkbox } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -5,8 +5,6 @@ title: 输入框组合
|
|||||||
|
|
||||||
各类输入框的组合展现。
|
各类输入框的组合展现。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, Select, Row, Col } from 'antd';
|
import { Form, Input, Select, Row, Col } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -7,9 +7,6 @@ title: Input 输入框
|
|||||||
|
|
||||||
注意: 在表单里面,我们只使用**大尺寸**, 即高度为 **32px**,作为唯一的尺寸。
|
注意: 在表单里面,我们只使用**大尺寸**, 即高度为 **32px**,作为唯一的尺寸。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Row, Col, Input } from 'antd';
|
import { Row, Col, Input } from 'antd';
|
||||||
const InputGroup = Input.Group;
|
const InputGroup = Input.Group;
|
||||||
|
@ -5,8 +5,6 @@ title: 表单组合
|
|||||||
|
|
||||||
集中营,展示和表单相关的其他 ant-design 组件。
|
集中营,展示和表单相关的其他 ant-design 组件。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
|
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
|
||||||
Slider, Button, Row, Col, Upload, Icon } from 'antd';
|
Slider, Button, Row, Col, Upload, Icon } from 'antd';
|
||||||
|
@ -5,9 +5,6 @@ title: 搜索框
|
|||||||
|
|
||||||
带有搜索按钮。
|
带有搜索按钮。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Icon, Input, Button } from 'antd';
|
import { Icon, Input, Button } from 'antd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -5,8 +5,6 @@ title: 表单校验
|
|||||||
|
|
||||||
基本的表单校验例子。
|
基本的表单校验例子。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button, Form, Input } from 'antd';
|
import { Button, Form, Input } from 'antd';
|
||||||
const createForm = Form.create;
|
const createForm = Form.create;
|
||||||
|
@ -7,8 +7,6 @@ title: 自定义校验规则
|
|||||||
|
|
||||||
这里使用了 `this.props.form.validateFields` 方法,在对第一次输入的密码进行校验时会触发二次密码的校验。
|
这里使用了 `this.props.form.validateFields` 方法,在对第一次输入的密码进行校验时会触发二次密码的校验。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Button, Form, Input, Row, Col, Modal } from 'antd';
|
import { Button, Form, Input, Row, Col, Modal } from 'antd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -5,8 +5,6 @@ title: 校验其他组件
|
|||||||
|
|
||||||
提供以下组件表单域的校验:`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`,进行校验,可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
|
提供以下组件表单域的校验:`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`,进行校验,可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Select, Radio, Checkbox, Button, DatePicker, InputNumber, Form, Cascader, Icon } from 'antd';
|
import { Select, Radio, Checkbox, Button, DatePicker, InputNumber, Form, Cascader, Icon } from 'antd';
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
|
@ -11,8 +11,6 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
|
|||||||
|
|
||||||
**注意**: 反馈图标只对 `<Input />` 有效。
|
**注意**: 反馈图标只对 `<Input />` 有效。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Input, DatePicker, Col } from 'antd';
|
import { Form, Input, DatePicker, Col } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
@ -6,8 +6,6 @@ cols: 1
|
|||||||
english: Form
|
english: Form
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
|
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
|
||||||
|
|
||||||
|
|
||||||
|
@ -5,8 +5,6 @@ type: 基本
|
|||||||
english: Icon
|
english: Icon
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
有含义的矢量图形,每一个图标打倒一个敌人。
|
有含义的矢量图形,每一个图标打倒一个敌人。
|
||||||
|
|
||||||
## 图标的命名规范
|
## 图标的命名规范
|
||||||
|
@ -5,8 +5,6 @@ title: 基本
|
|||||||
|
|
||||||
数字输入框
|
数字输入框
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { InputNumber } from 'antd';
|
import { InputNumber } from 'antd';
|
||||||
|
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user