離子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範圍內標籤

回答

相關問題