Ant-Design组件api合集(General、Layout、Navigation)

閱讀時間：全文 2134 字，預估用時 11 分鐘

創作日期：2017-11-20

文章標籤：

BEGIN

Button按钮

属性	说明	类型	默认值
type	设置按钮类型，可选值为 primary(蓝色) dashed(虚线) danger(红色) 或者不设	string	-
htmlType	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
icon	设置按钮的图标类型	string	-
shape	设置按钮形状，可选值为 circle 或者不设	string	-
size	设置按钮大小，可选值为 small large 或者不设	string	default
onClick	click 事件的 handler	function	-
loading	设置按钮载入状态	boolean	false
disabled	按钮不可点击	boolean	false
ghost	幽灵属性，使按钮背景透明，版本 2.7 中增加	boolean	false

按钮组,带图标

<Button.Group size={size}>
  <Button type="primary">
  <Icon type="left" />上一页
  </Button>
  <Button type="primary">
  下一页<Icon type="right" />
  </Button>
</Button.Group>

按钮中带图标 <Button type="primary" icon="poweroff">按钮</Button>

Icon图标

内容来源: Icon 🔗

使用: <Icon type="typeName" />
typeName命名规则: [图标名]-[形状?]-[描线?]-[方向?] 即 link[-circle][-o][-right]

Grid栅格

内容来源: Grid 🔗

使用:

<Row>
  <Col span={12}>col-12</Col>
  <Col span={12}>col-12</Col>
</Row>

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 ﺇ object	-
sm	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象	number ﺇ object	-
md	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	number ﺇ object	-
lg	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	number ﺇ object	-
xl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象	number ﺇ object	-

Layout

内容来源: Layout 🔗

使用:

<Layout>
  <Header>header</Header>
  <Layout>
  <Sider>left sidebar</Sider>
  <Content>main content</Content>
  <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

Layout 布局容器

参数	说明	类型	默认值
style	指定样式	object	-
className	容器 className	string	-

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

Layout.Sider 侧边栏

参数	说明	类型	默认值
collapsible	是否可收起	boolean	false
defaultCollapsed	是否默认收起	boolean	false
collapsed	当前收起状态	boolean	-
onCollapse	展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发	(collapsed, type) => {}	-
trigger	自定义 trigger，设置为 null 时隐藏 trigger	string ﺇ ReactNode	-
width	宽度	number ﺇ string	200
collapsedWidth	收缩宽度，设置为 0 会出现特殊 trigger	number	64
breakpoint	触发响应式布局的断点	Enum { ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’ }	-
style	指定样式	object	-
className	容器 className	string	-

注意：如果你想在 Sider 基础上进行包装，需要给自定义组件加上 __ANT_LAYOUT_SIDER = true 设置

Affix图钉

内容来源: Affix 🔗

成员	说明	类型	默认值
offsetTop	距离窗口顶部达到指定偏移量后触发	number	-
offsetBottom	距离窗口底部达到指定偏移量后触发	number	-
target	设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数	Function	() => window
onChange	固定状态改变时触发的回调函数	Function(affixed)	-

使用:

<Affix offsetBottom={0}>
  <Button type="primary">Affix bottom</Button>
</Affix>

BackTop回到顶部

内容来源: BackTop 🔗

参数	说明	类型	默认值
visibilityHeight	滚动高度达到此参数值才出现 BackTop	number	400
onClick	点击按钮的回调函数	Function	-

默认距离底部 50px
自定义样式宽高不大于 40px * 40px

使用:

{/*默认:*/}
<BackTop />
{/*自定义:*/}
<BackTop>UP</BackTop>

Breadcrumb面包屑

内容来源: Breadcrumb 🔗

参数	说明	类型	默认值
routes	router 的路由栈信息	object[]	-
params	路由的参数	object	-
separator	分隔符自定义	stringإReactNode	’/‘
itemRender	自定义链接函数，和 react-router 配置使用	(route, params, routes, paths) => ReactNode	-

使用:

<Breadcrumb separator=">">
  <Breadcrumb.Item href="">
    <Icon type="home" />
  </Breadcrumb.Item>
  <Breadcrumb.Item href="">
    <Icon type="user" />
    <span>Application List</span>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    Application
  </Breadcrumb.Item>
</Breadcrumb>

Dropdown下拉菜单

内容来源: Dropdown 🔗

使用:

<Dropdown overlay={menu}>
  <a href="#">
    Hover me, Click menu item <Icon type="down" />
  </a>
</Dropdown>

参数	说明	类型	默认值
trigger	触发下拉的行为	Array<‘click’ﺇ’hover’>	[‘hover’]
overlay	菜单	Menu	-
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body
visible	菜单是否显示	boolean	-
onVisibleChange	菜单显示状态改变时调用，参数为 visible	Function(visible)	-
placement	菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft

Dropdown.Button

参数	说明	类型	默认值
type	按钮类型，和 Button 一致	string	’default’
onClick	点击左侧按钮的回调，和 Button 一致	Function	-
trigger	触发下拉的行为	Array<‘click’ﺇ’hover’>	[‘hover’]
overlay	菜单	Menu	-
visible	菜单是否显示	boolean	-
onVisibleChange	菜单显示状态改变时调用，参数为 visible	Function	-
placement	菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft

