intel-xdk - 英特尔 XDK 应用程序框架滑块长度

Question

如何使滑块更宽？我在切换滑块“图表”或“表格”中有文本，它被切断了。我该如何扩展它。

这是相关的元素：

<div class="wide-control">
    <input type="checkbox" class="toggle" id="ModeSwitch">
<label for="ModeSwitch" data-off="Graph" data-on="Table"><span></span>
    </label>

Answer 1

我认为没有一种简单的方法可以更改英特尔 XDK UI 中的宽度。据我所知，这是一个用于此小部件的集合。您可以在下面您自己的 index.html 文件中覆盖 css 样式（我为每个宽度添加了 100，但您可以根据需要进行调整）：

<style type="text/css">
        #afui input.toggle+label {width: 165px;}
        #afui input.toggle:checked+label>span {
            transform: translate3d(137px,0,0);
            -webkit-transform: translate3d(137px,0,0);
        }
</style>

注意：确保此样式标记位于 index.html 文件中加载的 afui.css 之后。