Кнопки и FAB

В SvelteKit UI кнопки (Button) являются базовым элементом интерфейса, позволяя пользователю инициировать действия. Компонент кнопки легко настраивается через пропсы и слоты, поддерживает различные состояния и стили.

Создание простой кнопки

<script>
  import { Button } from 'sveltekit-ui';
</script>

<Button>Нажми меня</Button>

Кнопка по умолчанию рендерится как <button> с базовыми стилями. Для изменения визуального вида используется проп variant:

<Button variant="primary">Основная</Button>
<Button variant="secondary">Вторичная</Button>
<Button variant="danger">Опасная</Button>

Ключевые варианты:

  • primary — основной акцент интерфейса, яркий цвет.
  • secondary — менее заметная, поддерживающая визуальную иерархию.
  • danger — кнопка для критичных действий, предупреждающий красный цвет.

Состояния кнопки

Кнопка может находиться в нескольких состояниях:

  • disabled — недоступна для взаимодействия.
  • loading — отображает индикатор загрузки.
  • active / focus — визуальное выделение состояния.
<Button disabled>Недоступно</Button>
<Button loading>Загрузка...</Button>

Состояние loading автоматически блокирует клик и показывает анимацию загрузки.

Размеры и формы

Кнопки поддерживают размеры через проп size:

<Button size="small">Маленькая</Button>
<Button size="medium">Средняя</Button>
<Button size="large">Большая</Button>

Также можно менять форму с помощью пропа rounded:

<Button rounded>Скругленная</Button>
<Button rounded="full">Полностью круглая</Button>

Расширенные возможности: иконки и слоты

SvelteKit UI поддерживает встроенные иконки, которые добавляются через слот icon или проп icon:

<Button icon="check">Подтвердить</Button>

<Button>
  <span slot="icon">✔️</span>
  Сохранить
</Button>
  • icon-only — кнопка без текста, только иконка, удобна для компактных интерфейсов:
<Button icon="settings" aria-label="Настройки" />
  • Поддержка aria-label обязательна для доступности.

FAB (Floating Action Button)

FAB — это плавающая кнопка для ключевых действий, обычно закрепляется в углу экрана и визуально выделяется.

Простейший FAB

<script>
  import { Fab } from 'sveltekit-ui';
</script>

<Fab icon="add" aria-label="Добавить элемент" />

Варианты расположения и размеров

FAB может быть:

  • bottom-right — стандартное расположение.
  • bottom-left — альтернативное расположение.
  • Поддерживаются размеры small, medium, large через проп size.
<Fab icon="edit" size="large" position="bottom-left" />

Анимации и состояния FAB

SvelteKit UI предоставляет встроенные анимации при наведении и клике:

  • scale — легкое увеличение при наведении.
  • ripple — эффект волны при клике.
<Fab icon="share" animation="ripple" />

Расширенные FAB с меню

FAB может открывать меню с дополнительными действиями через слот menu:

<Fab icon="menu">
  <div slot="menu">
    <Button icon="edit">Редактировать</Button>
    <Button icon="delete">Удалить</Button>
  </div>
</Fab>
  • Меню автоматически располагается рядом с FAB.
  • Поддерживается клавиатурная навигация и закрытие по Esc.

Интеграция с состоянием приложения

Кнопки и FAB легко связываются с состоянием через реактивные переменные SvelteKit:

<script>
  import { Button, Fab } from 'sveltekit-ui';
  let isLoading = false;

  function handleClick() {
    isLoading = true;
    setTimeout(() => isLoading = false, 2000);
  }
</script>

<Button on:click={handleClick} loading={isLoading}>Отправить</Button>
<Fab icon="send" on:click={handleClick} loading={isLoading} />
  • Любое асинхронное действие можно визуально показать через loading.
  • Дублирование логики для разных кнопок устраняется через общие функции и реактивные переменные.

Настройка стилей и темизации

SvelteKit UI поддерживает кастомизацию через CSS-переменные и пропы:

<Button style="--button-bg: #4caf50; --button-color: white;">
  Кастомная кнопка
</Button>

<Fab style="--fab-bg: #ff5722; --fab-hover: #e64a19;" icon="star" />
  • Переменные позволяют задавать цвета, тени, радиусы скругления.
  • Полностью интегрируется с глобальной темой приложения.

Практические рекомендации

  • Использовать FAB только для главного действия — перегрузка интерфейса множеством FAB нарушает UX.
  • Состояние loading повышает прозрачность действий для пользователя.
  • Иконки и слоты позволяют создавать кнопки с гибкой компоновкой без дополнительной верстки.
  • Размер и расположение кнопок и FAB должны учитывать мобильные устройства и адаптивность интерфейса.

Kнопки и FAB в SvelteKit UI представляют собой мощные и гибкие инструменты для построения интерактивного интерфейса, сочетающие визуальную привлекательность, доступность и удобство интеграции с состоянием приложения.

Оглавление