属性overlay传入的menu在antd.menu中定义.

内容来源: Menu 🔗

使用:

<Menu
  onClick={this.handleClick}
  selectedKeys={['mail']}
  mode="horizontal"
>
  <Menu.Item key="mail">
    <Icon type="mail" />第一项
  </Menu.Item>
  <Menu.Item key="app" disabled>
    <Icon type="appstore" />第二项
  </Menu.Item>
  <SubMenu title={<span><Icon type="setting" />第三项</span>}>
    <MenuItemGroup title="子项一">
      <Menu.Item key="setting:1">Option 1</Menu.Item>
      <Menu.Item key="setting:2">Option 2</Menu.Item>
    </MenuItemGroup>
    <MenuItemGroup title="子项二">
      <Menu.Item key="setting:3">Option 3</Menu.Item>
      <Menu.Item key="setting:4">Option 4</Menu.Item>
    </MenuItemGroup>
  </SubMenu>
  <Menu.Item key="alipay">
    第四项
  </Menu.Item>
</Menu>

参数	说明	类型	默认值
theme	主题颜色	string: light dark	light
mode	菜单类型，现在支持垂直、水平、和内嵌模式三种	string: vertical horizontal inline	vertical
selectedKeys	当前选中的菜单项 key 数组	string[]	-
defaultSelectedKeys	初始选中的菜单项 key 数组	string[]	-
openKeys	当前展开的 SubMenu 菜单项 key 数组	string[]	-
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
inlineIndent	inline 模式的菜单缩进宽度	number	24
multiple	是否允许多选	boolean	false

Menu.Item props

参数	说明	类型	默认值
disabled	是否禁用	boolean	false
key	item 的唯一标志	string	-

Menu.SubMenu props

参数	说明	类型	默认值
disabled	是否禁用	boolean	false
key	唯一标志	string	-
title	子菜单项值	string ﺇ ReactNode	-
children	子菜单的菜单项	Array<MenuItemإSubMenu>	-
onTitleClick	点击子菜单标题	Function({ eventKey, domEvent })	-

Menu.ItemGroup props#

参数	说明	类型	默认值
title	分组标题	string ﺇ ReactNode	-
children	分组的菜单项	MenuItem[]	-

Menu.Divider为块分割线.
Menu.Item 必须设置唯一的 key 属性．

Pagination分页

内容来源: Pagination 🔗

参数	说明	类型	默认值
current	当前页数	number	-
defaultCurrent	默认的当前页数	number	1
total	数据总数	number	0
defaultPageSize	默认的每页条数	number	10
pageSize	每页条数	number	-
onChange	页码改变的回调，参数是改变后的页码及每页条数	Function(page, pageSize)	noop
showSizeChanger	是否可以改变 pageSize	boolean	false
pageSizeOptions	指定每页可以显示多少条	string[]	[‘10’, ‘20’, ‘30’, ‘40’]
onShowSizeChange	pageSize 变化的回调	Function(current, size)	noop
showQuickJumper	是否可以快速跳转至某页	boolean	false
size	当为「small」时，是小尺寸分页	string	""
simple	当添加该属性时，显示为简单分页	boolean	-
showTotal	用于显示数据总量和当前数据顺序	Function(total, range)	-

使用:

<Pagination showQuickJumper defaultCurrent={2} total={500} />

Steps步骤条

内容来源: Steps 🔗

使用:

<Steps>
  <Steps.Step status="one" title="第一步" icon={<Icon type="user" />} />
  <Steps.Step status="two" title="第二步" icon={<Icon type="solution" />} />
  <Steps.Step status="thress" title="第三步" icon={<Icon type="credit-card" />} />
  <Steps.Step status="four" title="第四步" icon={<Icon type="smile-o" />} />
</Steps>

Steps

参数	说明	类型	默认值
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态	number	0
status	指定当前步骤的状态，可选 wait process finish error	string	process
size	指定大小，目前支持普通（default）和迷你（small）	string	default
direction	指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向	string	horizontal
progressDot	点状步骤条，可以设置为一个 function	Boolean or (iconDot, {index, status, title, description}) => ReactNode	false

Steps.Step

参数	说明	类型	默认值
status	指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error	string	wait
title	标题	string إ ReactNode	-
description	步骤的详情描述，可选	string ﺇ ReactNode	-
icon	步骤图标的类型，可选	string ﺇ ReactNode	-

Tabs标签页

内容来源: Tabs 🔗

使用:

<Tabs defaultActiveKey="1" onChange={callback}>
  <TabPane tab={<span><Icon type="apple" />tab1</span>} key="1">Content of Tab Pane 1</TabPane>
  <TabPane tab="tab2" disabled key="2">Content of Tab Pane 2</TabPane>
  <TabPane tab="tab3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>

Tabs

参数	说明	类型	默认值
activeKey	当前激活 tab 面板的 key	string	-
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	第一个面板
onChange	切换面板的回调	Function	-
onTabClick	tab 被点击的回调	Function	-
tabBarExtraContent	tab bar 上额外的元素	React.ReactNode	-
tabBarStyle	tar bar 的样式对象	object	-
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	选项卡头显示文字	stringإReactNode	-

FINISH

上篇文章：Ant-Design组件api合集（Data_Entry）

下篇文章：搭建开发环境