Настройка позиции и анимации

Позиционирование компонентов

Quasar предоставляет гибкие средства для управления расположением компонентов на странице. Основными инструментами являются классы утилит позиционирования, свойство position и использование контейнеров с системой Flexbox.

Классы утилит позиционирования позволяют быстро управлять выравниванием без написания CSS:

  • absolute-top, absolute-bottom, absolute-left, absolute-right — фиксируют элемент относительно родительского блока.
  • fixed-top, fixed-bottom — фиксируют элемент относительно окна браузера, независимо от скролла.
  • q-mt-*, q-mb-*, q-ml-*, q-mr-* — добавляют внешние отступы, где * обозначает числовое значение от 0 до 24 по шкале Quasar.

Свойство position в компонентах, таких как QMenu, QTooltip, QDialog, управляет точкой привязки:

<QMenu
  v-model="menu"
  anchor="top left"
  self="bottom right"
>
  <q-list>
    <q-item clickable v-ripple>
      <q-item-section>Пункт меню</q-item-section>
    </q-item>
  </q-list>
</QMenu>
  • anchor задаёт точку, к которой элемент будет привязан относительно родителя.
  • self определяет, какая часть компонента будет располагаться на выбранной точке привязки.

Комбинация anchor и self позволяет создавать динамическое позиционирование, например, для выпадающих меню, тултипов и диалогов, с автоматическим подстраиванием под размеры экрана.

Адаптивное позиционирование

Quasar поддерживает автоматическое определение положения, чтобы компоненты не выходили за границы экрана. Для этого используется свойство cover или флаг auto-close:

<QMenu
  v-model="menu"
  anchor="bottom left"
  self="top left"
  cover
>
  <q-list>
    <q-item clickable>
      <q-item-section>Элемент меню</q-item-section>
    </q-item>
  </q-list>
</QMenu>

Свойство cover заставляет меню накладываться на родительский элемент, что особенно полезно для кнопок в навигационных панелях. Quasar автоматически корректирует позицию при переполнении экрана.

Анимации открытия и закрытия

Для визуальной плавности Quasar использует встроенные CSS-анимации и переходы Vue. Свойство transition-show и transition-hide позволяет задавать кастомные эффекты:

<QDialog
  v-model="dialog"
  transition-show="slide-up"
  transition-hide="slide-down"
>
  <q-card>
    <q-card-section>Содержимое диалога</q-card-section>
  </q-card>
</QDialog>
  • Доступные стандартные анимации: fade, scale, slide-up, slide-down, slide-left, slide-right.
  • Можно создавать собственные анимации, определяя классы в CSS и указывая их через transition-show и transition-hide.

Переходы Quasar интегрированы с реактивной системой Vue, что обеспечивает плавное появление и исчезновение компонентов без задержек или “дерганий”.

Плавная трансформация элементов

Quasar поддерживает движение и трансформации через директиву v-touch-pan и классы утилит:

  • q-transition-* для мгновенных визуальных эффектов, таких как появление, исчезновение, масштабирование.
  • Свойства :style и :class позволяют задавать динамические трансформации через translate, rotate и scale.

Пример динамического сдвига элемента:

<q-btn
  :style="{ transform: `translateX(${x}px) translateY(${y}px)` }"
  label="Двигающаяся кнопка"
/>

Такой подход подходит для реализации drag-and-drop интерфейсов, интерактивных панелей и анимационных эффектов при наведении.

Комбинированные стратегии позиционирования и анимации

Для сложных интерфейсов часто используется комбинация:

  1. Anchor + Self для точного позиционирования.
  2. Cover + Auto-adjust для предотвращения выхода за границы экрана.
  3. Transition-show/hide для плавного открытия и закрытия.
  4. CSS-трансформации и утилиты Quasar для динамических перемещений и эффектов при взаимодействии.

Пример:

<QTooltip
  anchor="top middle"
  self="bottom middle"
  transition-show="scale"
  transition-hide="fade"
>
  Подсказка с плавной анимацией
</QTooltip>

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

Оптимизация производительности анимаций

  • Использовать CSS-анимации вместо JavaScript-анимаций для лёгких компонентов.
  • Минимизировать количество одновременно анимируемых элементов.
  • Использовать v-show вместо v-if для часто открываемых/закрываемых компонентов, чтобы избежать постоянного монтирования и размонтирования.

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

Оглавление