Добавление изображения к каждой кнопке Радио в группе кнопок радио

Я хочу реализовать группу кнопок Radio Button, в которой каждая радио-кнопка будет иметь рядом с ней картинку (в левой части переключателя).

Это возможно? Если да, то как?

HTML:

<div class="form-group" show-errors>
    <label class="col-md-2 control-label metric-light-16-black pay-form-label">Payment Method</label>
    <div class="col-md-10" id="rdPaymentMethod">
        <label class="radio-group col-md-2">
            <span id="radio-group-1" style="margin-left: 0cm;"></span>
            <span class="radio" style="margin-left: 0cm;" />
            <img src="assets/images/card-mastercard.png" style="margin-left: 0cm;"/>

        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-2" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-viza.png"/>
        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-3" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-paypal.png"/>
        </label>
    </div>
</div>

Функция javascript sap:

var placeRadioButtonAt = function(radioButtonId, containingDivId, selected) {
    elements.push(radioButtonId);
    var oRB1 = new sap.ui.commons.RadioButton(radioButtonId, {
        selected : (selected==true),
        select : function() {}
    });

    oRB1.placeAt(containingDivId);
}

вызов этой функции 3 раза (для каждого переключателя):

    placeRadioButtonAt("radio1","radio-group-1",true);
    placeRadioButtonAt("radio2","radio-group-2");
    placeRadioButtonAt("radio3","radio-group-3");

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

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

OBS: отсутствует рендеринг классов CSS, более подробная информация о реализации средства визуализации может быть найдена здесь. p >

Предположения

  • Пространство имен было определено как my.app внутри файла index.html
  • В папке проекта (webapp или WebContents) вы создали папку для этих настраиваемых элементов управления под названием controls

Расширение RadioButton

sap.ui.define(['jquery.sap.global', 'sap/m/Image', 'sap/m/RadioButton'

], function (jQuery, Image, RadioButton) {
    "use strict";

    var CustomRadioButton = RadioButton.extend("my.app.controls.RadioButtonImage", {
        metadata: {
            "properties": {
                "imageSrc": "string"
            },
        },
        renderer: function (oRm, oControl) {
            var oImg = new Image({ src: oControl.getProperty("imageSrc") })
            oRm.renderControl(oImg);
            sap.m.RadioButtonRenderer.render(oRm,oControl);
        }
    });

    return CustomRadioButton;
}, true);

Расширение RadioButtonGroup

sap.ui.define(['jquery.sap.global', 'sap/m/RadioButtonGroup'

], function (jQuery, RadioButtonGroup) {
    "use strict";

    var CustomRadioButtonGroup = RadioButtonGroup.extend("my.app.controls.RadioButtonGroup", {
        metadata: {
            aggregations: {
                buttons : {type : "my.app.controls.RadioButtonImage", multiple : true, singularName : "button", bindable : "bindable"}
            },
            defaultAggregation : "buttons",
        }
    });

    return CustomRadioButtonGroup;
}, true);