bladewindUI

Rating

Displays a five star rating system. The number of stars highlighted match the rating passed. There are nine star colors to choose from but the default is orange. Where there are multiple ratings on the same page, it is recommended to name each rating component. You can either display ratings as stars, hearts or thumbsup.

                    
                        <x-bladewind.rating name="star-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            type="heart" 
                            name="heart-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            type="thumbsup" 
                            name="thumb-rating" />
                    
                



Different Colors

The BladewindUI tag component allows you to specify different colours. The tags by default are faint in colour with blue being the default colour. There are nine colour options to pick from.

                    
                        <x-bladewind.rating 
                            rating="1" 
                            color="red" 
                            name="red-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="2" 
                            color="yellow" 
                            name="yellow-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="3" 
                            color="green" 
                            name="green-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="4" 
                            color="blue" 
                            name="blue-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="5" 
                            color="pink" 
                            name="pink-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="1" 
                            color="cyan" 
                            name="cyan-rating" />
                    
                

                    
                        <x-bladewind.rating name="orange-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="3" 
                            color="gray" 
                            name="gray-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            rating="4" 
                            color="purple"
                            name="purple-rating" />
                    
                



Different Sizes

The BladewindUI rating component comes not just in colors but also sizes. There are three sizes available. The default size is small

                    
                        <x-bladewind.rating rating="2" name="small-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            size="medium" 
                            type="thumbsup" 
                            rating="3" 
                            name="medium-rating" />
                    
                

                    
                        <x-bladewind.rating 
                            size="big" 
                            type="heart" 
                            rating="2" 
                            name="big-rating" />
                    
                



Click Actions

A hidden input field is created in the background with every rating component that is created. Again, the input field uses the name attribute set for the rating component to uniquely identify and update the hidden input. Assuming you named your rating component small-rating, the following hidden input will be created. The name is prefixed with rating-value- so the resulting name will be rating-value-small-rating

                    
                        <input type="hidden" class="rating-value-small-rating" value="2" />
                    
                

You can now access this element via Javascript using the custom function you pass to the onclick. Let us assume you have a Javascript function called saveRating that accepts a parameter of which rating component you wish to save. We can end up with the following.

                    
                        <x-bladewind.rating 
                            rating="2" 
                            name="small-rating" 
                            onclick="saveRating('small-rating')" />
                    
                

                    
                        <script>
                            saveRating = function(element) { 

                                // element here is the corresponding rating component
                                // to access the value of the element
                                let element_value = dom_el(`.rating-value-${element}`).value;

                                // now that you have the rating value you can save it 
                                // maybe via an ajax call.. completely up to you
                                ajaxCall(
                                    'post', 
                                    '/article/rating/save', 
                                    `rating=${element_value}`
                                );
                            }
                        </script>
                    
                




Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Rating component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
name rating The name to uniquely identify the component by.
color orange There are nine colors to choose from.
red yellow green blue pink cyan purple gray orange
type star Determines the type of icon to display ratings as.
star heart
size small Determines the size of the stars.
small medium big
rating 0 Determines the default rating for the component. Any number between 0 and 5. Any number above 0 will result in highlighting of the stars. The number of stars highlighted will depend on the number passed.
onclick blank Javascript function to execute when stars are clicked.

 

Rating with all attributes defined

                
                    <x-bladewind.rating 
                        type="heart"
                        name="album-rating" 
                        rating="3"
                        color="yellow" 
                        size="big"
                        onclick="alert('you clicked on a star')" />
                
            

 

The source file for this component is available in resources > views > components > bladewind > rating.blade.php