Типы и стили кнопок

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

Минимальное использование:

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

Кнопка по умолчанию уже имеет базовую стилизацию и реакцию на взаимодействие.

Типы кнопок

Обычная кнопка (Default)

Используется для стандартных действий:

<q-btn label="Сохранить" color="primary" />

Ключевые свойства:

  • label — текст кнопки
  • color — цвет из палитры Quasar

Плоская кнопка (Flat)

Не имеет фона, используется для второстепенных действий:

<q-btn label="Отмена" flat />

Особенности:

  • Отсутствие фона
  • Акцент на тексте и hover-эффекте

Контурная кнопка (Outline)

Имеет рамку без заливки:

<q-btn label="Подробнее" outline color="primary" />

Подходит для:

  • Ненавязчивых действий
  • Альтернативных вариантов выбора

Кнопка с эффектом поднятия (Unelevated / Raised)

По умолчанию кнопки имеют небольшую тень. Для управления этим поведением:

<q-btn label="Подтвердить" unelevated />
  • unelevated — убирает тень
  • без параметра — стандартная тень

Кнопка с иконкой

<q-btn icon="favorite" color="red" />

С текстом:

<q-btn icon="save" label="Сохранить" />

Расположение иконки:

  • слева (по умолчанию)
  • справа:
<q-btn label="Далее" icon-right="arrow_forward" />

Круглая кнопка (Round)

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

Особенности:

  • Круглая форма
  • Используется только с иконками

Кнопка-плитка (Square)

<q-btn square label="A" />

Убирает скругления углов.

Кнопка-ссылка

<q-btn label="Перейти" to="/home" />

Или внешняя ссылка:

<q-btn label="Открыть сайт" href="https://example.com" target="_blank" />

Стилизация кнопок

Цвета

Quasar использует встроенную палитру:

<q-btn color="primary" />
<q-btn color="secondary" />
<q-btn color="accent" />
<q-btn color="negative" />
<q-btn color="positive" />

Текст можно окрасить отдельно:

<q-btn color="white" text-color="black" label="Контраст" />

Градиенты и кастомные стили

Через классы:

<q-btn class="bg-gradient text-white" label="Градиент" />

Или inline:

<q-btn style="background: linear-gradient(to right, red, blue);" />

Размеры

<q-btn size="xs" />
<q-btn size="sm" />
<q-btn size="md" />
<q-btn size="lg" />
<q-btn size="xl" />

Также можно задавать через CSS:

<q-btn style="font-size: 20px; padding: 10px 20px;" />

Плотность (Dense)

<q-btn dense label="Компактная" />

Уменьшает отступы и высоту кнопки.

Растяжение на всю ширину

<q-btn label="На всю ширину" class="full-width" />

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

Отключённое состояние

<q-btn label="Недоступно" disable />

Состояние загрузки

<q-btn label="Загрузка" loading />

С кастомным индикатором:

<q-btn loading>
  <template v-slot:loading>
    <q-spinner-hourglass />
  </template>
</q-btn>

Активное состояние

<q-btn :active="isActive" label="Активно" />

Группы кнопок

Компонент QBtnGroup:

<q-btn-group>
  <q-btn label="Левый" />
  <q-btn label="Центр" />
  <q-btn label="Правый" />
</q-btn-group>

Особенности:

  • Объединённая стилизация
  • Общие границы

Переключаемые кнопки

Использование toggle:

<q-btn-toggle
  v-model="model"
  :options="[
    { label: 'Да', value: true },
    { label: 'Нет', value: false }
  ]"
/>

Позволяет реализовать:

  • выбор одного варианта
  • переключение состояний

Кнопки с меню

<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>

Floating Action Button (FAB)

Плавающая кнопка действия:

<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>

Кнопки с обработчиками событий

<q-btn label="Клик" @click="handleClick" />

Поддерживаются все стандартные события:

  • @click
  • @mousedown
  • @mouseup
  • @keyup

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

Пример кастомной темы:

.my-btn {
  border-radius: 12px;
  text-transform: uppercase;
}
<q-btn class="my-btn" label="Стиль" />

Взаимодействие с иконками и слотами

Использование слотов:

<q-btn>
  <q-icon name="star" />
  <span>Избранное</span>
</q-btn>

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

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

  • ARIA-атрибуты
  • поддержку клавиатуры

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

<q-btn aria-label="Закрыть" icon="close" />

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

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

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

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

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

Минималистичная кнопка

<q-btn flat dense icon="more_vert" />

Влияние свойств на UX

  • flat снижает визуальный вес
  • outline делает действие вторичным
  • color задаёт приоритет
  • loading предотвращает повторные действия
  • disable исключает ошибочные клики

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

Оглавление