FloatButton 悬浮按钮

提供随时可用的快捷操作。

基础用法

basic.tsx

import { FloatButton, Space, useMessage } from '@ifhover/leaf-ui';

import { Mail, Plus } from 'lucide-react';

export function FloatButtonBasic() {
  const { message } = useMessage();
  return (
    <Space size={16}>
      <FloatButton
        fixed={false}
        startIcon={<Plus size={20} />}
        tooltip={'新建'}
        aria-label={'新建'}
        onClick={() => message.success('已创建')}
      />
      <FloatButton
        fixed={false}
        variant="outline"
        startIcon={<Mail size={20} />}
        tooltip={'收件箱'}
        aria-label={'收件箱'}
      />
    </Space>
  );
}

快捷操作组

basic.tsx

import { FloatButtonGroup, useMessage } from '@ifhover/leaf-ui';

import { Mail, Share2 } from 'lucide-react';

export function FloatButtonActions() {
  const { message } = useMessage();
  return (
    <FloatButtonGroup
      fixed={false}
      actions={[
        {
          key: 'share',
          label: '分享',
          icon: <Share2 size={18} />,
          onClick: () => message.info('分享链接已复制'),
        },
        {
          key: 'mail',
          label: '联系',
          icon: <Mail size={18} />,
          onClick: () => message.info('联系操作'),
        },
      ]}
    />
  );
}

FloatButton API

属性	类型	默认值	说明
`variant`	`'solid' \| 'outline' \| 'ghost' \| 'link'`	—	设置 variant。
`size`	`'sm' \| 'md' \| 'lg'`	—	展示尺寸。
`danger`	`boolean`	—	设置 danger。
`loading`	`boolean`	—	展示加载状态。
`fullWidth`	`boolean`	—	设置 fullWidth。
`startIcon`	`ReactNode`	—	设置 startIcon。
`endIcon`	`ReactNode`	—	设置 endIcon。
`tooltip`	`ReactNode`	—	显示滑块提示，可定制数值格式。
`fixed`	`boolean`	`true`	固定在视口角落；false 时参与页面布局。

FloatButtonAction

属性	类型	默认值	说明
`key`	`string`	—	必需。稳定且唯一的标识。
`label`	`ReactNode`	—	必需。展示文字或内容。
`icon`	`ReactNode`	—	图标内容。
`onClick`	`() => void`	—	点击时调用。
`disabled`	`boolean`	—	禁用交互。

FloatButtonGroup API

属性	类型	默认值	说明
`actions`	`readonly FloatButtonAction[]`	—	必需。条目操作区。
`fixed`	`boolean`	`true`	固定在视口角落；false 时参与页面布局。
`expandable`	`boolean`	`true`	提供展开操作组的按钮。
`icon`	`ReactNode`	—	图标内容。
`open`	`boolean`	—	控制面板是否展开。
`defaultOpen`	`boolean`	`false`	面板初始展开状态。
`onOpenChange`	`(open: boolean) => void`	—	面板展开或收起时调用。
`className`	`string`	—	设置 className。

类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

import type { FloatButtonProps, FloatButtonAction, FloatButtonGroupProps } from '@ifhover/leaf-ui';

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。

#FloatButton 悬浮按钮

#基础用法

#快捷操作组

#FloatButton API

#FloatButtonAction

#FloatButtonGroup API

#类型与交互

FloatButton 悬浮按钮

基础用法

快捷操作组

FloatButton API

FloatButtonAction

FloatButtonGroup API

类型与交互