# t-fab

Fab 悬浮按钮

t-fab 组件介绍

悬浮按钮组件，用于在页面中显示一个可展开/收起的悬浮按钮，支持多种展开方向，如垂直、水平以及圆形扩散，支持自由拖拽。

t-fab 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-fab 基础用法

<template>
	<view class="ov">
		<tui-theme-switch></tui-theme-switch>
		<t-card class='m-15'
				title="Fab 悬浮按钮"
				sub-title="动态的展开和收起子菜单，支持多种展开方向，如垂直、水平以及圆形扩散，支持自由拖拽"></t-card>

		<!-- 第一段：type="primary" -->
		<t-fab type="primary"
			   class="dr-15 dt-74px"
			   :state="false"
			   direction='row-left'
			   spacing="10">
			<t-fab-item>
				<t-icon name="home"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>

		<!-- 第二段：type="warning" -->
		<t-fab type="warning"
			   class="dl-15 db-15"
			   :state="true"
			   direction='row-right'
			   spacing="10">
			<t-fab-item>
				<t-icon name="home"
						type="warning"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="warning"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill"
						type="warning"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill"
						type="warning"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill"
						type="warning"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>

		<!-- 第三段：type="success" -->
		<t-fab type="success"
			   class="dt-145px dl-15"
			   :state="true"
			   direction='column-bottom'
			   spacing="10">
			<t-fab-item>
				<t-icon name="home"
						type="success"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="success"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill"
						type="success"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill"
						type="success"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill"
						type="success"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>

		<!-- 第四段：type="error" -->
		<t-fab type="error"
			   class="db-75 dr-15"
			   :state="true"
			   direction='column-top'
			   spacing="10">
			<t-fab-item>
				<t-icon name="home"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>

		<!-- 第五段：type="primary" -->
		<t-fab type="primary"
			   class="dl-175 dt-225"
			   :state="true"
			   direction='round'
			   :startRtateDeg="160"
			   spacing="10">
			<t-fab-item>
				<t-icon name="weixin-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="primary"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>

		<!-- 第六段：type="error" -->
		<t-fab type="error"
			   class="dl-175 dt-425"
			   :state="true"
			   direction='round'
			   :startRtateDeg="160">
			<t-fab-item>
				<t-icon name="weixin-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="home"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="server-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="apple-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="integral-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
			<t-fab-item>
				<t-icon name="account-fill"
						type="error"
						:fore="true"
						class="s-20"></t-icon>
			</t-fab-item>
		</t-fab>
	</view>
</template>

t-fab Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
menuCloseIcon	String	"close"	关闭时显示的图标	-
menuOpenIcon	String	"plus"	展开时显示的图标	-
menuBoxClass	String	""	菜单按钮盒子的样式	-
menuIconClass	String	""	图标样式	-
state	Boolean	false	按钮的展开折叠的状态	true, false
direction	String	"row-left"	按钮组展开的方向	row-left, row-right, column-top, colunm-bottom, round
spacing	String	"20rpx"	按钮之间的间距	-
startRtateDeg	Number	0	起始旋转角度	-
rotateDeg	Number	60	旋转角度	-

t-fab Events

事件名	说明	回调参数
click	点击时触发	-
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-fab Slots

插槽名	说明
default	子按钮插槽，用于放置t-fab-item子组件
menu	菜单按钮插槽，用于自定义菜单按钮的内容