带标签的 Ionic 2 范围答案

【问题标题】：Ionic 2 Range With Labels带标签的 Ionic 2 范围
【发布时间】：2017-07-09 16:04:23
【问题描述】：

我希望为 Ionic 2 范围元素添加一些标签（可在 http://ionicframework.com/docs/v2/api/components/range/Range/ 找到相关文档）

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

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

这在某种程度上确实有效，但我认为可能有更好/更清洁的方法来解决它。

任何建议都会很棒。

谢谢！

【问题讨论】：

你的问题和这个类似吗？ stackoverflow.com/a/41246195/7274840

标签： html css angular ionic2

【解决方案1】：

不会设置 pin="true" （在范围滑块标签中）基本上做你想要的吗？它会像进度条一样显示滑块的当前值。

如果您希望在底部的特定点获得更多指定标签，我认为最好的方法是在范围滑块正下方添加一个具有跨度的 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>

【讨论】：

【解决方案2】：

这可能为时已晚，但对于其他展望未来的人来说，我将我的标签放在下面标签内的 span 内，并使用 css 来设置填充和宽度的样式。

这是我的 HTML：

<div class="slide-rating">
<ion-range min="1" max="4" step="1" snaps="true" ticks="false" ></ion- 
range>
<ion-label class="rating-labels">
<span> Beginner </span>
<span> Casual </span>
<span> Advanced </span>
<span> Expert </span>
</ion-label>
</div>

还有我的 CSS：

span{
color: #354D37;
font-family: Gotham-Book;
font-size: small;
padding-left: 12px;
}

.slide-rating{
align-items: center;
width: 80%;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}

.rating-labels{
margin-left: -5%;
margin-right: -5%;
text-align: center;
}

【讨论】：