StarRating supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the StarRating::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set StarRating::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set StarRating::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set StarRating::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-rating extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-rating "dev-master"

"kartik-v/yii2-widget-rating": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

• readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

• 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"); }",
  ];
  

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' => [
        'theme' => 'krajee-uni',
        'filledStar' => '★',
        'emptyStar' => '☆'
        
    ]
]);

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

// Set the language / locale for translation
echo StarRating::widget([
    'name' => 'rating_33',
    'value' => 3,
    'language' => 'de'
]);

// Render a display only rating easily
echo StarRating::widget([
    'name' => 'rating_35',
    'value' => 3,
    'pluginOptions' => ['displayOnly' => true]
]);

use kartik\widgets\StarRating
use yii\web\JsExpression;

// 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,
        'filledStar' => '<i class="fas fa-heart"></i>',
        'emptyStar' => '<i class="fas fa-heart-empty"></i>',
        'defaultCaption' => '{rating} hearts',
        'starCaptions' => new JsExpression("function(val){return val == 1 ? 'One heart' : val + ' hearts';}")
    ]
]);

// 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'
        ],
    ],
]);

// Advanced theming and ability to use richer markup (e.g. SVG). 
// Use the inbuilt Krajee SVG theme for rendering SVG icons
echo StarRating::widget(['name' => 'rating_44', 
    'pluginOptions' => [
        'theme' => 'krajee-svg',
        'filledStar' => '<span class="krajee-icon krajee-icon-star"></span>',
        'emptyStar' => '<span class="krajee-icon krajee-icon-star"></span>'
    ]
 ]);