antd-button-group
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

ButtonGroup

介绍

  1. 本组件基于ReactAnt Design,适用于React + Ant Design项目
  2. 本组件设计为超过一定数量的按钮将展示在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 bottomLeftbottomCenter
bottomRight
topLefttopCentertopRight
arrow Dropdown下拉框箭头是否显示 Boolean false
trigger 触发下拉的行为, 移动端不支持 hover Array ['click'] clickhovercontextMenu
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不可用

Package Sidebar

Install

npm i antd-button-group

Weekly Downloads

1

Version

2.0.0

License

ISC

Unpacked Size

175 kB

Total Files

8

Last publish

Collaborators

  • yanhuakang