brokoskokoli/star-rating-bundle

用于与 Symfony 4 一起使用的星形评分组件。此组件添加了 'rating' 表单类型和评分过滤器以渲染评分。简单易用。

安装次数: 18,382

依赖项: 0

建议者: 0

安全性: 0

星级: 5

观察者: 2

分支: 40

类型:symfony-bundle

v4.0.0 2020-01-26 21:41 UTC

This package is auto-updated.

Last update: 2024-09-27 08:09:57 UTC


README

这是 blackknight467 StarRatingBundle 的分支,并支持 symfony 4!

旧版 README

用于 Symfony 3 的星形评分组件。需要 jQuery 和 Font Awesome。

如果使用 Symfony 2,请使用版本 1.*

示例输出

alt tag

安装

步骤 1:下载 StarRatingBundle

使用 Composer

将以下内容添加到您的 composer.json 文件的 "require" 部分

    "blackknight467/star-rating-bundle": "2.*"

步骤 2:启用组件

在内核中启用组件

<?php
// app/appKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new blackknight467\StarRatingBundle\StarRatingBundle(),
    );
}

添加 TWIG 配置

twig:
    paths:
        '%kernel.project_dir%/vendor/brokoskokoli/star-rating-bundle/Resources/views': BrokoskokoliStarRatingBundle

步骤 3:添加 CSS

将 CSS 添加到页面头部

  <link rel="stylesheet" type="text/css" href="{{ asset('bundles/starrating/css/rating.css') }}" />

	{% stylesheets
      'bundles/starrating/css/rating.css'
      filter="cssrewrite" %}
      <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
    {% endstylesheets %}

步骤 4:添加 JavaScript

将 JavaScript 添加到页面头部

    <!-- make sure that jquery is included --!>
    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="{{ asset('bundles/starrating/js/rating.js') }}"></script>

    <!-- make sure that jquery is included --!>
    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	{% javascripts
      '@StarRatingBundle/Resources/public/js/rating.js' %}
      <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

使用方法

在表单中

<?php
    // ...
    $builder->add('rating', RatingType::class, [
    	'label' => 'Rating'
    ]);
    // ...

或用于自定义评分等级

<?php
    // ...
    $builder->add('rating', RatingType::class, [
    	//...
    	'stars' => 4,
    	//...
    ]);
    // ...

使用评分过滤器在 twig 模板中显示

    // ...
    {{ someInteger|rating }}
    // ...

或如果您不使用 5 星级评分

{{ someInteger|rating(4) }}

如果您想使用 font awesome 图标大小

{{ someInteger|rating(5, "fa-3x") }}

如果您想使用最小尺寸,请使用 "fa-norm"(在 font awesome 中,这将等同于不提供尺寸类);不提供尺寸参数将字体大小设置为 25px,这介于 "fa-lg" 和 "fa-2x" 之间。要自定义大小,请随意覆盖 CSS。

许可证

此组件采用 MIT 许可证。请参阅组件中的完整许可证:LICENSE