useLayout

В библиотеке Vuetify useLayout представляет собой Composition API хук, предназначенный для доступа к информации о текущем расположении компонентов интерфейса и адаптивных точках останова (breakpoints). Этот инструмент особенно полезен при создании динамических интерфейсов, где поведение элементов зависит от размеров экрана и состояния боковой панели (navigation drawer) или верхней панели (app bar).

Подключение и базовое использование

Для начала необходимо импортировать хук из библиотеки Vuetify:

import { useLayout } from 'vuetify';

Далее, внутри setup() компонента можно получить объект layout, содержащий информацию о текущем состоянии интерфейса:

export default {
  setup() {
    const layout = useLayout();

    return { layout };
  }
}

Теперь объект layout предоставляет доступ к следующим ключевым свойствам:

  • layout.mobile – логическое значение (true или false), определяющее, является ли текущий экран мобильным (в соответствии с breakpoint настроенным в Vuetify).
  • layout.left / layout.right – ширина боковых панелей, если они открыты.
  • layout.top / layout.bottom – высота верхней и нижней панелей приложения.
  • layout.width / layout.height – общие размеры видимой области контента.
  • layout.thresholds – объект с точками останова (xs, sm, md, lg, xl) и их размерами.
  • layout.display – текущее состояние отображения (xs, sm, md, lg, xl), полезно для адаптивной логики.

Реактивность и динамическое управление

Объект layout является реактивным, что позволяет отслеживать изменения размера окна и состояния панелей в реальном времени. Например, можно условно отображать элементы в зависимости от текущего breakpoint:

<template>
  <div>
    <p v-if="layout.mobile">Это мобильная версия интерфейса</p>
    <p v-else>Это версия для больших экранов</p>
  </div>
</template>

<script>
import { useLayout } from 'vuetify';

export default {
  setup() {
    const layout = useLayout();

    return { layout };
  }
}
</script>

В этом примере при изменении ширины окна реактивно изменяется вывод текста без необходимости ручной подписки на события resize.

Использование layout.display для адаптивной логики

Свойство layout.display возвращает текущий размерный ключ ('xs' | 'sm' | 'md' | 'lg' | 'xl'). Это особенно удобно при создании интерфейсов с несколькими вариантами отображения:

<template>
  <div>
    <v-btn v-if="layout.display === 'xs'">Мобильное меню</v-btn>
    <v-btn v-else>Стандартное меню</v-btn>
  </div>
</template>

Такой подход позволяет изменять поведение компонентов без медиа-запросов CSS, полностью полагаясь на реактивность Vuetify.

Работа с боковыми панелями и top bar

useLayout предоставляет информацию о размерах элементов интерфейса, что важно при работе с навигационными панелями и верхними панелями:

<template>
  <v-container :style="{ paddingLeft: layout.left + 'px', paddingTop: layout.top + 'px' }">
    Контент с учетом размеров панели
  </v-container>
</template>

<script>
import { useLayout } from 'vuetify';

export default {
  setup() {
    const layout = useLayout();
    return { layout };
  }
}
</script>

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

Расширенные возможности: thresholds и reactive display

Объект layout.thresholds позволяет точно настраивать логику для различных размеров экрана:

setup() {
  const layout = useLayout();

  function isTablet() {
    return layout.width >= layout.thresholds.sm && layout.width < layout.thresholds.lg;
  }

  return { layout, isTablet };
}

Метод isTablet() реактивно изменяется при изменении размеров окна, что позволяет программно реагировать на разные устройства без написания отдельного CSS.

Важные нюансы

  1. Реактивность – все свойства layout обновляются автоматически при изменении размеров окна. Это избавляет от необходимости вручную подписываться на события resize.
  2. Композиционный подход – useLayout легко интегрируется с другими Composition API хуками, такими как ref, computed и watch.
  3. Совместимость с SSR – при серверной рендеринге некоторые свойства (width, height) могут быть недоступны, поэтому рекомендуется использовать их только в клиентской части или оборачивать в onMounted.
  4. Динамическая адаптация – использование layout.display и layout.mobile позволяет создавать полностью адаптивные компоненты без дополнительных CSS-классов.

Примеры комбинаций

Условное отображение бокового меню и контента:

<template>
  <v-navigation-drawer v-if="!layout.mobile || drawerOpen">
    Меню
  </v-navigation-drawer>

  <v-main>
    <div :style="{ marginLeft: layout.left + 'px' }">
      Основной контент
    </div>
  </v-main>
</template>

<script>
import { useLayout } from 'vuetify';
import { ref } from 'vue';

export default {
  setup() {
    const layout = useLayout();
    const drawerOpen = ref(false);

    return { layout, drawerOpen };
  }
}
</script>

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

useLayout является ключевым инструментом для адаптивного дизайна в Vuetify, предоставляя разработчикам мощный и удобный способ работать с точками останова, размерами экранов и панелей без использования стороннего CSS или ручного отслеживания событий окна.

Оглавление