ActionList 操作列表

操作列表组件

ActionList

Props

Prop NameTypeRequiredDefaultDescription
actionList
ActionInfo[]
required
操作列表
exposeCountnumber
暴露的操作数量
autoAdjustmentboolean
是否自动按照宽度调整展示数量
sizeSize
控件尺寸
smartboolean
操作数量等于 exposeCount+1 时是否直接显示按钮而不是显示下拉菜单
buttonStyleTypeButtonProps['styleType']
按钮的默认样式类别,参考 Button 的 styleType
dropdownButton
ReactNode | ButtonProps
自定义更多按钮内容,也可通过传入 object 来定义 props
popoverPropsany
弹出层的 popover props

说明

  • 这是 ActionList 操作列表组件
  • 外部的操作继承按钮的属性,支持配置按钮的 props,如 disabled、styleType 等,额外增加 tooltip 支持(使用时会默认开启按钮的 fakeDisabled),展开的操作支持 Menu.Item 的 props,disabled、tooltip 等
  • 默认的弹出层容器为 forwardPopupContainer={triggerNode => triggerNode.parentNode},默认会查找上层的建议容器

接口

interface ActionInfo {
    /** 展示 */
    label?: ReactNode;
    /** 点击回调 */
    onClick?: (e: MouseEvent) => void;
    /** 子菜单,仅 menu 项有效 */
    children?: ActionInfo[];
    /** 提示 */
    tooltip?: ReactNode;
    /** 禁用 */
    disabled?: boolean;
}

演示

演示

VIEW CODE ( LIVE )

size - 尺寸

VIEW CODE ( LIVE )

exposeCount - 展示数量

VIEW CODE ( LIVE )

smart - 菜单中只剩下一个操作时自动显示

VIEW CODE ( LIVE )

actionChildren - 子菜单

VIEW CODE ( LIVE )

popoverProps - 弹出层 props

VIEW CODE ( LIVE )
VIEW CODE ( LIVE )

item.tooltip - 内容提示

VIEW CODE ( LIVE )

autoAdjustment

VIEW CODE ( LIVE )
  • 设计
  • 文档
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司