Drawer

Drawer — это компонент интерфейса, предназначенный для отображения панели, выдвигающейся с краю экрана, обычно используемой для дополнительной информации, меню или настроек. В библиотеке Naive UI Drawer реализован с высокой гибкостью и простотой интеграции в проекты на Vue.js.

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

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

import { NDrawer, NButton } from 'naive-ui'
import { ref } from 'vue'

export default {
  setup() {
    const showDrawer = ref(false)
    return { showDrawer }
  }
}

В шаблоне:

<n-button @click="showDrawer = true">Открыть Drawer</n-button>

<n-drawer v-model:show="showDrawer" title="Пример Drawer">
  <p>Содержимое панели.</p>
</n-drawer>

Ключевые моменты:

  • v-model:show управляет видимостью панели.
  • title задаёт заголовок Drawer.
  • Контент помещается внутрь тега <n-drawer>.

Направления выдвижения

Drawer в Naive UI поддерживает четыре направления выдвижения через проп placement:

<n-drawer v-model:show="showDrawer" placement="right" title="Правый Drawer">
  Контент
</n-drawer>

<n-drawer v-model:show="showDrawer" placement="left" title="Левый Drawer">
  Контент
</n-drawer>

<n-drawer v-model:show="showDrawer" placement="top" title="Верхний Drawer">
  Контент
</n-drawer>

<n-drawer v-model:show="showDrawer" placement="bottom" title="Нижний Drawer">
  Контент
</n-drawer>

Примечание: placement может принимать значения 'left' | 'right' | 'top' | 'bottom'. По умолчанию используется 'right'.

Настройка размеров

Размер панели управляется пропом width для вертикальных Drawer и height для горизонтальных:

<n-drawer v-model:show="showDrawer" width="400px">
  Контент
</n-drawer>

<n-drawer v-model:show="showDrawer" placement="bottom" height="300px">
  Контент
</n-drawer>

Поддерживаются единицы измерения px, % и vh/vw. Если размер не задан, используется стандартная ширина 400px для вертикальных панелей и 300px для горизонтальных.

Управление закрытием

Drawer можно закрыть различными способами:

  • Кнопка закрытия (closable) По умолчанию Drawer содержит крестик в верхнем углу.
<n-drawer v-model:show="showDrawer" closable>
  Контент
</n-drawer>
  • Закрытие по клику вне панели (mask-closable) Проп mask-closable отвечает за возможность закрытия кликом по затемнённой области:
<n-drawer v-model:show="showDrawer" mask-closable>
  Контент
</n-drawer>
  • Программное закрытие Можно управлять видимостью через v-model:show или метод, изменяя реактивное состояние.

Анимация и переходы

Drawer в Naive UI поддерживает плавное выдвижение. Для изменения стандартной анимации используются пропы show-mask и кастомные классы через class:

<n-drawer
  v-model:show="showDrawer"
  transition-name="fade-slide-right"
  show-mask
>
  Контент
</n-drawer>

Можно подключить собственные CSS-анимации для создания уникального эффекта.

Drawer позволяет добавлять футер с кнопками подтверждения или отмены через слот footer:

<n-drawer v-model:show="showDrawer" title="Пример с футером">
  <p>Основной контент</p>
  <template #footer>
    <n-button @click="showDrawer = false">Отмена</n-button>
    <n-button type="primary">Сохранить</n-button>
  </template>
</n-drawer>

Использование слотов делает компонент максимально гибким для любых пользовательских сценариев.

Комбинирование с другими компонентами

Drawer идеально сочетается с формами, таблицами и настройками:

<n-drawer v-model:show="showDrawer" title="Настройки пользователя">
  <n-form :model="userSettings">
    <n-form-item label="Имя">
      <n-input v-model:value="userSettings.name" />
    </n-form-item>
    <n-form-item label="Email">
      <n-input v-model:value="userSettings.email" />
    </n-form-item>
  </n-form>
</n-drawer>

Это позволяет создавать интерактивные панели без необходимости отдельного маршрута или модального окна.

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

Drawer поддерживает динамическое содержимое. Можно загружать данные при открытии:

const userData = ref(null)

watch(showDrawer, async (val) => {
  if (val) {
    userData.value = await fetchUserData()
  }
})
<n-drawer v-model:show="showDrawer" title="Профиль">
  <p v-if="!userData">Загрузка...</p>
  <div v-else>
    <p>Имя: {{ userData.name }}</p>
    <p>Email: {{ userData.email }}</p>
  </div>
</n-drawer>

Советы по производительности

  1. Ленивая загрузка: использовать v-if для Drawer, который редко отображается.
  2. Минимизация слотов: тяжелый контент лучше подгружать через асинхронные компоненты.
  3. Использование destroy-on-close: очищает содержимое при закрытии, освобождая память:
<n-drawer v-model:show="showDrawer" destroy-on-close>
  Контент
</n-drawer>

Drawer в Naive UI предоставляет мощный и гибкий инструмент для реализации выдвижных панелей любого типа, от простых меню до сложных интерактивных форм и настроек.

Оглавление