QBtn основной компонент кнопок

QBtn — базовый компонент библиотеки Quasar Framework, предназначенный для создания кнопок с широкими возможностями стилизации, поведения и интеграции с другими элементами интерфейса. Он является универсальным элементом управления, применяемым как для простых действий, так и для сложных сценариев взаимодействия.

Компонент реализован на базе Vue.js и полностью поддерживает реактивную модель данных, слоты и систему директив.

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

Минимальный пример кнопки:

<q-btn label="Нажми меня" />

Кнопка отображает текст, заданный через свойство label. По умолчанию применяется стандартная тема и базовые стили.

Альтернативный вариант с использованием слотов:

<q-btn>
  Нажми меня
</q-btn>

Основные свойства (props)

Текст и иконки

  • label — текст кнопки
  • icon — иконка слева
  • icon-right — иконка справа
<q-btn label="Сохранить" icon="save" />
<q-btn label="Далее" icon-right="arrow_forward" />

Цвета

  • color — основной цвет кнопки
  • text-color — цвет текста
<q-btn label="Primary" color="primary" />
<q-btn label="Custom" color="green" text-color="black" />

Цвета соответствуют палитре, определённой в конфигурации Quasar.

Внешний вид

Типы кнопок:

  • flat — без фона
  • outline — с рамкой
  • unelevated — без тени
  • push — эффект нажатия
  • glossy — глянцевый стиль
<q-btn label="Flat" flat />
<q-btn label="Outline" outline />
<q-btn label="Push" push />

Размеры

  • size="sm | md | lg | xl"
  • либо кастомные значения (px, em)
<q-btn label="Small" size="sm" />
<q-btn label="Large" size="lg" />

Форма

  • round — круглая кнопка
  • rounded — скруглённые углы
<q-btn icon="add" round color="primary" />
<q-btn label="Rounded" rounded />

Поведение и взаимодействие

События

Основное событие — @click:

<q-btn label="Клик" @click="handleClick" />
methods: {
  handleClick () {
    console.log('Нажато')
  }
}

Состояния

  • loading — отображение индикатора загрузки
  • disable — отключение кнопки
<q-btn label="Загрузка" loading />
<q-btn label="Отключено" disable />

При loading кнопка автоматически блокирует взаимодействие.

Индикатор загрузки

Можно кастомизировать:

<q-btn label="Отправка" loading>
  <template v-slot:loading>
    <q-spinner-hourglass />
  </template>
</q-btn>

Навигация

QBtn может выступать как ссылка или элемент маршрутизации.

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

<q-btn label="На главную" to="/" />

Поддерживаются свойства:

  • to — путь (Vue Router)
  • replace
  • exact

Внешние ссылки

<q-btn label="Google" href="https://google.com" target="_blank" />

Иконки и их использование

Quasar поддерживает Material Icons и другие наборы:

<q-btn icon="menu" flat />

Комбинирование:

<q-btn icon="add" label="Добавить" color="primary" />

Группировка кнопок

Компонент QBtnGroup используется для объединения:

<q-btn-group>
  <q-btn label="Left" />
  <q-btn label="Middle" />
  <q-btn label="Right" />
</q-btn-group>

Обеспечивает визуальную связность и единое поведение.

Кнопки с выпадающим меню

Интеграция с QMenu:

<q-btn label="Меню">
  <q-menu>
    <q-list>
      <q-item clickable v-close-popup>
        <q-item-section>Пункт 1</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</q-btn>

FAB (Floating Action Button)

Плавающая кнопка:

<q-btn fab icon="add" color="primary" />

Расширенный вариант:

<q-fab icon="menu" direction="up">
  <q-fab-action icon="add" />
  <q-fab-action icon="edit" />
</q-fab>

Доступность (Accessibility)

QBtn автоматически добавляет:

  • role="button"
  • поддержку клавиатуры (Enter, Space)
  • aria-атрибуты

Дополнительно:

<q-btn label="Удалить" aria-label="Удалить элемент" />

Работа с формами

Кнопка может выступать как submit:

<q-btn label="Отправить" type="submit" />

Или reset:

<q-btn label="Сброс" type="reset" />

Динамическое управление

Пример с реактивными данными:

<q-btn
  :label="isLoading ? 'Загрузка...' : 'Отправить'"
  :loading="isLoading"
  @click="submit"
/>
data () {
  return {
    isLoading: false
  }
},
methods: {
  async submit () {
    this.isLoading = true
    await new Promise(r => setTimeout(r, 2000))
    this.isLoading = false
  }
}

Кастомизация через CSS и классы

Можно использовать стандартные классы:

<q-btn class="my-custom-btn" label="Стиль" />
.my-custom-btn {
  font-weight: bold;
  border-radius: 12px;
}

Темизация

Компонент автоматически адаптируется под:

  • светлую/тёмную тему
  • глобальные настройки Quasar

Пример:

<q-btn color="dark" text-color="white" />

Частые сценарии использования

Кнопка подтверждения

<q-btn color="positive" label="Подтвердить" />

Кнопка удаления

<q-btn color="negative" icon="delete" flat />

Иконка без текста

<q-btn icon="settings" round flat />

Производительность и рекомендации

  • Избегать избыточного использования loading
  • Не злоупотреблять сложными слотами внутри кнопки
  • Использовать unelevated вместо теней при массовом рендеринге
  • Группировать кнопки для оптимизации DOM

Внутренние особенности реализации

QBtn:

  • использует ripple-эффект для визуальной обратной связи
  • управляет фокусом и состояниями через Vue реактивность
  • оптимизирован для SSR и SPA режимов

Компонент также поддерживает директивы Quasar, такие как v-ripple, и может быть расширен через пользовательские обёртки.

Оглавление