mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
docs: update demo format
This commit is contained in:
Benjy Cui
parent
e4edca2c69
commit
03d09b66e8
@ -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 @@
|
||||
# 基本
|
||||
|
||||
- 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 @@
|
||||
# 大数字
|
||||
|
||||
- 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 @@
|
||||
# 基本
|
||||
|
||||
- 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,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 @@
|
||||
# 基本
|
||||
|
||||
- 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,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,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 @@
|
||||
# 基本
|
||||
|
||||
- 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 @@
|
||||
# 基本用法
|
||||
|
||||
- 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 @@
|
||||
# 手风琴
|
||||
|
||||
- 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 @@
|
||||
# 基本
|
||||
|
||||
- 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 @@
|
||||
# 基本
|
||||
|
||||
- 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,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,10 +1,11 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
---
|
||||
order: 0
|
||||
title: 基本
|
||||
---
|
||||
|
||||
数字输入框
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { InputNumber } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 不可用
|
||||
|
||||
- order: 2
|
||||
---
|
||||
order: 2
|
||||
title: 不可用
|
||||
---
|
||||
|
||||
点击按钮切换可用状态。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { InputNumber, Button } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 三种大小
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
title: 三种大小
|
||||
---
|
||||
|
||||
三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { InputNumber } from 'antd';
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# 基础布局
|
||||
|
||||
- order: 0
|
||||
---
|
||||
order: 0
|
||||
title: 基础布局
|
||||
---
|
||||
|
||||
从堆叠到水平排列。
|
||||
|
||||
使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Flex对齐
|
||||
|
||||
- order: 5
|
||||
---
|
||||
order: 5
|
||||
title: Flex对齐
|
||||
---
|
||||
|
||||
Flex 子元素垂直对齐。
|
||||
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Flex排序
|
||||
|
||||
- order: 6
|
||||
---
|
||||
order: 6
|
||||
title: Flex排序
|
||||
---
|
||||
|
||||
通过 Flex 布局的 Order 来改变元素的排序。
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# Flex布局
|
||||
|
||||
- order: 4
|
||||
---
|
||||
order: 4
|
||||
title: Flex布局
|
||||
---
|
||||
|
||||
Flex 布局基础。
|
||||
|
||||
使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 区块间隔
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
title: 区块间隔
|
||||
---
|
||||
|
||||
栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# 左右偏移
|
||||
|
||||
- order: 2
|
||||
---
|
||||
order: 2
|
||||
title: 左右偏移
|
||||
---
|
||||
|
||||
列偏移。
|
||||
|
||||
使用 `offset` 可以将列向右侧偏。例如，`offset={4}` 将元素向右侧偏移了 4 个列（column）的宽度。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# 其他属性的响应式
|
||||
|
||||
- order: 8
|
||||
---
|
||||
order: 8
|
||||
title: 其他属性的响应式
|
||||
---
|
||||
|
||||
`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。
|
||||
|
||||
其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 响应式布局
|
||||
|
||||
- order: 7
|
||||
|
||||
参照 Bootstrap 的[响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。
|
||||
|
||||
---
|
||||
order: 7
|
||||
title: 响应式布局
|
||||
---
|
||||
|
||||
参照 Bootstrap 的<a href="http://getbootstrap.com/css/#grid-media-queries">响应式设计</a>，预设四个响应尺寸：`xs` `sm` `md` `lg`。
|
||||
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
# 布局排序
|
||||
|
||||
- order: 3
|
||||
---
|
||||
order: 3
|
||||
title: 布局排序
|
||||
---
|
||||
|
||||
列排序。
|
||||
|
||||
通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 所有组件
|
||||
|
||||
- order: 2
|
||||
---
|
||||
order: 2
|
||||
title: 所有组件
|
||||
---
|
||||
|
||||
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { LocaleProvider, Pagination, DatePicker, TimePicker,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 国际化
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
title: 国际化
|
||||
---
|
||||
|
||||
用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Pagination, LocaleProvider } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 顶部导航
|
||||
|
||||
- order: 0
|
||||
---
|
||||
order: 0
|
||||
title: 顶部导航
|
||||
---
|
||||
|
||||
水平的顶部导航菜单。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 只展开当前父级菜单
|
||||
|
||||
- order: 2
|
||||
---
|
||||
order: 2
|
||||
title: 只展开当前父级菜单
|
||||
---
|
||||
|
||||
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Menu, Icon } from 'antd';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
# 内嵌菜单
|
||||
|
||||
- order: 1
|
||||
---
|
||||
order: 1
|
||||
title: 内嵌菜单
|
||||
---
|
||||
|
||||
垂直菜单，子菜单内嵌在菜单区域。
|
||||
|
||||
---
|
||||
|
||||
|
||||
````jsx
|
||||
import { Menu, Icon } 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