FloatButton 悬浮按钮

用于全局页面的快捷操作入口,如回到顶部、帮助、客服等。

何时使用

  • 需要悬浮操作按钮时。

基础用法

<script setup lang="ts">
import { h } from "vue";
import { FloatButton } from "@reglow/reui";
import { ArrowUp } from "lucide-vue-next";
</script>

<template>
  <FloatButton :icon="h(ArrowUp)" :on-click="scrollToTop" />

  <!-- 尺寸 / 形状 / 位置 -->
  <FloatButton :icon="h(ArrowUp)" size="large" shape="square" :position="{ bottom: 96, right: 48 }" />
</template>

导入

import { FloatButton, FloatButtonGroup } from "@reglow/reui";

Props

属性类型默认值说明
iconVNode-图标
size"small" | "default" | "large""default"尺寸
shape"round" | "square""round"形状
type"default" | "primary" | "colorful""default"类型
position{ bottom?, right?, top?, left? }右下角位置