[RFC] New Component: Float Button

[MadCcc]

Summary

添加新组件 FloatButton，默认固定于页面右下角，类似于 antd 官网上的主题按钮：

Motivation

当下许多网站都会选择提供一些明显的功能，希望用户可以在浏览网站时无论在什么位置都可以注意到，往往就会是一个浮动按钮的方式放在右下角。
在 Ant Design 中我们有一个相似的组件 BackTop，其功能是当用户滚动页面后提供一键返回顶部的能力。它的定位和 FloatButton 相似，但是功能是固定的。所以我们希望提供一个更加通用的组件，把 BackTop 收敛进这个组件中。

API

FloatButton

type FloatButtonProps = {
  className?: string;
  // 可以支持用 top/bottom 等定位修改位置
  style?: React.CSSProperties;
  // 图标
  icon?: React.ReactNode;
  // 文字及其他内容
  description?: React.ReactNode;
  // 变体
  type?: 'default' | 'primary';
  // 形状
  shape?: 'circle' | 'square';
  // Tooltip 内容
  tooltip?: React.ReactNode;
  // 事件
  onClick?: React.MouseEvent<HTMLButtonElement>;
  // 链接
  href?: string;
  target?: string;
}

FloatButton.Group

type FloatButtonGroupProps = FloatButtonProps {
  // 形状
  shape?: 'circle' | 'square';
  // 包含的 Float Button
  children: React.ReactElement;
  // 触发方式 (有触发方式为菜单模式）
  trigger?: 'click' | 'hover';
  // 受控展开
  open?: boolean;
  // 展开收起的回调
  onOpenChange?: (open: boolean) => void;
}

FloatButton.BackTop

type FloatButtonBackTopProps = FloatButtonProps & BackTopProps;

Basic Example

基础样式

import { FloatButton } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

export default () => (
  <>
    <FloatButton icon={<FileTextOutlined />} />
    <FloatButton icon={<FileTextOutlined />} type="primary" />
    <FloatButton.BackTop />
  </>
)

方形按钮

import { FloatButton } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

export default () => (
  <>
    <FloatButton icon={<FileTextOutlined />} shape="square" description="文档" />
    <FloatButton shape="square" description="帮助文档" />
    <FloatButton icon={<FileTextOutlined />} shape="square" description="帮助文档" />
  </>
)

含有气泡卡片的 FloatButton

import { FloatButton } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

export default () => (
  <FloatButton icon={<FileTextOutlined />} tooltip="帮助文档" />
)

浮动按钮组

import { FloatButton } from 'antd';
import { FileTextOutlined, QuestionCircleOutlined, CodeOutlined } from '@ant-design/icons';

export default () => (
  <>
    <FloatButton.Group>
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton icon={<FileTextOutlined />} tooltip="帮助文档" />
      <FloatButton.BackTop />
    </FloatButton.Group>
    <FloatButton.Group shape="square">
      <FloatButton icon={<QuestionCircleOutlined />} />
      <FloatButton icon={<FileTextOutlined />} tooltip="帮助文档" />
      <FloatButton icon={<CodeOutlined />} />
      <FloatButton.BackTop />
    </FloatButton.Group>
  </>
)

菜单模式

import { FloatButton } from 'antd';
import { FileTextOutlined, CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';

export default () => (
  <FloatButton.Group 
    icon={<CustomerServiceOutlined />}
    type="primary"
    trigger="click"
  />
    <FloatButton icon={<FileTextOutlined />} tooltip="帮助文档" />
    <FloatButton icon={<CommentOutlined />} />
  </FloatButton.Group>
)

Detailed Design

• 原来的 BackTop 组件的属性仍然支持，并且新的 FloatButton 的属性也可以作用于 BackTop。
• 菜单模式下触发方式为 hover 时，热区应适当放大，防止鼠标移出 FloatButton 后触发关闭了，从而点击不到菜单。
• 自动避让的功能无法实现，让用户使用 style自定义 FloatButton 的位置即可。

设计图

Drawbacks

No obvious drawbacks yet.

[li-jia-nan]

mark~

[afc163]

设计稿有点模糊。。

[afc163]

这个图我和下面的代码对不起来。有上面这个图里的实现案例么

[MadCcc]

这个是一个点击展开的 case，group 实体化了

[afc163]

那就是 Group 可以嵌套 Group？

[MadCcc]

不推荐，这个菜单已经可以看作一个 Group 了，如果塞到其他 Group 里定位肯定有问题

[afc163]

<FloatButton icon={<FileTextOutlined />} shape="square" description="文档" />

这个如果要配置成一个链接，如何写？

[MadCcc]

加 href，和 Button 一样，我补充一下

[afc163]

那还有 target

[afc163]

这种设计上和实现上如何实现？

[li-jia-nan]

可以贴个设计稿的链接嘛？尺寸、圆角、阴影、间距啥的看看具体 value

[MadCcc]

[MadCcc]

这个好像清楚点，下面有标记间距
基础圆角用 token.radiusBase 就行，记得看看 cssinjs 开发指南
https://github.com/ant-design/ant-design/wiki/CSS-in-JS-%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97

[li-jia-nan]

明白了

[li-jia-nan]

• feat: New Component Float Button #37520

[Veveue]

@MadCcc 可以支持拖动否