StarRating Widget StarRating.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The StarRating widget is a wrapper for the Bootstrap Star Rating JQuery Plugin designed by Krajee. This plugin is a simple yet powerful JQuery star rating plugin for Bootstrap. Developed with a focus on utlizing pure CSS-3 styling to render the control.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-rating repository and can also be accessed via \kartik\rating\StarRating namespace.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the StarRating widget configuration are:
  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the plugin settings/options for the Bootstrap Star Rating Plugin. There are a quite a few options you can set in this plugin. Refer the plugin documentation and demos for details.

  • pluginEvents: array the StarRating JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation and demos for details. For example:

    pluginEvents = [
        "rating.change" => "function() { log("rating.change"); }",
        "rating.clear" => "function() { log("rating.clear"); }",
        "rating.reset" => "function() { log("rating.reset"); }",
    ];
    

Usage with ActiveForm and model. Note the model validation is activated for this field (integers only and min 1 and max 5).

Fractional ratings increasing by 0.1. Uses the default unicode star symbol instead of glyphicon star.

A disabled star rating input with an initial value.

use kartik\widgets\StarRating

// Usage with ActiveForm and model. Note the model validation is activated for 
// this field (integers only and min 1 and max 5).
echo $form->field($model, 'rating')->widget(StarRating::classname(), [
    'pluginOptions' => ['step' => 0.1]
]);

// Fractional ratings increasing by 0.1. Uses the
// default unicode star symbol instead of glyphicon star.
echo '<label class="control-label">Rating</label>';
echo StarRating::widget(['model' => $model, 'attribute' => 'rating_1', 
    'pluginOptions' => [
        'glyphicon' => false
    ]
]);

// A disabled star rating input with initial value
echo '<label class="control-label">Rating</label>';
echo StarRating::widget([
    'name' => 'rating_2',
    'value' => 2.5,
    'options' => [
        'disabled' => true
    ],
]);

Fractional star rating with 6 stars , custom star symbol (uses glyphicon heart), custom captions, and customizable ranges.

Set size of the control to extra large and reduce number of stars

Set a preset value, make it readonly, hide caption, and hide clear button.

Control the number of stars, each caption value, and styles for display

use kartik\widgets\StarRating

// Fractional star rating with 6 stars , custom star symbol (uses glyphicon heart),
// custom captions, and customizable ranges.
echo StarRating::widget(['name' => 'rating_19', 
    'pluginOptions' => [
        'stars' => 6, 
        'min' => 0,
        'max' => 6,
        'step' => 0.1,
        'symbol' => html_entity_decode('&#xe005;', ENT_QUOTES, "utf-8"),
        'defaultCaption' => '{rating} hearts',
        'starCaptions'=>[]
    ]
]);

// Set size of the control to extra large and reduce number of stars
echo StarRating::widget([
    'name' => 'rating_20',
    'pluginOptions' => [
        'size' => 'xl',
        'stars' => 3,
        'min' => 0,
        'max' => 3
    ],
]);

// Set a preset value, make it readonly, hide caption, and hide clear button.
echo StarRating::widget([
    'name' => 'rating_21',
    'value' => 2,
    'pluginOptions' => [
        'readonly' => true,
        'showClear' => false,
        'showCaption' => false,
    ],
]);

// Control the number of stars, each caption value, and styles for display
echo StarRating::widget([
    'name' => 'rating_21',
    'pluginOptions' => [
        'min' => 0,
        'max' => 12,
        'step' => 2,
        'size' => 'lg',
        'starCaptions' => [
            0 => 'Extremely Poor',
            2 => 'Very Poor',
            4 => 'Poor',
            6 => 'Ok',
            8 => 'Good',
            10 => 'Very Good',
            12 => 'Extremely Good',
        ],
        'starCaptionClasses' => [
            0 => 'text-danger',
            2 => 'text-danger',
            4 => 'text-warning',
            6 => 'text-info',
            8 => 'text-primary',
            10 => 'text-success',
            12 => 'text-success'
        ],
    ],
]);