悬浮按钮 - Semi Design Next

代码演示

如何引入

import { FloatButton, FloatButtonGroup } from '@fibrous/semi-ui-react';

基本用法

基本使用：页面右下第三列 1

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };

    return (
        <>
            <span>基本使用：页面右下第三列 1 </span>
            <FloatButton aria-label="AI 编辑" icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick} />
        </>
    );
}

尺寸

支持三种尺寸：默认，小，大。

大尺寸：页面右下第三列 2

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };
    return (
        <>
            <span>大尺寸：页面右下第三列 2</span>
            <FloatButton aria-label="AI 编辑" size="large" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick} />
        </>
    );
}

形状

默认定义了两种形状：round（默认）、square。

方形：页面右下第三列 3

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };
    return (
        <>
            <span>方形：页面右下第三列 3</span>
            <FloatButton aria-label="AI 编辑" shape="square" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick} />
        </>
    );
}

点击跳转

设置 href 后渲染为原生链接 <a>，target 指定目标网页在哪个窗口或框架中打开，rel 指定与目标网页的关系。中键在新标签页打开、右键复制链接地址等均为浏览器原生行为。未设置 href 时渲染为原生 <button type="button">。

点击跳转：页面右下第三列 4

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>点击跳转：页面右下第三列 4</span>
            <FloatButton aria-label="访问 Semi 官网" icon={<IconAIEditLevel1 />} style={{ bottom: '100px' }} href="https://semi.design" rel="noopener noreferrer" target="_blank" />
        </>
    );
}

AI 风格 - 多彩悬浮按钮

可设置 colorful 为 true，展示多彩的悬浮按钮。

多彩按钮：页面右下第一列

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>多彩按钮：页面右下第一列</span>
            <FloatButton aria-label="访问 Semi 官网" colorful icon={<IconAIEditLevel1 />} style={{ bottom: '110px', insetInlineEnd: '150px' }} href="https://semi.design" rel="noopener noreferrer" target="_blank" />
        </>
    );
}

带徽章的

带徽章：页面右下第二列

代码

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>带徽章：页面右下第二列</span>
            <FloatButton disabled aria-label="AI 编辑" icon={<IconAIEditLevel1 />} badge={{ dot: true, type: 'danger' }} style={{ bottom: 270, insetInlineEnd: '100px' }} />
            <FloatButton badge={{ count: 1000, overflowCount: 999 }} size="large" aria-label="AI 编辑，999+" icon={<IconAIEditLevel1 />} style={{ bottom: 210, insetInlineEnd: 100 }} />
            <FloatButton aria-label="AI 编辑" icon={<IconAIEditLevel1 />} badge={{ dot: true }} colorful style={{ bottom: 170, insetInlineEnd: 100 }} />
            <FloatButton aria-label="AI 编辑，VIP" icon={<IconAIEditLevel1 />} colorful size="large" badge={{ count: 'VIP', type: 'danger' }} style={{ bottom: 110, insetInlineEnd: 100 }} />
        </>
    );
}

悬浮按钮组

可通过 items 传入子项。每个子项与单个 FloatButton 一样渲染为原生按钮或链接，各自的 href、target、rel、disabled、onClick 均生效；点击子项时先调用子项的 onClick(e)，再调用 FloatButtonGroup 的 onClick(value, e)。FloatButtonGroup 的 disabled 会禁用全部子项。

页面右下方最后一行

帮助

代码

import { IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@fibrous/semi-icons-react';
import { FloatButtonGroup } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>页面右下方最后一行</span>
            <FloatButtonGroup
                style={{
                    insetInlineEnd: 24,
                    bottom: 50,
                }}
                onClick={(value) => {
                    console.log('点击了 ', value);
                }}
                items={[
                    {
                        icon: <IconAIStrokedLevel3 />,
                        content: '编辑',
                        value: 'editor',
                    },
                    {
                        icon: <IconSearchStroked />,
                        content: '搜索',
                        value: 'search',
                        disabled: true,
                    },
                    {
                        icon: <IconHelpCircleStroked />,
                        content: '帮助',
                        value: 'help',
                        href: 'https://semi.design',
                        target: '_blank',
                    },
                ]}
            />
        </>
    );
}

API参考

FloatButton

Props

