Sard

Appearance

100%
在新窗口打开⤴

Fab悬浮按钮

介绍 ​

悬浮按钮，点击可展开扩展按钮。

代码演示 ​

基础使用 ​

设置 item-list 属性配置扩展按钮，监听 select 事件来知晓用户点击了哪个按钮。

vue
<template>
  <s-fab>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

自定义颜色 ​

设置 background 属性以及按钮项的 background 自定义背景色。

vue
<template>
  <s-fab background="linear-gradient(300deg, rgb(245, 52, 35) 0%, rgb(246, 127, 72) 100%)">
    <s-fab-item name="首页" background="rgb(59, 190, 136)" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" background="rgb(247, 149, 59)" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" background="rgb(52, 147, 240)" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab background="linear-gradient(300deg, rgb(245, 52, 35) 0%, rgb(246, 127, 72) 100%)">
    <s-fab-item name="首页" background="rgb(59, 190, 136)" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" background="rgb(247, 149, 59)" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" background="rgb(52, 147, 240)" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

隐藏按钮名称 ​

默认会显示按钮项的 name 属性，可以设置 hide-name 属性进行隐藏。

vue
<template>
  <s-fab hide-name>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab hide-name>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

左上角显示 ​

按钮默认显示在右下角，设置 left 或 top 可以让其显示在左上角。

vue
<template>
  <s-fab top="80px" left="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab top="80px" left="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

右上角显示 ​

按钮默认显示在右下角，设置 top 会将其从底部显示在顶部。

vue
<template>
  <s-fab top="80px" right="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab top="80px" right="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

左下角显示 ​

按钮默认显示在右下角，设置 left 会将其从右边显示在左边。

vue
<template>
  <s-fab left="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab left="24px">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

自定义图标 ​

vue
<template>
  <s-fab>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>

    <template #entry="{ visible }">
      <demo-icon v-if="visible" name="close" />
      <demo-icon v-else name="list" />
    </template>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>

    <template #entry="{ visible }">
      <demo-icon v-if="visible" name="close" />
      <demo-icon v-else name="list" />
    </template>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

自定义插槽内容 ​

使用 default 插槽自定义入口按钮内容，使用 list 插槽自定义扩展按钮内容，需要自行循环 FabItem 组件。

<<< @demo/fab/demo/Slots.vue

可拖拽的 ​

设置 draggable 属性，悬浮按钮展示在右下角，允许在 y 轴方向上下拖拽。

vue
<template>
  <s-fab draggable>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab draggable>
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

自由拖拽和磁吸 ​

axis 属性设置允许在 x 或 y 轴方向拖拽，magnet 属性设置松开手指后吸附到指定轴方向的最近一边。

vue
<template>
  <s-fab draggable axis="both" magnet="x">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="ts">
import { toast } from 'sard'

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab draggable axis="both" magnet="x">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

双向绑定 ​

使用 v-model:offset 控制悬浮按钮的位置。

vue
<template>
  <s-fab draggable axis="both" v-model:offset="offset">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>

  <div class="mt-7 text-center">
    <span>x: {{ offset.x.toFixed(0) }}</span>
    <span class="ms-1">y: {{ offset.y.toFixed(0) }}</span>
  </div>
</template>

<script setup lang="ts">
import { toast } from 'sard'
import { ref } from 'vue'

const offset = ref({
  x: 200,
  y: 300,
})

const onClick = (name: string) => {
  toast(`点击了: ${name}`)
}
</script>
vue
<template>
  <s-fab draggable axis="both" v-model:offset="offset">
    <s-fab-item name="首页" @click="onClick('首页')">
      <demo-icon name="house-door" />
    </s-fab-item>
    <s-fab-item name="分享好友" @click="onClick('分享好友')">
      <demo-icon name="share" />
    </s-fab-item>
    <s-fab-item name="收藏" @click="onClick('收藏')">
      <demo-icon name="star" />
    </s-fab-item>
  </s-fab>

  <div class="mt-7 text-center">
    <span>x: {{ offset.x.toFixed(0) }}</span>
    <span class="ms-1">y: {{ offset.y.toFixed(0) }}</span>
  </div>
</template>

<script setup lang="js">
import { toast } from 'sard'
import { ref } from 'vue'
const offset = ref({
  x: 200,
  y: 300,
})
const onClick = (name) => {
  toast(`点击了: ${name}`)
}
</script>

API ​

FabProps ​

属性描述类型默认值
top设置距离窗口顶部的距离，优先级比 bottom 高string-
right设置距离窗口右边的距离string-
bottom设置距离窗口底部的距离string-
left设置距离窗口左边的距离，优先级比 right 高string-
color设置按钮图标的颜色string-
background设置按钮的背景色string-
hide-name是否隐藏按钮名称booleanfalse
overlay-closable点击遮罩是否隐藏扩展按钮booleanfalse
draggable是否可拖拽booleanfalse
axis允许拖拽的方向轴'x' | 'y' | 'both' | 'none''y'
magnet吸附到指定轴最近的一边，在拖拽时使用'x' | 'y'-
margin-x悬浮按钮与窗口左右两边的最小间距，单位为 px，在拖拽时使用number24
margin-y悬浮按钮与窗口上下两边的最小间距，单位为 px，在拖拽时使用number24
offset控制悬浮按钮的位置，在拖拽时使用{ x: number; y: number }-

FabSlots ​

插槽描述属性
default自定义扩展按钮内容-
entry自定义入口按钮内容{ visible: boolean }

FabEmits ​

事件描述类型
click点击入口按钮时触发(event: MouseEvent) => void
update:visible扩展按钮显隐变化时触发(visible: boolean) => void
update:offset因用户拖拽导致位置改变时触发(offset: { x: number; y: number }) => void

FabItemProps ​

属性描述类型默认值
name按钮名称string-
color按钮图标颜色string-
background按钮背景色string-

FabItemSlots ​

插槽描述属性
default自定义按钮内容-
name自定义名称内容-

FabItemEmits ​

事件描述类型
click点击按钮时触发(event: MouseEvent) => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-fab-z-indexvar(--s-z-index-secondary)
--s-fab-rightvar(--s-size-xl)
--s-fab-bottomvar(--s-size-4xl)
--s-fab-maskvar(--s-overlay-illegible)
--s-fab-item-gapvar(--s-size)
--s-fab-item-opacity-activevar(--s-opacity-active)
--s-fab-item-btn-sizevar(--s-size-4xl)
--s-fab-item-btn-font-sizevar(--s-size-xl)
--s-fab-item-btn-colorvar(--s-white)
--s-fab-item-btn-bgvar(--s-color-primary)
--s-fab-item-btn-box-shadowvar(--s-box-shadow-secondary)
--s-fab-item-name-gapvar(--s-size-xs)
--s-fab-item-name-font-sizevar(--s-font-size)
--s-fab-item-name-colorvar(--s-white)

Released under the MIT License.

Copyright © 2023-present wuzhitao