FloatButton悬浮按钮

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

何时使用

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

代码演示

最简单的用法。

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';

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

export default App;

形状

通过 shape 设置不同的形状。

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';
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 属性，即可开启气泡卡片。

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';

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

export default App;

菜单模式

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

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

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;

类型

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

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';
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 时支持。由于空间较小，推荐使用比较精简的双数文字。

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';
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 属性。

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';
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;

回到顶部

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

TypeScript
JavaScript
import React from 'react';
import { FloatButton } from 'antd';

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;

API

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

共同的 API

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

FloatButton.Group

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

FloatButton.BackTop

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

import React from 'react'; import { FloatButton } from 'antd'; 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;

import React from 'react'; import { FloatButton } from 'antd'; import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons'; 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;

import React from 'react'; import { FloatButton } from 'antd'; 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;

import React from 'react'; import { FloatButton } from 'antd'; 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;

import React from 'react'; import { FloatButton } from 'antd'; 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;

import React from 'react'; import { FloatButton } from 'antd'; 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;

API

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

共同的 API

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

FloatButton.Group

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

FloatButton.BackTop

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

Ant Design

FloatButton悬浮按钮

Ant Design

FloatButton悬浮按钮

何时使用

代码演示

API

共同的 API

FloatButton.Group

FloatButton.BackTop

何时使用

代码演示

API

共同的 API

FloatButton.Group

FloatButton.BackTop