离子2范围内标签

我期待一些标签添加到离子2范围元素（该文件可在http://ionicframework.com/docs/v2/api/components/range/Range/找到）离子2范围内标签

您可以在开头和结尾使用下面的标记添加标签

<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary"> 
     <!-- Setting the labels here -->  
     <ion-label range-left>-200</ion-label> 
     <ion-label range-right>200</ion-label> 
    </ion-range>

不过，我想如果可能的话在整个范围内添加一些标签，一边企图使它看起来更像是一个进度条。所以你可能有25％，50％等标签。

什么将是一种很好的方法来解决这个问题，而不会干扰太多Ionic HTML？

我的方法到目前为止只是在范围上方创建一个离子行，然后使用css来放置它。

HTML

<!-- TIMELINE --> 
    <div class='timeline'> 
     <ion-grid class="timeline-grid"> 

     <ion-row class="timeline-labels"> 
      <ion-col width-20>Label One</ion-col> 
      <ion-col width-20>Label Two</ion-col> 
      <ion-col width-20>Label Three</ion-col> 
      <ion-col width-20>Label Four</ion-col> 
      <ion-col width-20>Label Five</ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col> 
      <ion-item> 
       <ion-range color='secondary' [(ngModel)]="progress"> 
       </ion-range> 
      </ion-item> 
      </ion-col> 
     </ion-row> 

     </ion-grid> 
    </div>

CSS

ion-row.timeline-labels { 
    padding-left: 20px; 
    z-index: 1; 
    position: absolute; 
    top: 10px; 
    }

这确实在某种程度上工作，但是我想有可能是一个更好/更清洁的方式去了解它。

任何建议将是伟大的。

谢谢！

来源

2017-02-20 user2085143

问题与此相似吗？ http://stackoverflow.com/a/41246195/7274840 –

不会设置引脚=“真”（在范围滑块标签）基本上做你想要的？它会像进度条一样显示滑块的当前值。

如果您希望在特定点的底部获得更多指定标签，我认为最好的方法是在范围滑块下方直接添加跨度的div，然后用CSS玩具直到其足够接近你想要什么。

主要的css问题将删除Range元素周围的填充或空白空间，然后在正确的位置获取“进度”的字体大小和间距。

例如。

<ion-range min="0" max="100" pin="true"> 
     <!-- Setting the labels here -->  
     <ion-label range-left>0</ion-label> 
     <ion-label range-right>100</ion-label> 
    </ion-range> 
    <div> 
     <span>20%<span> 
     <span>40%<span> 
     <span>80%<span> 
     <span>100%<span> 
    </div>

来源

2017-10-08 20:49:28 AhrenFullStop

离子2范围内标签

回答

相关问题