ant-design/components/float-button/index.zh-CN.md
lijianan a05b9d92c5
feat: Float Button (#37520)
* feat: add FloatButton

* feat: add FloatButton

* feat: FloatButton

* feat: FloatButton

* fix: fix

* feat: FloatButton

* feat: FloatButton

* feat: FloatButton

* feat: FloatButton

* feat: FloatButton

* fix: add groupShape

* feat: mergeShape

* fix: fix

* fix: fix style

* fix: style fix

* fix: fix

* fix: style fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix style

* fix: fix style

* fix: fix style

* fix: style fix

* feat: back-top

* fix: style bug fix

* fix: fix erroe

* fix: add tiggerElement

* fix: add tiggerElement

* fix: add tiggerElement

* fix: add tiggerElement

* feat: add useMemo

* docs: add docs

* fix: bugFix

* fix: bugFix

* fix: bugfix

* fix: style fix

* fix: bugfix

* test: add test case

* fix: style fix

* fix: style fix

* fix: fix style

* fix: fix style

* fix: fix trigger action

* fix: fix style

* feat: add demo

* fix: add demo

* feat: add docs

* fix: style ifx

* feat: update maxSize of bundlesize

* feat: add animation for group

* fix: fix

* fix: fix style

* fix: fix test case

* fix: fix test case

* fix: fix type

* fix: fix type

* fix: update bundlesize

* fix: fix

* fix: fix style

* fix: fix style

* fix: updata snap

* fix: fix CI

* fix: fix style

* fix: rename float button motion

* fix: fix style

* fix: bugFix

* fix: fix style

* fix: bugFix

* fix: update docs

* refactor: float button trigger

* test: fix test case & update snapshot

* fix: delete rest

* docs: update demo

* test: update snapshot

* fix: fix eslint error

* test: update snapshot

* style: update icon fontSize to 18

* fix: fix style

* fix: style fix

* fix: test case fix

* test: add test case

* fix: style fix

* test: update snap

* fix: style fix

* fix: style fix

* fix: style fix

* docs: demo update

* fix: style fix

* docs: update demo

* test: update snapshot

Co-authored-by: 黑雨 <wangning4567@163.com>
Co-authored-by: MadCcc <1075746765@qq.com>
2022-09-23 14:31:16 +08:00

2.3 KiB
Raw Blame History

category type subtitle title cover
Components 其他 悬浮按钮 FloatButton https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg

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

何时使用

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

API

共同的 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 -