Produto
PRODUTO
Avaliação
É utilizado para indicar a avaliação de determinado conteúdo, bem como permitir aos usuários que façam a avaliação com uma nota de 1 à 5, indicada por cada uma das estrelas.
Estados de interação
Usado quando é permitido apenas a escolha de um item. Devem ter os mesmos padrões de interação dos cards filled, para o hover e focus.
Normal
Hover
Pressed
Filled
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="stars">
<div class="star-image"></div>
<div class="star-image"></div>
<div class="star-image"></div>
<div class="star-image"></div>
<div class="star-image"></div>
</div>
SASS Exibir código
Copiar código
Exibir código
.five-stars {
display: inline-block;
}
.star-status {
font-size: 0.75em;
color: #9b9b9b;
margin-bottom: 10px;
}
.hovered {
background-image: url("img/blue-star-hover.svg");
}
.pressed {
background-image: url("img/blue-star-pressed.svg");
}
.filled {
background-image: url("img/blue-star-filled.svg");
}
JS Exibir código
Copiar código
Exibir código
var currentStar = "";
function setClass(elem, className){
var siblingsBefore = elem.prevAll();
clearClasses(siblingsBefore.addBack());
siblingsBefore.addBack().addClass(className);
if(className === "filled")
currentStar = elem;
};
function clearClasses(elem){
elem.removeClass("hovered pressed filled");
};
function clearAll(elem){
clearClasses(elem.prevAll().addBack());
};
$(".star-image").mouseenter(function(){
clearClasses($(this).siblings().addBack());
setClass($(this), "hovered");
});
$(".star-image").mousedown(function(){
setClass($(this), "pressed");
});
$(".star-image").mouseup(function(){
setClass($(this), "filled");
});
$(".stars").mouseleave(function(){
clearAll($(this).children());
if(currentStar !== ""){
currentStar.prevAll().addBack().addClass("filled");
}
});