---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/adaptive.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt

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

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

**Карта 300x250**

![](../../_images/controls_small.png)

**Карта 800x400**

![](../../_images/controls_large.png)

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

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

#|
|| **Состояние** | **Описание** ||
|| 'small'

![](../../_images/typeSelector_small.png) |


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

![](../../_images/typeSelector_medium.png) |
 
Показывается только подпись. Для элементов управления «Ползунок масштаба» и «Пробки» состояния 'small' и 'medium' совпадают. ||
|| 'large'

![](../../_images/typeSelector_large.png) |

Показывается и подпись и иконка. ||
|#

{% note info %}

Элемент управления масштабом изменяет свой внешний вид следующим образом. При маленьких размерах карты элемент представляется в виде двух кнопок; при больших размерах карты помимо кнопок отображается также ползунок масштабирования.

{% endnote %}

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

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

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

Управление размером элементов осуществляется менеджером [control.Manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Manager.md). При добавлении очередного элемента управления на карту или при изменении размеров карты менеджер проверяет размер элементов и при необходимости изменяет его. При этом менеджер изменяет размер у всех элементов управления, поддерживающих адаптивность.

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

<!--<p><note>При заданном значении опции <codeph>size</codeph> изменение поля состояния <codeph>state.size</codeph> не будет влиять на внешний вид элемента управления, так как опция объекта имеет больший приоритет, чем его состояние.</note></p>-->

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

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

## Адаптивность собственных элементов управления {#adaptive-user-control}

Чтобы сделать собственные элементы управления адаптивными, можно использовать встроенные классы API — [control.Button](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md) и [control.ListBox](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.ListBox.md). Макеты кнопки и выпадающего списка по умолчанию реализуют адаптивность. Если в элементах управления заданы текст и картинка, они будут изменять свой внешний вид следующим образом:

#|
|| **Кнопка** | **Выпадающий список** ||
|| 'small'

![](../../_images/custom_button_small.png) |

'small'

![](../../_images/custom_listbox_small.png) ||
|| 'medium'

![](../../_images/custom_button_medium.png) |

'medium'

![](../../_images/custom_listbox_medium.png) ||

|| 'large'

![](../../_images/custom_button_large.png) |

'large'

![](../../_images/custom_listbox_large.png) ||
|#


Ниже приведен пример создания собственной адаптивной кнопки с использованием класса [control.Button](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md).

```javascript
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);
```

[Открыть пример в песочнице](https://tech.yandex.ru/maps/jsbox/2.1/button)

{% note info %}

Если в опции `maxWidth` задать одно число (например, `maxWidth: 100`), то это значение будет применяться ко всем трем состояниям кнопки, то есть кнопка не будет адаптивной. Если опция `maxWidth` не задана, то по умолчанию для всех состояний кнопки будет использоваться значение '90'.

{% endnote %}

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


#|
||

```javascript
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);
```

| ![](../../_images/maxwidth-controls.png) ||
|#


Если для кнопки необходимо задать собственные правила изменения размеров, следует использовать фабрику [templateLayoutFactory](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/templateLayoutFactory.md). Ниже рассмотрен [пример](http://api.yandex.ru/maps/jsbox/2.1/button_layout), в котором кнопка меняет свой внешний вид в зависимости от того, нажата она или нет (по умолчанию кнопки изменяют внешний вид в зависимости от ширины карты).

```javascript
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"
});
```

[Открыть пример в песочнице](https://tech.yandex.ru/maps/jsbox/2.1/custom_control)

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

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

- [«Поиск по карте»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#search-on-map);
- [«Пробки»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#traffic);
- [«Переключатель слоев карты»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#layer-change);
- [«Ползунок масштаба»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#scale);
    
    {% note info %}
    
    Элемент «Ползунок масштаба» изменяет свой внешний вид в зависимости от высоты карты.
    
    {% endnote %}
    
- [«Панель маршрутизации»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#route-button);
- [стандартная кнопка](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#standard-button);
- [выпадающий список](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#component).

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

- [«Линейка»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#ruler)
- [«Геолокация»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#geolocation)
- [«Полноэкранный режим»](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md#fullscreen)

## Примеры {#example}

В [песочнице](https://tech.yandex.ru/maps/jsbox/2.1/button) приведены примеры, демонстрирующие поведение адаптивных элементов управления.