Extended FAB
Extended FAB 帮助人们采取主要行动。它们比FABs更宽,以容纳文本标签和更大的目标区域。
应该在具有长滚动视图的页面上使用 Extended FAB。不要在无法滚动的视图中使用扩展FAB。
基本使用
Extended FAB 组件基于 FAB,部分使用方法见Floating action buttons (FAB)。
通过在<m-fab></m-fab>
标签内添加text
插槽实现 Extended FAB。
仅
medium
尺寸支持 Extended FAB
- 带有图标和文字的 Extended FAB
- 没有图标的 Extended FAB
在模板中:
<template>
<div class="container">
<m-fab name="navigation">
<template #text>Navigate</template>
</m-fab>
<m-fab type="surface">
<template #text>Reroute</template>
</m-fab>
</div>
</template>
展开与关闭
通过调整extended
属性值来控制 Extended FAB 的展开与否。
在模板中:
<template>
<div class="container">
<m-fab name="save" type="tertiary" :extended="state">
<template #text>Save changes</template>
</m-fab>
<m-button class="btn" type="filled-tonal" @click="changeState">
change state
</m-button>
</div>
</template>
在 Script 中:
<script setup>
import MFab from '@packages/FAB'
import MButton from '@packages/button'
import { ref } from 'vue'
const state = ref(true)
const changeState = () => {
state.value = !state.value
}
</script>
长滚动页面中的应用
在向下浏览时,Extended FAB 应该自动收起,让用户专注于内容。
API
属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | FAB 的颜色类型 | 'primary' | 'surface' | 'secondary' |'tertiary' | primary |
size | FAB 的尺寸, 仅 medium 可展开 | 'medium' | medium |
extended | FAB 是否展开 | boolean | true |
disabled | FAB 是否禁用 | boolean | false |
name | FAB 的图标字段 | string | null |
ripple | 是否使用涟漪效果 | boolean | true |
事件
事件名 | 说明 | 参数 |
---|---|---|
click | 点击 FAB 时触发 | event: Event |
touchstart | 触摸手指压下 FAB 时触发 | event: Event |
插槽
插槽名 | 说明 | 参数 |
---|---|---|
icon | Extended FAB 图标 | - |
text | Extended FAB 文本 | - |