YMapDrawerControl

Класс используется для создания и управления боковой панелью на карте.

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

Примечание

Данный класс является компонентом пакета @yandex/ymaps3-drawer-control и предоставляет дополнительную функциональность в JS API, которая не входит в основное API.

Для подключения пакета воспользуйтесь инструкцией.

Пример использования

const drawerControl = new YMapDrawerControl({
  position: 'left',
  width: 300,
  open: false,
  onOpenChange: (value: boolean) => {
    open = !value;
    drawerControl.update({open});
  },
  content: () => {
    const container = document.createElement('div');
      const title = document.createElement('h1');
      title.textContent = 'Заголовок';
      container.appendChild(title);
      return container;
  }
});

<YMapDrawerControl
  position="left"
  width={300}
  open={false}
  onOpenChange={(value: boolean) => {setOpen(!value)}}
  content={() => (
    <div className="drawer-content">
      <h1>Заголовок</h1>
    </div>
  )}
</YMapDrawerControl>

<YMapDrawerControl
  :position="left"
  :width="300"
  :open="false"
  :onOpenChange="(value) => {open.value = !value;}"
  <template #content>
     <div class="drawer-content">
         <h1>Заголовок</h1>
     </div>
  </template>
</YMapDrawerControl>

Подробный пример

Конструктор

new YMapDrawerControl(props: YMapDrawerControlProps)

Параметры конструктора

Параметр

Тип

Описание

props

YMapDrawerControl

Значение входных props.

Унаследовано от

YMapComplexEntity.constructor

Props

export type YMapDrawerContentProps = () => HTMLElement | YMapEntity<unknown>;
export interface YMapDrawerControlProps {
    /** Определяет расположение боковой панели. (Значение по умолчанию: "left"). */
    position: Position;
    /** Длительность анимации открытия/закрытия в миллисекундах. (Значение по умолчанию: 500). */
    transitionDuration?: number | YMapDrawerTransitionDurationProps;
    /** Флаг, указывающий, открыта ли панель. Также позволяет программно открывать/закрывать панель. Обязательный параметр. */
    open: boolean;
    /** Фиксированная ширина панели. Если не указано, панель подстраивается под ширину содержимого. */
    width?: string | number;
    /** Максимальная ширина панели. */
    maxWidth?: string | number;
    /** Минимальная ширина панели. */
    minWidth?: string | number;
    /** Фиксированная высота панели. Если не указано, панель настраивается в соответствии с высотой содержимого. */
    height?: string | number;
    /** Максимальная высота панели. */
    maxHeight?: string | number;
    /** Минимальная высота панели. */
    minHeight?: string | number;
    /** Обработчик изменения статуса открытия панели. */
    onOpenChange?: (open: boolean) => void;
    /** Вертикальное положение кнопки, открывающей панель. */
    verticalTriggerPosition?: VerticalTriggerPosition;
    /** Горизонтальное положение кнопки, открывающей панель. */
    horizontalTriggerPosition?: HorizontalTriggerPosition;
    /** Функция, которая возвращает содержимое панели в виде HTML-элемента или сущности YMapEntity. */
    content: YMapDrawerContentProps;
}

Параметры

Параметр

Тип

Значение по умолчанию

Описание

position

"left", "right", "top", "bottom"

Определяет расположение боковой панели.

transitionDuration

number, {open: number; close: number}

500

Длительность анимации открытия/закрытия в миллисекундах.

open

boolean

Флаг, указывающий, открыта ли панель.

width

string \| number

Фиксированная ширина панели. Если не указано, панель подстраивается под ширину содержимого.

maxWidth

string \| number

Максимальная ширина панели.

minWidth

string \| number

Минимальная ширина панели.

height

string \| number

Фиксированная высота панели. Если не указано, панель настраивается в соответствии с высотой содержимого.

maxHeight

string \| number

Максимальная высота панели.

minHeight

string \| number

Минимальная высота панели.

onOpenChange

(open: boolean) => void

Обработчик изменения статуса открытия панели.

verticalTriggerPosition

number

"center"

Вертикальное положение кнопки, открывающей панель.

horizontalTriggerPosition

number

"center"

Горизонтальное положение кнопки, открывающей панель.

content

`() => HTMLElement

YMapEntity`

Функция, которая возвращает содержимое панели в виде HTML-элемента или сущности YMapEntity.

Методы

_onAttach

_onAttach(): void

Возвращается

void

Переопределяет

YMapComplexEntity.__onAttach

_onUpdate

_onUpdate(propsDiff: Partial, oldProps: YMapDrawerControlProps): void

Возвращается

void

Переопределяет

YMapComplexEntity._onUpdate

_onDetach

_onDetach(): void

Возвращается

void

Переопределяет

YMapComplexEntity._onDetach

Предыдущая
YMapContextMenu
Следующая
YMapSignpost