FloatButton

Компонент FloatButton в библиотеке Naive UI представляет собой плавающую кнопку, которая располагается поверх контента страницы и используется для быстрого доступа к часто выполняемым действиям. Он идеально подходит для случаев, когда нужно выделить одно действие, не занимая место в основной навигации.

Ключевые особенности FloatButton:

  • Поддержка различных позиций на экране.
  • Возможность добавления иконок.
  • Настраиваемые цвета, размеры и эффекты наведения.
  • Интеграция с анимацией появления и исчезновения.

Импорт и базовое использование

Для использования FloatButton его необходимо импортировать из библиотеки Naive UI:

import { NFloatButton } from 'naive-ui';

Простейший пример использования:

 console.log('FloatButton clicked')}
/>

В данном примере кнопка отображается с иконкой «plus», а при клике выводится сообщение в консоль.

Позиционирование

FloatButton поддерживает различные позиции на экране с помощью свойства placement. Возможные значения:

  • "bottom-right" — правый нижний угол (значение по умолчанию)
  • "bottom-left" — левый нижний угол
  • "top-right" — правый верхний угол
  • "top-left" — левый верхний угол

Пример:

Настройка внешнего вида

FloatButton позволяет полностью кастомизировать внешний вид через следующие свойства:

  • size — размер кнопки (small, medium, large).
  • color — цвет фона кнопки.
  • text-color — цвет текста или иконки.
  • border-radius — радиус скругления углов.
  • shadow — тень кнопки для глубины интерфейса.

Пример с настройкой внешнего вида:

Использование с группой кнопок

Для расширенных интерфейсов FloatButton может работать как группа кнопок, создавая всплывающее меню действий. Для этого применяется компонент NFloatButton.Group:


   console.log('Edit clicked')} />
   console.log('Delete clicked')} />
   console.log('Share clicked')} />

Такой подход позволяет создавать компактное всплывающее меню с несколькими действиями, не перегружая основной интерфейс.

Анимация появления и исчезновения

FloatButton поддерживает плавные переходы через свойства appear, disappear и интеграцию с CSS-анимацией. Например:

 console.log('Animated button clicked')}
/>

Использование этих свойств позволяет сделать интерфейс более динамичным и визуально приятным.

События

Основное событие — onClick, но также поддерживаются:

  • onMouseEnter — срабатывает при наведении курсора.
  • onMouseLeave — срабатывает при уходе курсора.
  • onContextmenu — обработка клика правой кнопкой мыши.

Пример:

 console.log('Mouse entered')}
  onMouseLe ave={() => console.log('Mouse left')}
/>

Доступность и мобильная адаптация

FloatButton автоматически адаптируется под сенсорные экраны, сохраняя размер и расположение для удобного использования на мобильных устройствах. Кроме того, библиотека поддерживает стандартные атрибуты ARIA, обеспечивая доступность для пользователей с ограниченными возможностями.

Интеграция с другими компонентами Naive UI

FloatButton может использоваться совместно с NMessage, NPopover, NDialog и другими компонентами для расширения функционала. Например, кнопка может открывать диалоговое окно или всплывающее уведомление:

 {
    $message.success('Сообщение отправлено');
  }}
/>

Такой подход позволяет создавать интерактивные элементы с минимальной нагрузкой на интерфейс.

Оглавление