2.0.0 • Published 3 years ago
antd-button-group v2.0.0
ButtonGroup
介绍
- 本组件基于React、Ant Design，适用于React + Ant Design项目
- 本组件设计为超过一定数量的按钮将展示在
Dropdown中
使用方式
安装
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、bottomRighttopLeft、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不可用 |