css - SAPUI5 如何实现阈值 slider (如在 WebDynpro 中)

Question

我目前面临的挑战是在 SAPUI5 中实现一个与 Webdynpro 的 Threshold-Slider 完全一样的 Slider，如下所示。

你会怎么做？它是高度动态的，比例(可以是 5 个值，可以是 3 个值等)，描述取决于比例值......

目前我只找到Slider在 API 中，但我怀疑这是否可以实现……有什么想法吗？

---

18.06.2015:目前我正在努力扩展 sap.ui.commons.Slider，我现在得到的与我试图实现的目标相去甚远:

• 点击 slider 时，通过渲染器改变背景颜色(每个值应该有另一种颜色
• 右侧的文本框和左侧的链接(可选部分，颜色更重要)

我得到了什么......

sap.ui.commons.Slider.extend("my.Slider", {
    renderer : {
        renderInnerAttributes : function(oRm, oControl) {
            console.log(oRm); // try to find out, what I re-style
            console.log(oControl); // try to find out, what I re-style
            oRm.addStyle('background-color', '#ffff00');  // no effect

        },
    }
});

var oSlider6 = new my.Slider({
    id : 'Slider6',
    tooltip : 'Slider6',
    width : '500px',
    min : 1,
    max : 4,
    value : 0,
    totalUnits : 4,
    smallStepWidth : 1,
    stepLabels : true,
    labels : [
        "Bad", "Medium", "Good", "Very Good"
    ]
});

return oSlider6;

Answer 1

我认为实现此目的最简单的方法是复制 sap.m.Slider 并对其进行修改，或者使用 UI5 扩展机制从 sap.m.Slider 继承并过度设计。或者您可以扩展 sap.m.ProgressIndicator 并使其具有交互性，但这样会多一些工作。

所有基本功能都已存在于 slider 中(比例、值的数量……)，您可以轻松修改 handle 的背景颜色和样式。可以添加文本值链接，并在其旁边添加标签控件。

有关如何使用 UI5 的扩展机制的更多详细信息，请查看有关自定义控件的 youtube 视频: https://www.youtube.com/watch?v=4KPS2-LHoO0

希望对你有帮助，

迈克尔