悬浮按钮控件FloatButtonEx

FloatButtonEx 是一个悬浮按钮控件,支持多个按钮排列、SVG图标、徽标、加载状态等功能。

FloatButtonEx 悬浮按钮控件

概述

FloatButtonEx 是一个悬浮按钮控件,支持多个按钮排列、SVG图标、徽标、加载状态等功能。

特性

  • 支持垂直/水平排列
  • 支持多种对齐方式
  • 支持SVG图标和自定义图标
  • 支持徽标显示
  • 支持加载状态动画
  • 支持多种按钮类型(默认、主题、错误、警告、成功)
  • 支持圆角和圆形按钮样式
  • 支持自定义颜色和尺寸

属性

FloatButtonEx 控件属性

属性名 类型 默认值 说明
Buttons List<FloatButtonItem> - 按钮列表
Align FloatButtonAlign BottomRight 对齐方向
Vertical bool true 是否垂直排列
ButtonSize int 40 按钮大小
MarginX int 24 水平边距
MarginY int 24 垂直边距
Gap int 10 按钮间距
Radius int 6 圆角半径
Round bool true 是否圆形按钮
PrimaryColor Color #1ABC9C 主题色
DefaultColor Color #F0F0F0 默认色
ErrorColor Color #FF4D4F 错误色
WarningColor Color #FAAD14 警告色
SuccessColor Color #52C41A 成功色
TextColor Color White 文本颜色
TopMost bool false 是否置顶显示
FollowGlobalTheme bool true 是否跟随全局主题变化

主题颜色说明:

元素 亮色模式 暗色模式
默认按钮颜色 浅灰 (240,240,240) 深灰 (70,70,70)
文本颜色 白色 浅灰 (220,220,220)

FloatButtonItem 按钮项属性

属性名 类型 默认值 说明
Name string "" 按钮名称
Text string "" 按钮文本
IconSvg string "" SVG图标
Icon Image null 自定义图标
Type ButtonType Default 按钮类型
Enabled bool true 是否启用
Loading bool false 是否加载中
LoadingValue float 0.3 加载进度
Badge string "" 徽标文本
BadgeSvg string "" 徽标SVG
BadgeAlign FloatButtonAlign TopRight 徽标方向
BadgeSize float 0.6 徽标大小比例
BadgeMode bool false 徽标镂空模式
BadgeOffsetX int 0 徽标偏移X
BadgeOffsetY int 0 徽标偏移Y
BorderWidth float 1 边框宽度
Tooltip string "" 气泡提示
Tag object null 用户自定义数据

枚举

FloatButtonAlign 对齐方式

说明
TopLeft 左上角
TopRight 右上角
BottomLeft 左下角
BottomRight 右下角
TopCenter 顶部居中
BottomCenter 底部居中
LeftCenter 左侧居中
RightCenter 右侧居中

ButtonType 按钮类型

说明
Default 默认
Primary 主题
Error 错误
Warning 警告
Success 成功

事件

事件名 参数类型 说明
ButtonClick FloatButtonClickEventArgs 按钮点击事件

方法

方法名 返回值 说明
Version() string 获取版本号
About() string 获取版权信息

使用示例

using AntdUIEx.Enum;

// 创建悬浮按钮控件
FloatButtonEx floatButton = new FloatButtonEx();
floatButton.ButtonSize = 50;
floatButton.Gap = 15;
floatButton.Vertical = true;

// 添加按钮
floatButton.Buttons.Add(new FloatButtonItem
{
    Name = "btn1",
    IconSvg = "plus",
    Type = ButtonType.Primary,
    Tooltip = "添加"
});

floatButton.Buttons.Add(new FloatButtonItem
{
    Name = "btn2",
    IconSvg = "delete",
    Type = ButtonType.Error,
    Badge = "3",
    Tooltip = "删除"
});

floatButton.Buttons.Add(new FloatButtonItem
{
    Name = "btn3",
    IconSvg = "setting",
    Type = ButtonType.Default,
    Loading = true,
    Tooltip = "设置"
});

// 处理点击事件
floatButton.ButtonClick += (sender, e) =>
{
    MessageBox.Show($"点击了按钮: {e.Button.Name}");
};

// 添加到窗体
this.Controls.Add(floatButton);

注意事项

  1. 按钮需要设置 IconSvg 或 Icon 才能显示图标
  2. 徽标默认显示在按钮右上角
  3. 加载状态会显示旋转动画
  4. 禁用状态的按钮颜色会变淡
  5. 鼠标悬停时按钮颜色会变亮