跳到正文
GitHub

动作

FloatingIconButton

钉在屏幕角落的圆形动作。

什么时候用它

需要在滚动时始终够得到的页面级操作——回到顶部、移动端目录。

示例

default

说明

钉在屏幕角上的一个圆形动作。

用半透明的纸面加背景模糊,而不是投影——白色重置没有高度层级,所以把控件和它底下的页面分开的是这层模糊和那条细线,不是一圈光晕。

属性

FloatingIconButton props
属性类型默认值说明
children必填ReactNode
label必填string可访问名称——这个按钮没有可见文字,所以这是它唯一的名字。
position必填'start' | 'end'控件钉在底部哪个角,按**阅读顺序**说——`end` 在英文里是右边,在阿拉伯语里是左边。把两边叫成 `left`/`right`,等于把某一种书写方向的布局写死进了 API。

同时接受 Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • label 是这个控件唯一的名字,所以它是必填而不是可选。
  • 44px 见方,是指针目标的下限(WCAG 2.5.8)。