HIPS-UNI-UI

# Fab 悬浮按钮组

# 使用指南

import Fab from '@hips/uni-ui/lib/fab';
import FabItem from '@hips/uni-ui/lib/fab-item';

export default {
  components: {
    'hips-fab': Fab,
    'hips-fab-item': FabItem,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-fab>
  <hips-fab-item
    icon="home"
    label="首页"
    bg-color="red"
    @click="handleItemClick1"
  />
  <hips-fab-item
    icon="question"
    label="问题"
    bg-color="blue"
    @click="handleItemClick4"
  />
  <hips-fab-item
    icon="location"
    label="定位"
    bg-color="red"
    @click="handleItemClick5"
  />
  <hips-fab-item bg-color="blue" @click="handleItemClick6">
    <img src="./assets/haima.png" class="custom-image" />
  </hips-fab-item>
</hips-fab>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 禁止拖拽

<hips-fab :draggable="false">
  <hips-fab-item
    icon="home"
    label="首页"
    bg-color="red"
    @click="handleItemClick1"
  />
  <hips-fab-item
    icon="question"
    label="问题"
    bg-color="blue"
    @click="handleItemClick4"
  />
  <hips-fab-item
    icon="location"
    label="定位"
    bg-color="red"
    @click="handleItemClick5"
  />
  <hips-fab-item bg-color="blue" @click="handleItemClick6">
    <img src="./assets/haima.png" class="custom-image" />
  </hips-fab-item>
</hips-fab>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 控制按钮样式

<hips-fab size="130" bg-color="red" corner="left-top" edge="10">
  <hips-fab-item
    icon="home"
    label="首页"
    bg-color="red"
    @click="handleItemClick1"
  />
  <hips-fab-item
    icon="question"
    label="问题"
    bg-color="blue"
    @click="handleItemClick4"
  />
  <hips-fab-item
    icon="location"
    label="定位"
    bg-color="red"
    @click="handleItemClick5"
  />
  <hips-fab-item bg-color="blue" @click="handleItemClick6">
    <img src="./assets/haima.png" class="custom-image" />
  </hips-fab-item>
</hips-fab>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 定制按钮组展示方向

<hips-fab show-direction="horizontal">
  <hips-fab-item
    icon="home"
    label="首页"
    bg-color="red"
    @click="handleItemClick1"
  />
  <hips-fab-item
    icon="question"
    label="问题"
    bg-color="blue"
    @click="handleItemClick4"
  />
  <hips-fab-item
    icon="location"
    label="定位"
    bg-color="red"
    @click="handleItemClick5"
  />
  <hips-fab-item bg-color="blue" @click="handleItemClick6">
    <img src="./assets/haima.png" class="custom-image" />
  </hips-fab-item>
</hips-fab>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# APIs

# Fab

参数 说明 类型 可选值 默认值
size 控制按钮大小 [String,Number] - 136
bg-color 控制按钮背景颜色 String - #26D2E8
corner 初始化位置 String ['left-top','right-top','left-bottom','right-bottom'] right-top
show-direction 按钮组展示方向 String ['auto','horizontal','vertical'] [auto]
draggable 控制按钮是否支持拖拽 Boolean - true
edge 控制按钮最终位置和边界距离 [String,Number] - 16

注意

  1. show-direction = auto 情况下，按钮组会根据按钮组尺寸和边界的距离，自动计算显示方向。

  2. 按钮拖拽结束后，会自动向边界靠拢。

# FabItem

参数 说明 类型 可选值 默认值
icon 图标 String - -
label 标签 String - -
color 按钮及图标颜色 String - white
bg-color 背景颜色 String - -

# Slots

# Fab

名称 说明
- 默认插槽，方式 hips-fab-item

# FabItem

名称 说明
- 默认插槽，定义按钮内容

# Events

# Fab

名称 说明 参数
open 控制按钮开启事件 -
close 控制按钮关闭事件 -

# FabItem

名称 说明 参数
click 按钮点击事件 -

Calendar 日历