FloatButton

代码演示

如何引入

import { FloatButton, FloatButtonGroup } from '@chenzy-design/svelte';

基本用法

FloatButton 默认 position: fixed 悬浮在视口右下角，通过 style 覆盖定位。以下演示为便于在文档中预览，用相对定位容器将按钮框在示例区内。

尺寸

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

形状

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

点击跳转

可通过 href 设置跳转地址，target 指定目标网页应该在哪个窗口或框架中打开。

AI 风格 - 多彩悬浮按钮

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

带徽章的

传入 badge 参数时，按钮外层包裹 Badge，支持 dot / count / overflowCount / type 等。

悬浮按钮组

可通过 items 传入子项，onClick 回传被点击子项的 value。

API 参考

FloatButton

属性	说明	类型	默认值
badge	徽章参数	BadgeProps	-
colorful	多彩悬浮按钮	boolean	false
class	样式类名	string	-
disabled	禁用状态	boolean	false
href	点击跳转的链接	string	-
icon	显示图标	Snippet	-
onClick	点击回调函数	(e: MouseEvent) => void	-
shape	形状，支持 round、square	round | square	round
size	尺寸，支持 default、small、large	small | default | large	default
style	样式	string	-
target	指定在何处显示链接的 URL	string	-

FloatButtonGroupItem

在 FloatButtonProps 基础上增加以下参数。

属性	说明	类型	默认值
content	文本内容	Snippet | string	-
value	item 的标识	string	-

FloatButtonGroup

属性	说明	类型	默认值
class	样式类名	string	-
disabled	禁用状态	boolean	false
items	单个子项的信息	FloatButtonGroupItem[]	-
onClick	点击回调函数	(value: string, e: MouseEvent) => void	-
style	样式	string	-

设计变量

color

font

other

radius

spacing

width

变量	默认值	用法
--cd-floatbutton-bg	var(--cd-color-fill-0)	按钮背景色 - 默认
--cd-floatbutton-bg-active	var(--cd-color-fill-2)	按钮背景色 - 按下
--cd-floatbutton-bg-hover	var(--cd-color-fill-1)	按钮背景色 - 悬浮
--cd-floatbutton-color	var(--cd-color-primary)	按钮内图标 / 文字颜色（Semi=primary）
--cd-floatbutton-colorful-bg	var(--cd-color-ai-general)	colorful 外观 AI 渐变背景 - 默认
--cd-floatbutton-colorful-bg-active	var(--cd-color-ai-general-active)	colorful 外观 AI 渐变背景 - 按下
--cd-floatbutton-colorful-bg-hover	var(--cd-color-ai-general-hover)	colorful 外观 AI 渐变背景 - 悬浮
--cd-floatbutton-colorful-text	var(--cd-color-white)	colorful 外观图标 / 文字颜色（白）
--cd-floatbutton-disabled-bg	var(--cd-color-disabled-bg)	禁用态背景色
--cd-floatbutton-disabled-text	var(--cd-color-disabled-text)	禁用态图标 / 文字颜色

显示第 1 条-第 10 条，共 14 条

• 1
• 2