Drawer

Компонент Drawer представляет собой панель, которая выдвигается с одной из сторон экрана и используется для отображения дополнительного содержимого, не перегружая основное пространство интерфейса. В библиотеке Element Plus Drawer реализован с гибкой настройкой позиции, размеров, поведения и анимаций.

Основная структура

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

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

  • visible.sync — реактивное свойство для управления открытием и закрытием Drawer. Использование .sync обеспечивает двустороннюю связь состояния.
  • title — заголовок панели.
  • direction — направление выдвижения: rtl (справа налево), ltr (слева направо), ttb (сверху вниз), btt (снизу вверх).
  • size — ширина или высота панели в зависимости от направления, может быть задано в процентах или пикселях.

Настройка размеров и направлений

Drawer поддерживает динамическое изменение размеров:


  
Контент панели снизу вверх

Направления:

  • rtl — панель выезжает справа.
  • ltr — панель выезжает слева.
  • ttb — панель выезжает сверху.
  • btt — панель выезжает снизу.

Размеры:

  • Процентное значение size="50%" задаёт половину ширины или высоты родительского контейнера.
  • Фиксированное значение size="400px" задаёт точный размер.

События

Drawer предоставляет несколько событий, которые позволяют управлять поведением панели:

  • open — срабатывает при открытии панели.
  • opened — после полной анимации открытия.
  • close — при закрытии панели.
  • closed — после полной анимации закрытия.

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


  
Содержимое панели

Кастомизация футера

Drawer позволяет добавлять футер с кнопками, например, для действий “Сохранить” и “Отмена”:


  
Основной контент

Особенности футера:

  • Использование слота footer для кастомного контента.
  • Возможность размещать кнопки или формы для взаимодействия с пользователем.

Закрытие и overlay

Drawer поддерживает закрытие по клику на overlay или через крестик в заголовке:

  • :modal-append-to-body="true" — панель и overlay добавляются в тело документа, а не в родительский контейнер.
  • :close-on-press-escape="true" — закрытие по нажатию клавиши Escape.
  • :close-on-click-modal="true" — закрытие по клику на затемнённый фон.

Пример:


  
Контент Drawer

Ленивая загрузка контента

Drawer поддерживает ленивую загрузку, что полезно для тяжелых компонентов или форм:
  • destroy-on-close — удаляет содержимое при закрытии, экономя ресурсы.

Применение в сложных интерфейсах

Drawer часто используется для:

  • Форм редактирования данных без перезагрузки основной страницы.
  • Отображения дополнительной информации или фильтров.
  • Навигационных панелей в мобильной версии.

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

Оглавление