FloatButton

固定在页面上的浮动操作按钮，用于快速访问常用操作。

导入

import { FloatButton } from 'asterui'

示例

基础

简单的浮动操作按钮。

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          onClick={() => alert('Button clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

带提示

悬停时显示提示的浮动按钮。

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          tooltip="Add new item"
          type="primary"
          onClick={() => alert('Add clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

类型

默认和主要按钮类型。

</>

+♥

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          type="default"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">♥</span>}
          type="primary"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

形状

圆形和方形按钮形状。

</>

++

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="circle"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="square"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

带徽章

带通知徽章的浮动按钮。

</>

5💬

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">💬</span>}
          badge={5}
          onClick={() => alert('You have 5 unread messages')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

浮动按钮组

点击时展开的浮动按钮组。

</>

+?💬↻

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-48 bg-base-200 rounded-lg">
        <FloatButton.Group
          icon={<span className="text-lg">+</span>}
          className="!absolute !right-4 !bottom-4"
        >
          <FloatButton
            icon={<span>?</span>}
            onClick={() => alert('Help section')}
          />
          <FloatButton
            icon={<span>💬</span>}
            onClick={() => alert('Contact support')}
          />
          <FloatButton
            icon={<span>↻</span>}
            onClick={() => alert('Refreshing...')}
          />
        </FloatButton.Group>
      </div>
    )
}

export default App

回到顶部

向下滚动后出现的滚动到顶部按钮。

</>

BackTop button appears after scrolling down 400px

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg flex items-center justify-center text-base-content/60">
        <p>BackTop button appears after scrolling down 400px</p>
      </div>
    )
}

export default App

API

FloatButton

属性	描述	类型	默认值
icon	在按钮中显示的图标	React.ReactNode	-
description	图标下方的描述文本	React.ReactNode	-
type	按钮类型/颜色	'default' | 'primary'	'default'
shape	按钮形状	'circle' | 'square'	'circle'
tooltip	悬停时显示的提示文本	string	-
tooltipPlacement	提示位置	'left' | 'right' | 'top' | 'bottom'	'left'
badge	要显示的徽章内容	number | React.ReactNode	-
href	链接 URL（渲染为锚点）	string	-
target	链接目标	string	-
onClick	点击事件处理器	() => void	-
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

FloatButton.Group

属性	描述	类型	默认值
children	要分组的 FloatButton 组件	React.ReactNode	-
flower	以四分之一圆（径向）布局排列按钮	boolean	false
shape	子按钮的形状	'circle' | 'square'	'circle'
icon	主触发按钮图标	React.ReactNode	-
mainAction	主操作按钮图标（打开时替换触发器）	React.ReactNode	-
onMainAction	主操作按钮的点击处理器	() => void	-
showClose	打开时显示关闭按钮	boolean	false
type	按钮类型/颜色	'default' | 'primary'	'default'
position	屏幕上的位置	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'
offset	距边缘的距离（像素）	number	24
data-testid	用于测试的测试 ID	string	-

FloatButton.BackTop

属性	描述	类型	默认值
visibilityHeight	按钮出现前的滚动距离（像素）	number	400
target	滚动目标元素	() => HTMLElement | Window	-
onClick	点击事件处理器（在滚动前调用）	() => void	-
icon	自定义图标	React.ReactNode	-
duration	滚动动画持续时间（毫秒）	number	450
position	屏幕上的位置	'bottom-right' | 'bottom-left'	'bottom-right'
offset	距边缘的距离（像素）	number	24
data-testid	用于测试的测试 ID	string	-

无障碍

• 使用原生 <button> 元素以获得正确的键盘支持
• 支持 href 属性以渲染为锚点以实现链接功能
• 提示在存在时为屏幕阅读器提供上下文
• 键盘导航的焦点状态清晰可见
• 组展开支持键盘访问
• BackTop 按钮根据滚动位置出现/消失