Макет кнопки

Open in CodeSandbox

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текcтовые шаблоны.

В данном примере создается пользовательский макет кнопки. Макет элемента управления строится на основе его данных, состояния и опций.

Макет автоматически перестраивается при изменении значений полей, состояния или опций, которые используются в его текстовом шаблоне. 

<!DOCTYPE html>

<html>
    <head>
        <title>Примеры. Пользовательский макет кнопки.</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <style>
            .my-button {
                display: inline-block;
                padding: 4px 14px;
                margin-bottom: 0;
                font-size: 14px;
                line-height: 20px;
                color: #333333;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                background-color: #f5f5f5;
                border: 1px solid #bbbbbb;
                border-color: #e6e6e6 #e6e6e6 #bfbfbf;
                font-family: Arial;
            }

            .my-button-selected {
                color: #333333;
                background-color: #e6e6e6;
                border: 2px dashed #333;
            }
        </style>

        <script src="button_layout.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.650625, 37.62708],
            zoom: 10,
        }),
        // Макет кнопки должен отображать поле data.content
        // и изменяться в зависимости от того, нажата кнопка или нет.
        ButtonLayout = ymaps.templateLayoutFactory.createClass(
            "<div class='my-button [if state.selected]my-button-selected[endif]'>" +
                "$[data.content]" +
                "</div>"
        ),
        button = new ymaps.control.Button(
            {
                data: {
                    content: "Жмак-жмак",
                },
            },
            {
                layout: ButtonLayout,
            }
        );

    myMap.controls.add(button, {
        right: 5,
        top: 5,
    });
}