离子范围＆a​​mp;徽章重叠

Question

Please refer to this image   我正在尝试离子框架。我看到传统的范围滑块是icon-slider-icon。但是，我想要icon-slider-badge。徽章显示滑块的值。目前有重叠。任何人都知道如何解决它？

<div class="item range range-{{selection.secondary}}">
          <i class="icon ion-ios-timer"></i>
          <input type="range" name="volume" min="0" max="10" ng-model="count">
          <i class="badge badge-royal">5</i>
</div>

Answer 1

您观察到的是Ionic中徽章的正常行为：它们与组件重叠。

以下是自定义徽章CSS类的示例，它更类似于图标：

＆＃13;

＆＃13;

RelativeLayout

＆＃13;

ListView

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  $scope.count=5;
});

＆＃13;

＆＃13;

＆＃13;