悬浮按钮 FloatButton - Svelte

代码演示

如何引入

<script lang="ts">
    import { FloatButton, FloatButtonGroup } from '@fibrae/semi-ui-svelte';
</script>

基本用法

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

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';

    const onclick = () => {
        console.log('float button clicked');
    };
</script>

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

尺寸

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

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

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';

    const onclick = () => {
        console.log('float button clicked');
    };
</script>

<span>大尺寸：页面右下第三列 2</span>
<FloatButton aria-label="AI 编辑" size="large" style="bottom: 200px" {onclick}>
    {#snippet icon()}
        <IconAIEditLevel1 />
    {/snippet}
</FloatButton>

形状

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

方形：页面右下第三列 3

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';

    const onclick = () => {
        console.log('float button clicked');
    };
</script>

<span>方形：页面右下第三列 3</span>
<FloatButton aria-label="AI 编辑" shape="square" style="bottom: 150px" {onclick}>
    {#snippet icon()}
        <IconAIEditLevel1 />
    {/snippet}
</FloatButton>

点击跳转

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

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

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';
</script>

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

AI 风格 - 多彩悬浮按钮

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

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

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';
</script>

<span>多彩按钮：页面右下第一列</span>
<FloatButton aria-label="访问 Semi 官网" colorful href="https://semi.design" rel="noopener noreferrer" style="bottom: 110px; inset-inline-end: 150px" target="_blank">
    {#snippet icon()}
        <IconAIEditLevel1 />
    {/snippet}
</FloatButton>

带徽章的

带徽章：页面右下第二列

代码

<script lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';
</script>

{#snippet icon()}
    <IconAIEditLevel1 />
{/snippet}

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

悬浮按钮组

可通过 items 传入子项，图标用 icon snippet 提供，参数为 { item, index }。每个子项与单个 FloatButton 一样渲染为原生按钮或链接，各自的 href、target、rel、disabled、onClick 均生效；点击子项时先调用子项的 onClick(event)，再调用 FloatButtonGroup 的 onClick(value, event)。FloatButtonGroup 的 disabled 会禁用全部子项。

页面右下方最后一行

帮助

代码

<script lang="ts">
    import { IconAIStrokedLevel3, IconHelpCircleStroked, IconSearchStroked } from '@fibrae/semi-icons-svelte';
    import { FloatButtonGroup } from '@fibrae/semi-ui-svelte';

    const icons = [IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked];

    const items = [
        { content: '编辑', value: 'editor' },
        { content: '搜索', value: 'search', disabled: true },
        { content: '帮助', value: 'help', href: 'https://semi.design', target: '_blank' },
    ];

    const onClick = (value?: string) => {
        console.log('点击了 ', value);
    };
</script>

<span>页面右下方最后一行</span>
<FloatButtonGroup {items} {onClick} style="inset-inline-end: 24px; bottom: 50px">
    {#snippet icon({ index })}
        {@const Icon = icons[index]}
        <Icon />
    {/snippet}
</FloatButtonGroup>

API参考

FloatButton

Props

属性	说明	类型	默认值
badge	徽章参数，同 Badge 的 props（不含 children）；class、style 以及 onclick、onmouseenter、onmouseleave 落在 Badge 根元素上。	`FloatButtonBadge`	-
badgeCount	自定义徽章内容的 snippet，代替 badge.count。	`Snippet`	-
colorful	多彩悬浮按钮。	`boolean`	`false`
disabled	禁用状态。	`boolean`	`false`
href	链接地址，设置后渲染为 a；禁用时去掉 href。	`string`	-
icon	按钮图标的 snippet。	`Snippet`	-
rel	与链接目标的关系，仅在设置 href 时生效。	`string`	-
shape	形状，可选 round、square。	`FloatButtonShape`	`"round"`
size	尺寸，可选 default、small、large。	`FloatButtonSize`	`"default"`
target	指定在何处显示链接的 URL，仅在设置 href 时生效。	`string`	-

class、style 与原生属性和事件（如 id、aria-*、onclick）落在根元素上：设置 href 时为 <a>，否则为 <button>。点击回调是原生 onclick，参数为事件，禁用时不触发。style 只接受字符串，数字不会自动补 px。不支持 ref。

FloatButtonGroupItem

在 FloatButton 的 props 基础上增加以下参数。子项的 href、target、rel、disabled、class、style 与 FloatButton 含义相同，onClick 等监听器写在数据里；shape、size、colorful 与单个 FloatButton 的同名属性效果相同，设置 size 时子项为该尺寸的固定宽高。不支持子项的 ref。

属性	说明	类型	默认值
aria-label	子项的可访问名称，只有图标没有文本时必须传	string	-
class	类名	string	-
content	文本内容，更丰富的内容用 `content` snippet	string \| number	-
data-*	自定义数据属性	string	-
id	元素 id	string	-
onClick	点击回调，先于 FloatButtonGroup 的 `onClick` 调用	(event: MouseEvent) => void	-
oncontextmenu	右键菜单回调	(event: MouseEvent) => void	-
onmouseenter	指针进入回调	(event: MouseEvent) => void	-
onmouseleave	指针离开回调	(event: MouseEvent) => void	-
style	样式字符串	string	-
title	原生 title 属性	string	-
value	item 的标识，作为 `onClick` 的第一个参数	string	-

FloatButtonGroup

Props

属性	说明	类型	默认值
badgeCount	自定义子项徽章内容的 snippet，参数为 `{ item, index }`。	`Type`	-
content	自定义子项文本内容的 snippet，参数为 `{ item, index }`；缺省渲染 item.content。	`Type`	-
disabled	禁用全部子项。	`boolean`	`false`
icon	子项图标的 snippet，参数为 `{ item, index }`。	`Type`	-
items	子项列表。	`FloatButtonGroupItem[]`	-
onClick	点击未禁用子项时触发，参数为子项的 value（未设置时为 undefined）与原生 click 事件；子项自己的 onClick 先于它调用，点击落在子项之外时不触发。	`Type`	-

class、style 与原生属性（如 aria-*）落在根元素（role="group"）上。items 中的 icon、节点型 content 与节点型 badge.count 分别用 icon、content、badgeCount snippet 提供，参数为 { item, index }。

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 键打开
键盘聚焦时显示聚焦轮廓