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

Question

如何使滑块更宽？我在切换滑块“Graph”或“Table”中有文本。我怎样才能扩展它。

下面是相关的元素：

<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> 

注意：确保这种风格标签而来的afui后。 css加载到你的index.html文件中。