Fab Floating Action Button

Floating action button component that displays a group of action buttons when pressed.

WARNING

Since uni-app components cannot monitor clicks outside themselves, to automatically close the fab when clicking elsewhere on the page, it is recommended to use the component library's useQueue hook (which will close all dropmenu, popover, toast, swipeAction, fab). Monitor click event bubbling on the root element of the page.

If there is a scenario where the user manually clicks somewhere other than fab to slide out the fab, you need to add click.stop="" to the clicked element (in this case, the button) to prevent event bubbling to the root element, avoiding triggering closeOutside which would close the manually opened fab.

Basic Usage

Set the trigger type through type, set the trigger position through position, set the opening direction of action buttons through direction, and set whether the floating button is disabled through disabled.

<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">
  <wd-button @click="showToast('Triple Like')" :disabled="disabled" custom-class="custom-button" type="primary" round>
    <wd-icon name="github-filled" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('Add to Favorites')" :disabled="disabled" custom-class="custom-button" type="success" round>
    <wd-icon name="star" size="22px"></wd-icon>
  </wd-button>

  <wd-button @click="showToast('Give Coin')" :disabled="disabled" custom-class="custom-button" type="error" round>
    <wd-icon name="money-circle" size="22px"></wd-icon>
  </wd-button>
  <wd-button @click="showToast('Like')" :disabled="disabled" custom-class="custom-button" type="warning" round>
    <wd-icon name="thumb-up" size="22px"></wd-icon>
  </wd-button>
</wd-fab>

import { useToast } from '@/uni_modules/wot-design-uni'
const { show: showToast } = useToast()
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
const position = ref<'left-top'
  | 'right-top'
  | 'left-bottom'
  | 'right-bottom'
  | 'left-center'
  | 'right-center'
  | 'top-center'
  | 'bottom-center'>('left-bottom')
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
const disabled = ref<boolean>(false)

:deep(.custom-button) {
  min-width: auto !important;
  box-sizing: border-box;
  width: 32px !important;
  height: 32px !important;
  border-radius: 16px !important;
  margin: 8rpx;
}

:deep(.custom-radio) {
  height: 32px !important;
  line-height: 32px !important;
}

Action Menu Expand/Collapse

Control the expansion/collapse of the action button menu through v-model:active

<wd-fab v-model:active="active"></wd-fab>

const active = ref<boolean>(false)

Draggable Button

<wd-fab :draggable="true"></wd-fab>

WARNING

After enabling dragging, the direction property will be invalid, and the pop-up direction will be automatically calculated based on the position after dragging. After dragging is completed, the button will automatically snap to the edge.

Custom Trigger

Customize the trigger through the trigger slot, expandable controls whether clicking the trigger expands/collapses the action button menu.

<wd-fab position="left-bottom" :expandable="false">
  <template #trigger>
    <wd-button @click="handleClick" icon="share" type="error">Share with Friends</wd-button>
  </template>
</wd-fab>

const handleClick = () => {
  console.log('Clicked')
}

Attributes

Parameter	Description	Type	Options	Default Value	Version
v-model:active	Whether activated	boolean	-	false	0.1.57
type	Type	FabType	'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'	'primary'	0.1.57
position	Floating button position	FabPosition	'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center	'right-bottom'	0.1.57
draggable	Whether button can be dragged	boolean	-	false	1.2.19
direction	Floating button menu pop-up direction	FabDirection	'top' | 'right' | 'bottom' | 'left'	'top'	0.1.57
disabled	Whether disabled	boolean	-	false	0.1.57
inactiveIcon	Icon when floating button is not expanded	string	-	'add'	0.1.57
activeIcon	Icon when floating button is expanded	string	-	'close'	0.1.57
zIndex	Custom floating button layer level	number	-	99	0.1.57
gap	Custom gap between floating button and viewport edges	FabGap	-	{ top: 16, left: 16, right: 16, bottom: 16 }	1.2.26
customStyle	Custom style	string	-	''	0.1.57
expandable	Controls whether to expand menu when clicked, triggers click when set to false	boolean	-	true	1.3.11

Events

Event Name	Description	Parameters	Version
click	Triggered when clicking the floating button when expandable is false	—	1.3.11

Slot

name	Description	Version
trigger	Trigger slot, used for custom click button, component won't emit click when using this slot	1.3.11

External Classes

Class Name	Description	Version
custom-class	Custom style class	0.1.57

Source Code

Documentation

• Component