在刀片中使用星星显示评级的方法.拉拉维尔

Question

我有一个问题。我正在尝试在网络中显示评级。这就是我正在考虑实施的方式。我认为它太长了。

@if ($nr>=1 && $nr<=1)
{
<div class="rating">
      <span><i class="fa fa-star"></i></span>
      <span><i class="fa fa-star-o"></i></span>
      <span><i class="fa fa-star-0"></i></span>
      <span><i class="fa fa-star-o"></i></span>
      <span><i class="fa fa-star-o"></i></span>
</div><!-- end rating -->
}
@elseif ($nr>=2 && $nr<=2)
{
<div class="rating">
     <span><i class="fa fa-star"></i></span>
     <span><i class="fa fa-star"></i></span>
     <span><i class="fa fa-star-0"></i></span>
     <span><i class="fa fa-star-o"></i></span>
     <span><i class="fa fa-star-o"></i></span>
</div><!-- end rating -->
}

等等...

还有别的办法吗？较短的？我见过安卓程序员只通过使用函数来做到这一点。在网络或拉拉维尔中呢？

Answer 1

我知道

有点晚了，但这是我的做法。

在 Laravel 6+ | 7+ 刀片（也可能适用于早期版本）与字体真棒 5 和 5（五）星的底座确实显示：

注意：$review->average为带有两个小数点的浮点数：例如 4.70

{{--Start Rating--}}
@for ($i = 0; $i < 5; $i++)
    @if (floor($review->average) - $i >= 1)
        {{--Full Start--}}
        <i class="fas fa-star text-warning"> </i>
    @elseif ($review->average - $i > 0)
        {{--Half Start--}}
        <i class="fas fa-star-half-alt text-warning"> </i>
    @else
        {{--Empty Start--}}
        <i class="far fa-star text-warning"> </i>
    @endif
@endfor
{{--End Rating--}}

我希望它仍然可以帮助任何人找到基于浮动的评级值的解决方案。

Answer 2

如果你愿意，你可以在没有循环的情况下做到这一点。

<div class="rating">
    {!! str_repeat('<span><i class="fa fa-star"></i></span>', $nr) !!}
    {!! str_repeat('<span><i class="fa fa-star-o"></i></span>', 5 - $nr) !!}
</div>

Answer 3

//将获得的星形转换为整数

<?php $stars = $rating; $stars = round($stars,0)?>

循环浏览用户拥有的星星，假设你有 3 颗星中的 5 颗星，这个循环得到 3 颗灰色的星星，

而下一个循环得到白色的星星，这意味着丢失的星星评级

@for($i= 1;$i<=$stars;$i++)
    @if($i>5)
        @break(0);
    @endif
    <i class="fa fa-star" style="color: @if($stars<3) yellow @else green @endif"></i>
@endfor
//loop to get the star the user lost
    @if(5-$stars > 0)
        @for($i= 1;$i<=5-$stars;$i++)
            <i class="fa fa-star"></i>
        @endfor
    @endif
@endif

Answer 4

我认为

它可以工作

<div class="rating">
    @for($i = 0; $i < 5; $i++)
        <span><i class="fa fa-star{{ $nr <= $i ? '-o' : '' }}"></i></span>
    @endfor
</div>

Answer 5

在CSS技巧的这篇文章（那里的最后一个建议）的帮助下，我找到了另一种仅显示的解决方案！ 星级评定。假设也是5星评级（平均也可能）。

因此，您只需要一个div，如下所示：

<div class="average-star-rating" style="--rating:{{$roundedNumber}};">
    </div>

其余的由 scss 完成：

:root {
    --star-size: 30px;
    --star-off-color: #cccccc;
    --star-on-color: #fc0;
}
.average-star-rating {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times; // make sure ★ appears correctly
    line-height: 1;
    &::before {
        content: "★★★★★";
        letter-spacing: 3px;
        background: linear-gradient(
            90deg,
            var(--star-on-color) var(--percent),
            var(--star-off-color) var(--percent)
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

从控制器中，您只需要四舍五入的数字。在片段中，我选择了 3.6。您可以简单地将值替换为所需的任何数字（在代码片段中，但自然在您的代码中也;)）。

这是一个小提琴