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

  1. Состояния элементов управления
  2. Размер элементов управления
  3. Адаптивность собственных элементов управления
  4. Поддерживающие адаптивность элементы
  5. Примеры

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

Карта 300x250

Карта 800x400

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

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

'small'

Показывается только иконка элемента управления.

'medium'

Показывается только подпись. Для элементов управления «Ползунок масштаба» и «Пробки» состояния '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. Макеты кнопки и выпадающего списка по умолчанию реализуют адаптивность. Если в элементах управления заданы текст и картинка, они будут изменять свой внешний вид следующим образом:

Кнопка Выпадающий список

'small'

'small'

'medium'

'medium'

'large'

'large'

Ниже приведен пример создания собственной адаптивной кнопки с использованием класса 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 задать одно число (например, maxWidth: 100), то это значение будет применяться ко всем трем состояниям кнопки, то есть кнопка не будет адаптивной. Если опция maxWidth не задана, то по умолчанию для всех состояний кнопки будет использоваться значение '90'.

Обратите внимание, что опция 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». Следующие элементы управления адаптивны:

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

Примеры

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