mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
40e77c40d3
* docs: add dark overview * docs: show dark cover in dark theme * docs: update cover
3.1 KiB
3.1 KiB
category | group | subtitle | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | 其他 | 悬浮按钮 | FloatButton | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a0hwTY_rOSUAAAAAAAAAAAAADrJ8AQ/original |
|
悬浮按钮。自 5.0.0
版本开始提供该组件。
何时使用
- 用于网站上的全局功能;
- 无论浏览到何处都可以看见的按钮。
代码演示
基本
类型
形状
描述
含有气泡卡片的悬浮按钮
浮动按钮组
菜单模式
回到顶部
_InternalPanelDoNotUseOrYouWillBeFired
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 | - |