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 的大小。
Small
Default
Large
<div class="rating :got-2 sz:{尺寸}">
<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>
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">
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
</div>
Rating Form Input
部分主題網站常見的組件之一，用於評價商品或留言等等。使用類別為 .rating-form。排列時請由反方向排列，由 1 至 5 改為 5 至 1 的分數排列。
<div class="rating :got-2 clr:red">
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
<span class="rating_item">
<i class="icon fas fa-heart"></i>
</span>
</div>