首页 文章

如何将glyphicon放入bootstrap徽章

提问于
浏览 次
2

我一直在慢慢构建一种使用bootstrap徽章和AngularJS显示分层数据的方法 . 我试图让人们浏览类别，找到他们正在寻找的任何类别 .

有3种通用类型：

父级 - 顶级类别

父母和子女 - 具有各自子类别的子类别

子级 - 没有子类别的底层子级别

到目前为止，在Stackoverflowers的帮助下，我有一个非常好看的版本工作，你可以在这里看到：

http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

这是相关的HTML代码：

<ul id="categoriesUnorderedList">
  <li ng-repeat="category in categories"
      ng-show="category.category_show"
      class="badge-slider">
    <span ng-click="categoryClicked(category)"
          class="badge {{ getBadgeClassName(category.category_type) }}"
          ng-style="getIndent(category)"> {{category.category_name}}
    </span>
  </li>
</ul>

目前我正在使用不同的CSS类来显示具有不同颜色徽章的每种类型 . 例如，下面是用于父徽章的CSS：

.badge-p {
    background-color:#005DB3;
  color:#f8f8f8;
  cursor: default;
  margin-left: 0px;
}

.badge-p:hover {
    background-color:#116ec4;
    color:#fff;
}

现在我想让所有这些更加优雅 .

计划是在“父级”和“父级和子级”类别的徽章左侧添加glyphicon加号，表示此类别的子类别尚未打开 .

单击类别并显示子类别时，此glyphicon将更改为glyphicon-minus-sign . 当再次单击打开的类别并关闭时，它会更改回glyphicon加号 .

这样，所有类别都将以相同的颜色显示，使眼睛更容易，当然，使整个事情对用户更直观 .

做这个的最好方式是什么？此外，是否有一种通用的非glyphicon方式来做到这一点 - 我可能想要尝试这些符号的其他图标，以防万一字形看起来不是最好的....

EDIT 1: 我've put together a fully working version using the help of ABr'的答案，HTML略有不同 - 将字形放置在徽章范围内的范围内 . 这有助于保持文本在徽章中的正确定位和大小，而无需任何额外的CSS . 已经为所有类别实现了该功能....这是plnkr：http://plnkr.co/edit/19ihMtyJsQwcuLxKhgQh

css angularjs twitter-bootstrap

1 回答

  • 0

    最简单的方法是在类别数据中添加一个单独的状态（我使用category.expand） . 然后，您可以使用ng-class切换正确的类 .

    添加一个单独的（用于更轻松地对齐字形）span与ng-class： ng-class={{expandGlyphs}}

    然后在您的范围中定义expandGlyphs，如下所示：

    $scope.expandGlyphs = "{
    'glyphicon glyphicon-plus-sign': !category.category_expand && (category.category_type == 'parent' || category.category_type == 'parent and child'), 
    'glyphicon glyphicon-minus-sign': category.category_expand && (category.category_type == 'parent' || category.category_type == 'parent and child')
}"

    要将glyphicons与文本对齐，请将以下内容添加到css中：

    /*Center Glyph*/
.glyphicon:before {
  vertical-align: text-bottom;
}

    我为水果类别做了一个例子 - Plnkr

    注1：由于您已经对所有内容进行了硬编码（我建议您稍微重写一下代码），因此您可以对其他类别执行相同的操作 .

    如果你想拥有自定义项，你可以考虑添加单独的css类并在ng-class中分配它们而不是glyphicons . 例如 .

    .plus-sign:before {
  content: "+";
  font-weight: bold;
  color: red;
}
.minus-sign:before {
  content: "-";
  font-weight: bold;
  color: green;
}
    回复于

相关问题