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