Matarialize中文技术社区-Material UI 中 Floating Action Button 的使用详解

Material UI 中 Floating Action Button 的使用详解

smartzeng 2024-09-29 22:05:32

464 Floating Action Button 专栏

Floating Action Button（FAB）是 Material Design 中的一个重要组件，旨在突出主要操作，使其更容易被用户识别和使用。在本篇文章中，我们将深入探讨 Material UI 中的 Floating Action Button 的使用，包括其基本用法、所有属性、方法以及结合其他组件的示例。

什么是 Floating Action Button？

Floating Action Button 是一个圆形的按钮，通常用于触发一个主要的操作，比如添加新项目、发起对话等。它通常浮动在用户界面的上方，始终可见，提供快速访问。

1. 安装 Material UI

如果您还没有安装 Material UI，可以通过以下命令安装：

npm install @mui/material @emotion/react @emotion/styled

2. 基本使用

Floating Action Button 的基本用法非常简单。以下是一个简单的示例，展示了如何使用 FAB 组件：

import React from 'react';
import { Fab } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function BasicFAB() {
    const handleClick = () => {
        alert('添加操作');
    };

    return (
        <Fab color="primary" onClick={handleClick}>
            <AddIcon />
        </Fab>
    );
}

export default BasicFAB;

代码解析

Fab: 这是 Floating Action Button 的核心组件。color 属性设置按钮的颜色，onClick 事件处理函数用于响应点击操作。
AddIcon: 使用 Material UI 的图标组件，作为按钮的图标。

3. Floating Action Button 属性

3.1 常用属性

color: 定义按钮的颜色，取值可以是 default、inherit、primary、secondary。
size: 控制按钮的大小，取值可以是 small、medium、large。
variant: 控制按钮的样式，通常为 circular（默认）或 extended。
onClick: 点击按钮时触发的事件处理函数。
disabled: 布尔值，表示按钮是否被禁用。

3.2 示例：不同颜色和大小的 FAB

import React from 'react';
import { Fab, Box } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import SaveIcon from '@mui/icons-material/Save';

function ColorSizeFABs() {
    const handleClick = (action) => {
        alert(`${action} 操作`);
    };

    return (
        <Box sx={{ '& > *': { m: 1 } }}>
            <Fab color="primary" onClick={() => handleClick('编辑')}>
                <EditIcon />
            </Fab>
            <Fab color="secondary" onClick={() => handleClick('删除')}>
                <DeleteIcon />
            </Fab>
            <Fab color="default" onClick={() => handleClick('保存')}>
                <SaveIcon />
            </Fab>
            <Fab size="small" color="primary" onClick={() => handleClick('小按钮')}>
                <EditIcon />
            </Fab>
            <Fab size="large" color="primary" onClick={() => handleClick('大按钮')}>
                <EditIcon />
            </Fab>
        </Box>
    );
}

export default ColorSizeFABs;

代码解析

展示了不同颜色和大小的 FAB，使用 Box 组件进行布局。
点击 FAB 时，会弹出相应的操作提示。

4. 扩展 FAB

Floating Action Button 可以通过设置 variant 属性为 extended 来扩展按钮的宽度，便于添加更多的文本和图标。

示例：扩展 FAB

import React from 'react';
import { Fab, Box } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function ExtendedFAB() {
    const handleClick = () => {
        alert('添加新项目');
    };

    return (
        <Box sx={{ '& > *': { m: 1 } }}>
            <Fab variant="extended" color="primary" onClick={handleClick}>
                <AddIcon sx={{ mr: 1 }} />
                添加
            </Fab>
        </Box>
    );
}

export default ExtendedFAB;

代码解析

使用 variant="extended" 将 FAB 扩展为更宽的按钮，可以包含图标和文本。

5. FAB 结合其他组件使用

5.1 结合 Snackbar 使用

Floating Action Button 常与 Snackbar 结合使用，提供用户反馈。以下示例展示如何在点击 FAB 后显示 Snackbar。

import React, { useState } from 'react';
import { Fab, Snackbar, Box } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function FABWithSnackbar() {
    const [open, setOpen] = useState(false);

    const handleClick = () => {
        setOpen(true);
    };

    const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpen(false);
    };

    return (
        <Box>
            <Fab color="primary" onClick={handleClick}>
                <AddIcon />
            </Fab>
            <Snackbar
                open={open}
                autoHideDuration={3000}
                onClose={handleClose}
                message="已添加新项目"
            />
        </Box>
    );
}

export default FABWithSnackbar;

代码解析

点击 FAB 后，使用 Snackbar 组件显示一条反馈信息。
autoHideDuration 属性控制 Snackbar 显示的时间。

5.2 结合 Dialog 使用

FAB 也可以用于打开 Dialog 进行用户输入。

import React, { useState } from 'react';
import { Fab, Dialog, DialogActions, DialogContent, DialogTitle, Button } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function FABWithDialog() {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <>
            <Fab color="primary" onClick={handleClickOpen}>
                <AddIcon />
            </Fab>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>添加新项目</DialogTitle>
                <DialogContent>
                    {/* 这里可以添加表单内容 */}
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">取消</Button>
                    <Button onClick={handleClose} color="primary">添加</Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

export default FABWithDialog;

代码解析

点击 FAB 打开一个 Dialog，用户可以在其中进行输入。
DialogActions 用于放置取消和添加按钮。

6. 结合响应式设计

Floating Action Button 可以与 Material UI 的 Grid 系统结合使用，以适应不同的屏幕尺寸。

示例：响应式 FAB

import React from 'react';
import { Grid, Fab } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function ResponsiveFAB() {
    return (
        <Grid container justifyContent="flex-end">
            <Grid item>
                <Fab color="primary">
                    <AddIcon />
                </Fab>
            </Grid>
        </Grid>
    );
}

export default ResponsiveFAB;