悬浮按钮。自 5.0.0
版本开始提供该组件。
import React from 'react';
import { FloatButton } from 'antd';
const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;
export default App;
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';
const App: React.FC = () => <FloatButton tooltip={<div>Documents</div>} />;
export default App;
import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
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;
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;
自
antd@5.0.0
版本开始提供该组件。
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
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 | - | |
badge | 带徽标数字的悬浮按钮(不支持 status 以及相关属性) | BadgeProps | - | 5.4.0 |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
shape | 设置包含的 FloatButton 按钮形状 | circle | square | circle | |
trigger | 触发方式(有触发方式为菜单模式) | click | hover | - | |
open | 受控展开 | boolean | - | |
onOpenChange | 展开收起时的回调 | (open: boolean) => void | - |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
duration | 回到顶部所需时间(ms) | number | 450 | |
target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
onClick | 点击按钮的回调函数 | () => void | - |