Rating

用於評分或顯示評價的組件。使用類別名稱為 .rating 並以此為子組件前綴詞。圖示可以使用 Symbol 或是 Icon。

Default

預設皆為灰色為評分狀態,需要加上給予分數的類別才會顯示配色。預設為 0、最高為 10,類別為 .:got-{0~10}。如果最高分為 3 分理論上只可以到 .:got-3,如果超過依然以 3 分為顯示。




<div class="rating :got-1"> <span class="rating_item"> <i class="symbol"><i> <span> <span class="rating_item"> <i class="symbol"><i> <span> <span class="rating_item"> <i class="symbol"><i> <span> </div>

尺寸

可加上 .sz:sm.sz:lg 來選擇 Rating 的大小。



<div class="rating sz:sm"></div> <div class="rating"></div> <div class="rating sz:lg"></div>

Iconfont

以下為使用 Font Awesome 的範例。Font Awesome 有提供半顆星的圖示,如果要顯示半星與全星可以怎麼做呢?可以在半星的 .rating_item 加上 .:half

<div class="rating :got-7"> <span class="rating_item :half"> <i class="icon fas fa-star-half"><i> <span> <span class="rating_item"> <i class="icon fas fa-star"><i> <span> ... </div>

配色

評價機制的配色通常會用到黃色與紅色,因此 Rating 只額外提供 .clr:red

<div class="rating :got-2 clr:red"></div>

Rating Form Input

部分主題網站常見的組件之一,用於評價商品或留言等等。使用類別為 .rating-form。排列時請由反方向排列,由 1 至 5 改為 5 至 1 的分數排列。

<div class="rating-form"> <input type="radio" id="score5" value="5" name="rating" class="rating-input" /> <label for="score5" class="rating_item"> <i class="icon fas fa-star"></i> </label> <input type="radio" id="score4" value="4" name="rating" class="rating-input" /> <label for="score4" class="rating_item"> <i class="icon fas fa-star"></i> </label> <input type="radio" id="score3" value="3" name="rating" class="rating-input" /> <label for="score3" class="rating_item"> <i class="icon fas fa-star"></i> </label> <input type="radio" id="score2" value="2" name="rating" class="rating-input" /> <label for="score2" class="rating_item"> <i class="icon fas fa-star"></i> </label> <input type="radio" id="score1" value="1" name="rating" class="rating-input" /> <label for="score1" class="rating_item"> <i class="icon fas fa-star"></i> </label> </div>