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

  1. 带有图标和文字的 Extended FAB
  2. 没有图标的 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

属性

参数说明类型默认值
typeFAB 的颜色类型'primary' | 'surface' | 'secondary' |'tertiary'primary
sizeFAB 的尺寸, 仅 medium 可展开'medium'medium
extendedFAB 是否展开booleantrue
disabledFAB 是否禁用booleanfalse
nameFAB 的图标字段stringnull
ripple是否使用涟漪效果booleantrue

事件

事件名说明参数
click点击 FAB 时触发event: Event
touchstart触摸手指压下 FAB 时触发event: Event

插槽

插槽名说明参数
iconExtended FAB 图标-
textExtended FAB 文本-