logoAnt Design Plus

ButtonList

Example Usage

import { ButtonList } from '@alitajs/antd-plus';

Demo

SyntaxError: No-Inline evaluations must call `render`.
Basic Example

Set the button size.

expand codeexpand code
render(
  <ButtonList
    size="small"
    list={[
      { text: '新增', type: 'primary', onClick: () => console.log(1) },
      { text: '修改', type: 'default', onClick: () => console.log(2) },
      { text: '删除', type: 'dashed', onClick: () => console.log(3) },
      { text: '全选', type: 'default', onClick: () => console.log(4) }
    ]}
  />
)
SyntaxError: No-Inline evaluations must call `render`.
SyntaxError: No-Inline evaluations must call `render`.
Basic Example

Default maximum number of displays.

expand codeexpand code
render(
  <ButtonList
    list={[
      { text: '新增', type: 'primary', onClick: () => console.log(1) },
      { text: '修改', type: 'default', onClick: () => console.log(2) },
      { text: '删除', type: 'dashed', onClick: () => console.log(3) },
      { text: '全选', type: 'default', onClick: () => console.log(4) }
    ]}
  />
)
SyntaxError: No-Inline evaluations must call `render`.
SyntaxError: No-Inline evaluations must call `render`.
Link

Extract button type=link for component properties.

expand codeexpand code
render(
  <ButtonList
    isLink={true}
    size="small"
    moreType="icon"
    list={[
      { text: '新增', type: 'primary', onClick: () => console.log(1) },
      { text: '修改', type: 'default', onClick: () => console.log(2) },
      { text: '删除', type: 'danger', onClick: () => console.log(3) },
      { text: '全选', type: 'default', onClick: () => console.log(4) }
    ]}
  />
)
SyntaxError: No-Inline evaluations must call `render`.

API#

ButtonList#

Property Description Type Required Default Alternative
className 额外类名 string 否 -- --
style 额外样式 React.CSSProperties 否 -- --
list 按钮数据 array 是 [] --
size 按钮大小 string 否 default --
maxCount 最多显示几个按钮 number 否 3 --
isLink 按钮是否是 link boolean 否 false --
more 自定义更新操作节点 ReactNode 否 -- --
moreType 更多节点类型 string 否 -- text, icon

説明

  • list 支持 ant-design button 所有属性，加一个text用于设置文本
  • size 整理设置 button 的大小