mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
05f9677df7
ant-design/components/float-button/index.zh-CN.md
dingkang 9459cbfaf8
add FloatBotton component open api description and demo (#42835) 
* 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>
2023-06-12 17:20:55 +08:00

3.4 KiB
Raw Blame History

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
cols
2

悬浮按钮。自 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 -

Design Token