--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button.md - https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v2-1/doc/ru/llms.txt # control.Button Расширяет [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ICustomizable.md), [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md). Элемент управления "Кнопка". Стандартный макет кнопки изменяет свой внешний вид в зависимости от размеров карты. Если карта имеет большую ширину, то кнопка принимает вид "картинка + текст". Если карта среднего размера, кнопка принимает вид "текст". Если карта небольшого размера, то в макете кнопки отображается только иконка. Если для кнопки не задана иконка, то во всех состояниях будет отображаться текст и наоборот. [Конструктор](#constructor-summary) | [Поля ](#properties-summary) | [События ](#events-summary) | [Методы ](#methods-summary) ## Конструктор {#constructor-summary} ```javascript control.Button([parameters]) ``` **Параметры:** #| || **Параметр** | **Значение по умолчанию** | **Описание** || || [`parameters`](#param-parameters) | — | Тип: Object\|String Параметры кнопки или строка - содержимое кнопки в виде HTML. || || [`parameters.data`](#param-parameters.data) | — | Тип: Object Данные кнопки. || || [`parameters.data.content`](#param-parameters.data.content) | — | Тип: String Содержимое кнопки в виде HTML. || || [`parameters.data.image`](#param-parameters.data.image) | — | Тип: String URL иконки кнопки. Стандартный макет кнопки рассчитан на иконку размером 16x16 пикселей. || || [`parameters.data.title`](#param-parameters.data.title) | — | Тип: String Текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. || || [`parameters.options`](#param-parameters.options) | — | Тип: Object Опции кнопки. || || [`parameters.options.adjustMapMargin`](#param-parameters.options.adjustMapMargin) | false | Тип: Boolean Регистрирует ли кнопка свои размеры в менеджере отступов карты [map.margin.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/map.margin.Manager.md). || || [`parameters.options.float`](#param-parameters.options.float) | "right" | Тип: String Сторона, по которой нужно выравнивать элемент управления. Может принимать три значения: "left", "right" или "none". При значении "left" или "right" элементы управления выстраиваются друг за другом, начиная от левого или правого края карты соответственно. При значении "none" элементы управления позиционируется только по значениям опций left, right, bottom, top относительно границ карты. Также смотрите описание опции position. || || [`parameters.options.floatIndex`](#param-parameters.options.floatIndex) | 0 | Тип: Number Приоритет расположения элемента управления. Элемент с максимальным приоритетом находится ближе к указанному в свойстве float краю карты. Не работает при float = "none". || || [`parameters.options.layout`](#param-parameters.options.layout) | — | Тип: [ISelectableControlLayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControlLayout.md)\|String Конструктор макета элемента управления, реализующий интерфейс [ISelectableControlLayout](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControlLayout.md) или ключ макета в хранилище [layout.storage](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/layout.storage.md). В конструктор макета передается объект, содержащий поля: - control - ссылка на элемент управления; - options - менеджер опций элемента управления control.Button.options; - data - менеджер данных элемента управления [control.Button.data](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#data); - state - менеджер состояния элемента управления [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#state). Макет меняет свой внешний вид на основе данных, состояния и опций элемента управления. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#state) в зависимости от полученных команд. || || [`parameters.options.maxWidth`](#param-parameters.options.maxWidth) | 90 | Тип: Number\|Number[] Максимальная ширина кнопки в различных состояниях. Если задано число, то считается, что кнопка имеет одинаковые максимальные размеры во всех состояниях. Если задан массив, то он будет трактоваться как максимальная ширина кнопки в различных состояниях - от меньшего к большему. Количество доступных состояний задается в экземпляре класса [control.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Manager.md) через опцию states. Этот класс обычно является полем [Map.controls](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#controls). По умолчанию у элементов управления есть три состояния - ['small', 'medium', 'large']. || || [`parameters.options.position`](#param-parameters.options.position) | — | Тип: Object Объект, описывающий позицию элемента управления. При указании опции position значение опции float автоматически трактуется как "none". || || [`parameters.options.position.bottom`](#param-parameters.options.position.bottom) | 'auto' | Тип: Number\|String Положение относительно нижнего края карты. || || [`parameters.options.position.left`](#param-parameters.options.position.left) | 'auto' | Тип: Number\|String Положение относительно левого края карты. || || [`parameters.options.position.right`](#param-parameters.options.position.right) | 'auto' | Тип: Number\|String Положение относительно правого края карты. || || [`parameters.options.position.top`](#param-parameters.options.position.top) | 'auto' | Тип: Number\|String Положение относительно верхнего края карты. || || [`parameters.options.selectOnClick`](#param-parameters.options.selectOnClick) | true | Тип: Boolean Опция, описывающая поведение кнопки. - true — кнопка становится "нажатой" после клика, то есть меняется ее внешний вид и значение поля [control.Button.state](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#state) устанавливается в 'selected'; - false - кнопка не меняет свой внешний вид и состояние после клика на нее. || || [`parameters.options.size`](#param-parameters.options.size) | 'auto' | Тип: String Параметр, отвечающий за внешний вид стандартного макета кнопки. Может принимать значения: - 'auto' - стандартный макет кнопки автоматически изменяет свой внешний вид в зависимости от размеров карты и от количества добавленных элементов управления; - 'small' - в макете кнопки отображается иконка, независимо от размера карты; - 'medium' - в макете кнопки отображается только текст, независимо от размера карты; - 'large' - в макете кнопки всегда отображается иконка и текст, независимо от размера карты. || || [`parameters.options.visible`](#param-parameters.options.visible) | true | Тип: Boolean Признак того, что элемент управления отображается. || || [`parameters.state`](#param-parameters.state) | — | Тип: Object Объект, описывающий состояние кнопки. || || [`parameters.state.enabled`](#param-parameters.state.enabled) | true | Тип: Boolean Признак, активна ли кнопка. || || [`parameters.state.selected`](#param-parameters.state.selected) | false | Тип: Boolean Признак, нажата ли кнопка. || |# **Примеры:** **1.** ```javascript // Пример 1. // Создадим кнопку и добавим ее на карту. var button = new ymaps.control.Button({ data: { // Зададим иконку для кнопки. image: 'images/button.jpg', // Текст на кнопке. content: 'Save', // Текст всплывающей подсказки. title: 'Click to save the route' }, options: { // Зададим опции кнопки. selectOnClick: false, // У кнопки будет три состояния: иконка, текст и текст + иконка. // Зададим три значения ширины кнопки для всех состояний. maxWidth: [30, 100, 150] } }); map.controls.add(button, { float: 'right', floatIndex: 100 }); ``` **2.** ```javascript // Пример 2 // Создание кнопки с пользовательским макетом. var button = new ymaps.control.Button({ data: { content: 'Red button', title: 'Press the button' }, options: { layout: ymaps.templateLayoutFactory.createClass( // Если кнопка не нажата, применяется CSS стиль 'myButton'. // Если кнопка нажата, к ней применятся CSS-стили 'myButton' и 'myButtonSelected'. "
" + "{{ data.content }}" + "
" ), // Чтобы другие элементы управления корректно позиционировались по горизонтали, // нужно обязательно задать максимальную ширину для макета. maxWidth: 150 }}); map.controls.add(button, { float: 'left', floatIndex: 0 }); // Можно задать позиционирование относительно краев карты. В этом случае // значение опции maxWidth не влияет на позиционирование // элементов управления. map.controls.add(button, { float: 'none', position: {left: '5px', top: '5px'} }); ``` ## Поля {#properties-summary} #| || **Имя** | **Тип** | **Описание** || || [data](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#data) | [data.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/data.Manager.md) | Данные кнопки. Имена полей, доступных через метод data.Manager.get: - image - иконка кнопки, если есть; - content - cодержимое кнопки в виде HTML; - title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. || || [events](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IEventManager.md) | Менеджер событий. Унаследовано от [IEventEmitter](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IEventEmitter.md#events). || || [options](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#options) | [IOptionManager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IOptionManager.md) | Менеджер опций. Унаследовано от [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#options). || || [press](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#press) | | Событие, сигнализирующее о том, что кнопка была нажата. В отличии от click генерируется только если состояние isEnabled == true. Экземпляр класса Event. || || [state](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#state) | [data.Manager](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/data.Manager.md) | Состояние кнопки. Имена полей, доступных через метод data.Manager.get: - selected - признак, нажата ли кнопка; - enabled - признак, активна ли кнопка. - size - размер, который в данный момент выставлен кнопке; || |# ## События {#events-summary} #| || **Имя** | **Описание** || || [click](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#event-click) | Нажатие на кнопку. Экземпляр класса [Event](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Event.md). || || [deselect](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-deselect) | Элемент управления не выбран. Унаследовано от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-deselect). || || [disable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-disable) | Элемент управления стал недоступным. Унаследовано от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-disable). || || [enable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-enable) | Элемент управления стал доступным. Унаследовано от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-enable). || || [optionschange](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ICustomizable.md#event-optionschange) | Изменение в опциях объекта. Унаследовано от [ICustomizable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ICustomizable.md#event-optionschange). || || [parentchange](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IChild.md#event-parentchange) | Сменился родительский объект. Поля данных: - oldParent - старый родитель; - newParent - новый родитель. Унаследовано от [IChild](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IChild.md#event-parentchange). || || [select](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-select) | Элемент управления выбран. Унаследовано от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-select). || |# ## Методы {#methods-summary} #| || **Имя** | **Возвращает** | **Описание** || || [deselect](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#deselect)() | | Отменяет выбор элемента управления (выключает). Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#deselect). || || [disable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#disable)() | | Делает элемент управления недоступным (запрещены пользовательские действия). Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#disable). || || [enable](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#enable)() | | Делает элемент управления доступным (разрешены пользовательские действия). Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#enable). || || [getMap](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#getMap)() | [Map](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md) | Возвращает ссылку на карту. || || [getParent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControlParent.md)\|null | Возвращает ссылку на родительский объект или null, если родительский элемент не был установлен. Унаследован от [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#getParent). || || [isEnabled](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#isEnabled)() | Boolean | Возвращает true - элемент управления доступен, false - недоступен. Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#isEnabled). || || [isSelected](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#isSelected)() | Boolean | Возвращает true - элемент управления выбран, false - не выбран. Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#isSelected). || || [select](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#select)() | | Выбирает (включает) элемент управления. Унаследован от [ISelectableControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#select). || || [setParent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IChildOnMap.md) | Устанавливает родительский объект. Если передать значение null, то элемент управления будет только удален из текущего родительского объекта. Унаследован от [IControl](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IControl.md#setParent). || |# ## Описание полей {#field_detail} ### data {#data} ```javascript {data.Manager} data ``` Данные кнопки. Имена полей, доступных через метод data.Manager.get: - image - иконка кнопки, если есть; - content - cодержимое кнопки в виде HTML; - title - текст всплывающей подсказки, которая появляется при наведении на кнопку курсора мыши. ### press {#press} ```javascript press ``` Событие, сигнализирующее о том, что кнопка была нажата. В отличии от click генерируется только если состояние isEnabled == true. Экземпляр класса Event. ### state {#state} ```javascript {data.Manager} state ``` Состояние кнопки. Имена полей, доступных через метод data.Manager.get: - selected - признак, нажата ли кнопка; - enabled - признак, активна ли кнопка. - size - размер, который в данный момент выставлен кнопке; **Пример:** ```javascript var button = new ymaps.control.Button('Редактировать'); // Зададим состояние кнопки "нажата" - // аналогично вызову метода button.select(); button.state.set('selected', true); ``` ## Описание событий {#event_detail} ### click {#click} Нажатие на кнопку. Экземпляр класса [Event](https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Event.md). ## Описание методов {#method_detail} ### getMap {#getMap} ```javascript {Map} getMap() ``` **Возвращает** ссылку на карту.