<div class="group"> <d-star-rating value="3"></d-star-rating><br> <d-star-rating class="yellowgray" value="3"></d-star-rating><br> <d-star-rating class="green-man" value="3"></d-star-rating><br> <d-star-rating class="heart" value="3"></d-star-rating><br> <d-star-rating class="image-sprite" value="3"></d-star-rating> </div>
require.config({baseUrl: "http://ibm-js.github.io/libraries/master/"}); require(["deliteful-build/layer"], function () { require([ "deliteful/StarRating", "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS "requirejs-domready/domReady!" ], function () { document.body.style.display = ""; }); });
.group { margin: 20px; padding: 10px; border: 1px solid gray; border-radius: 6px; } /* customize stars */ .yellowgray .d-star-rating-star-icon { font-size: 150%; } .yellowgray .d-star-rating-empty:before { content: "\2605"; color: #CCC; } .yellowgray .d-star-rating-full:before { content: "\2605"; color: yellow; } .green-man .d-star-rating-star-icon { font-size: 200%; } .green-man .d-star-rating-empty:before { content: "\263A"; color: green; } .green-man .d-star-rating-full:before { content: "\263B"; color: green; } .heart .d-star-rating-star-icon { font-size: 150%; } .heart .d-star-rating-empty:before { content: "\2665"; color: #CCC; } .heart .d-star-rating-full:before { content: "\2665"; color: red; } .image-sprite .d-star-rating-star-icon { font-size: 40px; } .image-sprite .d-star-rating-empty:before { content: url("http://ibm-js.github.io/libraries/master/deliteful-build/samples/images/yellow-stars-40.png"); } .image-sprite .d-star-rating-start.d-star-rating-empty:before { margin-left: -1em; } .image-sprite .d-star-rating-end.d-star-rating-empty:before { margin-left: -1.5em; } .image-sprite .d-star-rating-full:before { content: url("http://ibm-js.github.io/libraries/master/deliteful-build/samples/images/yellow-stars-40.png"); }