logoMogu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
类型
形状
描述
含有气泡卡片的悬浮按钮
浮动按钮组
菜单模式
受控模式
回到顶部
徽标数
API
共同的 API
FloatButton.Group
FloatButton.BackTop

FloatButton悬浮按钮

ConfigProvider全局化配置Watermark水印

悬浮按钮。自 5.0.0 版本开始提供该组件。

何时使用

  • 用于网站上的全局功能；
  • 无论浏览到何处都可以看见的按钮。

代码演示

基本

最简单的用法。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;

export default App;
形状

通过 shape 设置不同的形状。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { CustomerServiceOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton
      shape="circle"
      type="primary"
      style={{ right: 94 }}
      icon={<CustomerServiceOutlined />}
    />
    <FloatButton
      shape="square"
      type="primary"
      style={{ right: 24 }}
      icon={<CustomerServiceOutlined />}
    />
  </>
);

export default App;
含有气泡卡片的悬浮按钮

设置 tooltip 属性，即可开启气泡卡片。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;

export default App;
菜单模式

设置 trigger 属性即可开启菜单模式。提供 hover 和 click 两种触发方式。

expand codeexpand code
TypeScript
JavaScript
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
import { FloatButton } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <>
    <FloatButton.Group
      trigger="click"
      type="primary"
      style={{ right: 24 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
      <FloatButton icon={<CommentOutlined />} />
    </FloatButton.Group>
    <FloatButton.Group
      trigger="hover"
      type="primary"
      style={{ right: 94 }}
      icon={<CustomerServiceOutlined />}
    >
      <FloatButton />
      <FloatButton icon={<CommentOutlined />} />
    </FloatButton.Group>
  </>
);

export default App;
回到顶部

返回页面顶部的操作按钮。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';

const App: React.FC = () => (
  <div style={{ height: '500vh', padding: 10 }}>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <FloatButton.BackTop />
  </div>
);

export default App;
类型

通过 type 改变悬浮按钮的类型。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { QuestionCircleOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} />
    <FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
  </>
);

export default App;
描述

可以通过 description 设置文字内容。

仅当 shape 属性为 square 时支持。由于空间较小，推荐使用比较精简的双数文字。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { FileTextOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton
      icon={<FileTextOutlined />}
      description="HELP INFO"
      shape="square"
      style={{ right: 24 }}
    />
    <FloatButton description="HELP INFO" shape="square" style={{ right: 94 }} />
    <FloatButton
      icon={<FileTextOutlined />}
      description="HELP"
      shape="square"
      style={{ right: 164 }}
    />
  </>
);

export default App;
浮动按钮组

按钮组合使用时，推荐使用 <FloatButton.Group />，并通过设置 shape 属性改变悬浮按钮组的形状。悬浮按钮组的 shape 会覆盖内部 FloatButton 的 shape 属性。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'mogud';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';

const App: React.FC = () => (
  <>
    <FloatButton.Group shape="circle" style={{ right: 24 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
    <FloatButton.Group shape="square" style={{ right: 94 }}>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton />
      <FloatButton icon={<SyncOutlined />} />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
  </>
);

export default App;
受控模式

通过 open 设置组件为受控模式，需要配合 trigger 一起使用。

expand codeexpand code
TypeScript
JavaScript
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
import { FloatButton, Switch } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [open, setOpen] = useState(true);

  const onChange = (checked: boolean) => {
    setOpen(checked);
  };

  return (
    <>
      <FloatButton.Group
        open={open}
        trigger="click"
        style={{ right: 24 }}
        icon={<CustomerServiceOutlined />}
      >
        <FloatButton />
        <FloatButton icon={<CommentOutlined />} />
      </FloatButton.Group>
      <Switch onChange={onChange} checked={open} style={{ margin: 16 }} />
    </>
  );
};

export default App;
徽标数

右上角附带圆形徽标数字的悬浮按钮。

expand codeexpand code
TypeScript
JavaScript
import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'mogud';
import React from 'react';

const App: React.FC = () => (
  <>
    <FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
    <FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
      <FloatButton tooltip={<div>custom badge color</div>} badge={{ count: 5, color: 'blue' }} />
      <FloatButton badge={{ count: 5 }} />
    </FloatButton.Group>
    <FloatButton.Group shape="circle">
      <FloatButton badge={{ count: 12 }} icon={<QuestionCircleOutlined />} />
      <FloatButton badge={{ count: 123, overflowCount: 999 }} />
      <FloatButton.BackTop visibilityHeight={0} />
    </FloatButton.Group>
  </>
);

export default App;

API

自 antd@5.0.0 版本开始提供该组件。

共同的 API

参数说明类型默认值版本
icon自定义图标ReactNode-
description文字及其它内容ReactNode-
tooltip气泡卡片的内容ReactNode | () => ReactNode-
type设置按钮类型default | primarydefault
shape设置按钮形状circle | squarecircle
onClick点击按钮时的回调(event) => void-
href点击跳转的地址，指定此属性 button 的行为和 a 链接一致string-
target相当于 a 标签的 target 属性，href 存在时生效string-
badge带圆形徽标数字的悬浮按钮参考badge-5.4.0

FloatButton.Group

参数说明类型默认值版本
shape设置包含的 FloatButton 按钮形状circle | squarecircle
trigger触发方式（有触发方式为菜单模式）click | hover-
open受控展开，需配合 trigger 一起使用boolean-
onOpenChange展开收起时的回调，需配合 trigger 一起使用(open: boolean) => void-

FloatButton.BackTop

参数说明类型默认值版本
duration回到顶部所需时间（ms）number450
target设置需要监听其滚动事件的元素() => HTMLElement() => window
visibilityHeight滚动高度达到此参数值才出现 BackTopnumber400
onClick点击按钮的回调函数() => void-