【问题标题】:Changing the color of the stars and display half star rating using AngularUI Star Rating使用 AngularUI Star Rating 更改星星的颜色并显示半星评级
【发布时间】:2014-05-14 04:15:15
【问题描述】:

我正在使用 Angular UI 星级评分,但我想执行以下 2 项。非常感谢任何帮助!

  1. 我想将所选星的颜色(“stateOn: glyphicon-star”)更改为黄色。有没有办法做到这一点?
  2. 我也想显示半星。例如,我想显示 3 1/2 颗星。你能告诉我怎么做吗?

这是 AngularUI 中星级评分的评分标签:

<rating value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" </rating>

【问题讨论】:

    标签: angularjs css angular-ui-bootstrap


    【解决方案1】:

    Half stars 将对逻辑和可能的 CSS 进行一些更改(我想如果它在绘制了它应该为 floored 值的星数后有余数,然后在一个宽度为一半的容器中绘制一个星,然后没有溢出,或者只是制作一个半星图标)。您可以简单地在自己的 CSS 中覆盖的颜色,例如

    .glyphicon-star, .glyphicon-star-empty {
      color:yellow;
    }
    

    【讨论】:

    • 谢谢。我希望有一个更具体的答案。在重新阅读您的答案几次之后,我想我知道该怎么做才能获得 1/2 星评级。我能够像你说的那样使用 css 类来改变星星的颜色。
    • SO 不是让别人为你工作的地方。当你完成一些工作时,这是一个寻求帮助的地方。鉴于没有提供任何可用于工作的代码,我给出了最好的答案来让您继续前进,感谢您的接受。将来请提供一个 plunkr 显示您正在做什么,您将获得更多帮助。
    • 只是为了完成孔的东西,如果你想改变一些大小,你可以添加 font-size: 30px;也是。 :) 事实上很好的答案!
    【解决方案2】:
    .glyphicon-star : before, .glyphicon-star-empty: before{
      color:yellow;
    }
    

    这也会导致同样的结果

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-31
      • 2021-06-22
      • 2021-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多