Адаптивность элементов управления

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

Карта 300x250

Карта 800x400

Состояния элементов управления

Элементы управления могут принимать одно из трех состояний: 'small', 'medium', 'large'. Для каждого состояния определено визуальное представление элемента управления:

Размер элементов управления

Информация о текущем размере элемента управления размещается в поле state, у которого есть свойство size. Ниже продемонстрировано, как можно определить текущий размер элемента управления.

myMap.controls.add('trafficControl');
// Определяем состояние элемента управления «Пробки».
var controlState = myMap.controls.get('trafficControl').state.get('size');

Управление размером элементов осуществляется менеджером control.Manager. При добавлении очередного элемента управления на карту или при изменении размеров карты менеджер проверяет размер элементов и при необходимости изменяет его. При этом менеджер изменяет размер у всех элементов управления, поддерживающих адаптивность.

Чтобы задать фиксированный размер элемента управления, следует задать для него опцию size. Если в качестве значения опции указать один из трех размеров ('small', 'medium', 'large'), то элемент управления всегда будет представлен в этом размере. Если указать значение 'auto', элемент будет автоматически изменять свой внешний вид в зависимости от размеров карты.

// Фиксируем состояние элемента управления «Пробки». 
// Теперь он всегда будет отображаться в большом размере.
myMap.controls.get('trafficControl').options.set('size', 'large');

Для каждого элемента управления также определена опция maxWidth — массив чисел, в котором каждому из состояний ставится в соответствие предельная ширина, при достижении которой элемент управления переключается в более компактный вид.

Адаптивность собственных элементов управления

Чтобы сделать собственные элементы управления адаптивными, можно использовать встроенные классы API — control.Button и control.ListBox. Макеты кнопки и выпадающего списка по умолчанию реализуют адаптивность. Если в элементах управления заданы текст и картинка, они будут изменять свой внешний вид следующим образом:

Ниже приведен пример создания собственной адаптивной кнопки с использованием класса control.Button.

var myButton = new ymaps.control.Button({
      data: {
        // Текст кнопки.
        content: "<b>Кнопка</b>",
        // Изображение иконки кнопки.
        image: 'my_button.png',
        // Текст всплывающей подсказки, которая появляется
        // при наведении на кнопку курсора мыши. 
        title: "Нажми меня"
      },
      options: {
        // Пусть кнопка будет менять ширину в зависимости от размера карты.
        // Зададим в опции maxWidth максимальную ширину кнопки
        // для трех ее состояний: 'small', 'medium' и 'large' соответственно.
        // Фактический размер кнопки будет вычисляться автоматически в зависимости
        // от размеров карты и длины текста, заданного в поле content.
        maxWidth: [28, 150, 178]
      }
    });
myMap.controls.add(myButton);

Открыть пример в песочнице

Обратите внимание, что опция maxWidth задает не фактическую ширину кнопки, а границы, в которые должен вмещаться текст кнопки для разных состояний (текст задается в поле content). Например, если для состояния 'small' текст не вмещается в указанную в опции maxWidth ширину, кнопка переключится в следующее состояние (если это позволяют размеры карты). Если текст не вместился в границы, заданные для состояния 'large', такой текст будет отображаться не полностью.

var myMap = new ymaps.Map('map', {
      center: [56, 34],
      zoom: 4,
      type: 'yandex#map',
      controls: []
    }),
    // Создадим кнопку
    myButton = new ymaps.control.Button({
      data: {
        // Текст кнопки.
        content: '<b>«Мой дядя самых честных правил, ' +
        'Когда не в шутку занемог</b>'		
      },
      options: {
	 size: 'large',
        // Ограничим размер кнопки
        // для каждого из состояний.
        maxWidth: [10, 20, 200]
      }
    });
myMap.controls.add(myButton);

Если для кнопки необходимо задать собственные правила изменения размеров, следует использовать фабрику templateLayoutFactory. Ниже рассмотрен пример, в котором кнопка меняет свой внешний вид в зависимости от того, нажата она или нет (по умолчанию кнопки изменяют внешний вид в зависимости от ширины карты).

var ButtonLayout = ymaps.templateLayoutFactory.createClass([
      '<div alt="{{ data.title }}" class="my-button ',
        '{% if state.size == "small" %}my-button_small{% endif %}',
        '{% if state.size == "medium" %}my-button_medium{% endif %}',
        '{% if state.size == "large" %}my-button_large{% endif %}',
        '{% if state.selected %} my-button_selected{% endif %}">',
        '<img class="my-button__img" src="{{ data.image }}" alt="{{ data.title }}">',
        '<span class="my-button__text">{{ data.content }}</span>',
      '</div>'
    ].join('')),

    button = new ymaps.control.Button({
      data: {
        content: "Жмак-жмак",
        image: 'examples/maps/ru/button_layout/_images/pen.gif',
        title: "Жмак-жмак-жмак"
      },
      options: {
        layout: ButtonLayout
      }
    });

myMap.controls.add(button, {
  float: "right"
});

Открыть пример в песочнице

Поддерживающие адаптивность элементы

Чтобы поддерживать адаптивность, элементы управления должны быть расположены слева или справа (опции float: 'left' или float: 'right'). Исключением является элемент «Ползунок масштаба», который адаптивен и при выставленной опции float: «none». Следующие элементы управления адаптивны:

• «Поиск по карте»;

• «Пробки»;

• «Переключатель слоев карты»;

• «Ползунок масштаба»;

  Примечание

  Элемент «Ползунок масштаба» изменяет свой внешний вид в зависимости от высоты карты.

• «Панель маршрутизации»;

• стандартная кнопка;

• выпадающий список.

Некоторые элементы управления всегда одного размера:

• «Линейка»
• «Геолокация»
• «Полноэкранный режим»

Примеры

В песочнице приведены примеры, демонстрирующие поведение адаптивных элементов управления.