Fab для плавающих кнопок

Floating Action Button (Fab) — это элемент интерфейса, представляющий собой плавающую круглую кнопку, которая используется для выделения ключевых действий на странице. В библиотеке MUI Fab реализуется как компонент Fab и поддерживает гибкую кастомизацию через пропсы и стили.

Основное использование

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

function FloatingButton() {
  return (
    <Fab color="primary" aria-label="add">
      <AddIcon />
    </Fab>
  );
}
  • color — задаёт цвет кнопки, доступные варианты: primary, secondary, inherit, default.
  • aria-label — обязательный атрибут для доступности, описывает назначение кнопки.
  • Внутри Fab обычно размещают иконку (Icon) или небольшую комбинацию текста и иконки.

Размеры и вариации

Компонент поддерживает несколько размеров через проп size:

  • small — компактная кнопка для ограниченного пространства.
  • medium — стандартный размер.
  • large — увеличенная версия для привлечения внимания.
<Fab size="small" color="secondary">
  <AddIcon />
</Fab>
<Fab size="large" color="primary">
  <AddIcon />
</Fab>

Варианты оформления

MUI предоставляет проп variant для управления стилем кнопки:

  • circular (по умолчанию) — классический круглый Fab.
  • extended — вытянутая кнопка с текстом и иконкой:
<Fab variant="extended" color="primary">
  <AddIcon sx={{ mr: 1 }} />
  Добавить
</Fab>
  • Использование extended особенно удобно для пояснения действия кнопки на странице.

Стилизация с sx и styled

Для гибкой кастомизации можно использовать проп sx или styled API:

<Fab
  color="primary"
  sx={{
    position: 'fixed',
    bottom: 16,
    right: 16,
    bgcolor: 'secondary.main',
    '&:hover': {
      bgcolor: 'secondary.dark'
    }
  }}
>
  <AddIcon />
</Fab>
  • position: 'fixed' закрепляет кнопку внизу экрана.
  • bgcolor и &:hover позволяют легко изменять цвет фона и поведение при наведении.

styled API позволяет создавать полностью кастомные компоненты:

import { styled } from '@mui/material/styles';

const CustomFab = styled(Fab)(({ theme }) => ({
  backgroundColor: theme.palette.success.main,
  '&:hover': {
    backgroundColor: theme.palette.success.dark,
  },
  boxShadow: theme.shadows[6],
}));

<CustomFab>
  <AddIcon />
</CustomFab>

Позиционирование и интеграция с layout

Fab часто размещается поверх контента в правом нижнем углу экрана:

<Box sx={{ position: 'relative', height: 400 }}>
  <Fab
    color="primary"
    sx={{ position: 'absolute', bottom: 16, right: 16 }}
  >
    <AddIcon />
  </Fab>
</Box>
  • Box используется как контейнер для позиционирования.
  • absolute или fixed позволяют Fab “парить” над контентом, что делает его заметным.

Работа с событиями

Fab поддерживает стандартные события кнопок:

<Fab color="secondary" onCl ick={() => console.log('Fab clicked')}>
  <AddIcon />
</Fab>
  • onClick — основное событие для обработки действий пользователя.
  • Можно подключать onMouseEnter, onMouseLeave и другие стандартные события React.

Интеграция с Tooltip

Часто Fab сопровождается всплывающей подсказкой:

import Tooltip from '@mui/material/Tooltip';

<Tooltip title="Добавить элемент">
  <Fab color="primary">
    <AddIcon />
  </Fab>
</Tooltip>
  • Tooltip улучшает UX, особенно при использовании только иконки без текста.
  • Проп title задаёт текст подсказки.

Использование с переходами и анимациями

Для плавного появления и скрытия Fab можно использовать Zoom или Fade:

import Zoom from '@mui/material/Zoom';

<Zoom in={true}>
  <Fab color="primary">
    <AddIcon />
  </Fab>
</Zoom>
  • in контролирует видимость.
  • Zoom обеспечивает эффект увеличения при появлении, Fade — плавное затухание.

Основные рекомендации по дизайну

  • Использовать Fab только для ключевых действий, чтобы не перегружать интерфейс.
  • Для мобильных интерфейсов размещать Fab в правом нижнем углу.
  • extended версия удобна для объяснения действий, когда требуется текстовая подпись.
  • Поддерживать доступность: всегда указывать aria-label и сочетать с Tooltip при необходимости.

Fab в MUI — мощный инструмент для выделения действий пользователя. Комбинация гибкой стилизации, различных размеров и вариантов позволяет интегрировать кнопки практически в любой интерфейс, сохраняя современный и удобный дизайн.

Оглавление