Fab (悬浮按钮)
动态的展开和收起子菜单，支持多种展开方向，如垂直、水平以及圆形扩散，支持自由拖拽
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page title="悬浮按钮" main-class="ov">
<t-card main-class='m-30' title="Fab 悬浮按钮" sub-title="动态的展开和收起子菜单，支持多种展开方向，如垂直、水平以及圆形扩散，支持自由拖拽"></t-card>
<t-fab type="p" main-class="dr-30 dt-74px" :state="false" direction='row-left' spacing="20">
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="apple-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="integral-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="account-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
<t-fab type="w" main-class="dl-30 db-30" :state="true" direction='row-right' spacing="20">
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="apple-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="integral-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="account-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
<t-fab type="s" main-class="dt-145px dl-30" :state="true" direction='column-bottom' spacing="20">
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="apple-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="integral-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="account-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
<t-fab type="e" main-class="db-150 dr-30" :state="true" direction='column-top' spacing="20">
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="apple-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="integral-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="account-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
<t-fab type="p" main-class="dl-350 dt-450" :state="true" direction='round' :startRtateDeg="160" spacing="20">
<t-fab-item>
<t-icon name="weixin-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
<t-fab type="e" main-class="dl-350 dt-850" :state="true" direction='round' :startRtateDeg="160">
<t-fab-item>
<t-icon name="weixin-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="home" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="server-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="apple-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="integral-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
<t-fab-item>
<t-icon name="account-fill" main-class="c-#fff"></t-icon>
</t-fab-item>
</t-fab>
</t-page>
</template>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| left | String | `` | 距离屏幕左边的距离 | |
| bottom | String | `` | 距离屏幕底部的距离 | |
| direction | String | row-left | 按钮组展开的方向 | row-left: 横向左侧展开row-right: 横向右侧展开column-top: 纵向上方展示colunm-bottom: 纵向下方展开round: 以圆形布局方式展开 |
| menuBoxClass | String | `` | 菜单按钮盒子的样式 | |
| menuIconClass | String | `` | 图标样式 | |
| top | String | `` | 距离屏幕顶部的距离 | |
| zIndex | Number | 100 | z-index值 | |
| right | String | `` | 距离屏幕右边的距离 | |
| state | Boolean | false | 按钮的展开折叠的状态 | |
| startRtateDeg | Number | 1 | 起始旋转角度 | |
| spacing | String | 20rpx | 按钮之间的间距 | |
| rotateDeg | Number | 60 | 旋转角度 |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| name | - | |
| default | - |