属性	说明	类型	默认值
badge	徽章参数，同 Badge 的 props，作用于包裹按钮内容的 Badge。	`BadgeProps`	-
className	根元素的类名。	`string`	-
colorful	多彩悬浮按钮。	`boolean`	`false`
disabled	禁用状态。禁用的链接会去掉 `href`，并设置 `role` 为 `link`。	`boolean`	-
href	链接地址，设置后渲染为 `<a>` 元素；禁用时去掉 `href`。	`string`	-
icon	按钮图标，渲染在按钮内容区域内。	`React.ReactNode`	-
onClick	点击回调，参数为 `React.MouseEvent`；禁用时不触发。	`Type`	-
ref	指向根元素：设置 `href` 时为 `<a>`，否则为 `<button>`。	`Type`	-
rel	与链接目标的关系，仅在设置 `href` 时生效。	`string`	-
shape	形状，可选 `round`、`square`。	`'square' \| 'round'`	`"round"`
size	尺寸，可选 `default`、`small`、`large`。	`'small' \| 'default' \| 'large'`	`"default"`
style	根元素的样式。	`React.CSSProperties`	-
target	指定在何处显示链接的 URL，仅在设置 `href` 时生效。	`string`	-

其他原生属性（如 id、aria-label、title）经 ...rest 落在根元素上：设置 href 时为 <a>，否则为 <button type="button">。

FloatButtonGroupItem

在 FloatButtonProps 基础上增加以下参数。子项的 href、target、rel、disabled、onClick、className、style、ref 与 FloatButton 含义相同；shape、size、colorful 与单个 FloatButton 的同名属性效果相同（子项带 semi-floatButton-{shape}、semi-floatButton-{size}、semi-floatButton-colorful 类名），设置 size 时子项为该尺寸的固定宽高。

属性	说明	类型	默认值
aria-label	子项的可访问名称，只有图标没有文本时必须传	string	-
content	文本内容	ReactNode	-
value	item 的标识，作为 `onClick` 的第一个参数	string	-

FloatButtonGroup

Props

属性	说明	类型	默认值
className	根元素的类名。	`string`	-
disabled	禁用全部子项。	`boolean`	-
items	子项列表，类型见下方 `FloatButtonGroupItem`。	`FloatButtonGroupItem[]`	-
onClick	点击未禁用子项时调用，参数为该子项的 `value`（未设置时为 `undefined`）与 `React.MouseEvent`；子项自己的 `onClick` 先于它调用。	`Type`	-
ref	根元素（`role="group"`）的引用。	`Type`	-
style	根元素的样式。	`React.CSSProperties`	-

其他原生属性（如 id、aria-*）落在根元素 div 上，根元素默认的 role 为 group。

Accessibility

ARIA

FloatButton 与 FloatButtonGroup 的每个子项都是原生元素：设置 href 时为链接 <a>，否则为按钮 <button type="button">，读屏软件会读出对应的角色
可访问名称取自 aria-label，没有时取可见文本（子项的 content）。FloatButton 通常只有图标，请务必传入 aria-label 描述按钮的作用，例如 aria-label="回到顶部"；只有图标的子项同样需要在子项上传入 aria-label
徽标（badge.count）显示的文字也是按钮可见文本的一部分，aria-label 会覆盖它，因此请把徽标文字写进 aria-label，例如 aria-label="AI 编辑，VIP"，让语音输入用户能用看到的文字操作按钮
禁用的按钮使用原生 disabled 并带 aria-disabled="true"。链接没有原生禁用状态，禁用的链接会去掉 href（无法点击、中键或右键打开，也不在 Tab 顺序中），同时设置 role="link" 与 aria-disabled="true"，读屏软件仍将其读作不可用的链接
FloatButtonGroup 的根元素是 role="group"，可通过 aria-label 或 aria-labelledby 给整组命名（aria-* 透传到根元素）
FloatButtonGroup 没有选中态，子项不使用 aria-pressed

键盘和焦点

焦点管理与原生按钮、链接一致：可以使用 Tab 及 Shift + Tab 切换焦点，禁用的项不可聚焦
按钮聚焦时可以通过 Enter 或 Space 键激活，链接聚焦时可以通过 Enter 键打开
键盘聚焦时显示聚焦轮廓