mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
9459cbfaf8
* docs: FloatBotton open 属性说明 * test: update snapshots * demo: add controlled demo * demo: update demo * feat: add warning * feat: update warning * demo: update controlled demo --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
3.4 KiB
3.4 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 | - | |
| badge | 带徽标数字的悬浮按钮（不支持 status 以及相关属性） |
BadgeProps | - | 5.4.0 |
FloatButton.Group
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| shape | 设置包含的 FloatButton 按钮形状 | circle | square |
circle |
|
| trigger | 触发方式（有触发方式为菜单模式） | click | hover |
- | |
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - |
FloatButton.BackTop
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| duration | 回到顶部所需时间（ms） | number | 450 | |
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
| onClick | 点击按钮的回调函数 | () => void | - |