离子范围和徽章重叠答案

【问题标题】：Ionic range & badge overlap离子范围和徽章重叠
【发布时间】：2016-05-14 21:23:25
【问题描述】：

Please refer to this image 我正在尝试离子框架。我看到传统的范围滑块是图标滑块图标。但是，我想要图标滑块徽章。徽章显示滑块的值。目前有重叠。谁知道怎么解决？

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

【问题讨论】：

试试css。 ionic 不提供所有可能的使用选项的类
@unisound，你调试的平台是什么？安卓还是ios？
我使用 git bash 然后 $ionic 服务。我没有尝试在手机上运行它。我用chrome来运行它。我可以选择模拟Iphone 6

标签： jquery css ionic-framework angular-ui-bootstrap

【解决方案1】：

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

这是一个更类似于图标的自定义徽章 CSS 类的示例：

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

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

.mybadge.badge-royal {
    background-color: #886aea;
    color: #fff;
}

.mybadge {
    background-color: transparent;
    color: #AAAAAA;
    z-index: 1;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    vertical-align: baseline;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 ;
    -moz-box-flex: 0;
    -moz-flex: 0;
    -ms-flex: 0;
    flex: 0;
    display: block;
    min-width: 24px;
}

<html ng-app="ionicApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Badges</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Badges</h1>
  </ion-header-bar>

  <ion-content>

    <div class="list">

      <div class="item item-divider">
        Original Ionic badge
      </div>

      <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">
        <span class="badge badge-royal">5</span>
      </div>

      <div class="item range range-positive">
        <i class="icon ion-ios-sunny-outline"></i>
        <input type="range" name="volume" min="0" max="100" value="33">
        <i class="icon ion-ios-sunny"></i>
      </div>

      <a class="item item-icon-left" href="#">
        <i class="icon ion-person-stalker"></i> Friends
        <span class="badge badge-assertive">0</span>
      </a>
      
      <div class="item item-divider">
        Custom badge for slider
      </div>
      
      <div class="item range range-positive">
        <i class="icon ion-ios-timer"></i>
        <input type="range" name="volume" min="0" max="10" ng-model="count">
        <i class="mybadge badge-royal">{{count}}</i>
      </div>

    </div>

  </ion-content>

</body>

</html>

【讨论】：