ButtonGroup

介绍

本组件基于React、Ant Design，适用于React + Ant Design项目
本组件设计为超过一定数量的按钮将展示在Dropdown中

sample

使用方式

安装

npm i antd-button-group

使用

@import '~antd/dist/antd.less'; // 引入antd样式
@import '~antd-button-group/dist/index.less';

import ButtonGroup from 'antd-button-group'


<ButtonGroup>
  <Button size='small' type='link' onClick={() => message.success('编辑')}>编辑</Button>
  <Button size='small' type='link' danger onClick={() => message.warning('删除')}>删除</Button>
  <Button size='small' type='link' onClick={() => message.success('随便什么操作')}>随便什么操作</Button>
  <Button type='primary' onClick={() => message.success('primary to link')}>primary to link</Button>
  <Button size='small' type='link' danger onClick={() => message.error('按钮 danger')}>按钮 danger</Button>
  <Divider />
  <a onClick={() => message.success('a标签')}>a标签</a>
</ButtonGroup>

API

Props

属性	说明	类型	默认值	可选值
outerCount	外部显示几个按钮，其余放在Dropdown中	Number、String	2
direction	内置icon的排列方向	String	row（横向）	column
placement	Dropdown弹出位置	String	bottomLeft	`bottomLeft`、`bottomCenter`、 `bottomRight` `topLeft`、`topCenter`、`topRight`
arrow	Dropdown下拉框箭头是否显示	Boolean	false
trigger	触发下拉的行为, 移动端不支持 hover	Array	['click']	`click`、`hover`、`contextMenu`
icon	右侧更多 icon	ComponentType	Antd Icon MoreOutlined
iconStyle	右侧更多 icon 样式	CSSProperties	{ fontSize: 22, verticalAlign: 'middle', marginLeft: 2 }
children	按钮	ReactNode	-

children

PropTypes.node	说明
`<Button type='primary'>按钮</Button>`	`Dropdown`中的`Button`将会自动转为`<Button type='link'>按钮</Button>`
`<Menu.Divider />`	使用该组件渲染分割线
`<Button type='primary' disabled>按钮</Button>` `<a disabled onClick={() => message.success('a标签')}>a标签</a>`	`disabled`不可用

鄢华康 / button-group

ButtonGroup

介绍

使用方式

安装

使用

API

Props

children

简介

发行版

贡献者

近期动态

鄢华康 / button-group .gitee-modal { width: 500px !important; }

ButtonGroup

介绍

使用方式

安装

使用

API

Props

children

简介

发行版

贡献者

近期动态

搜索帮助

鄢华康 / button-group