範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-rating is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>內容
以星星的方式呈現評分。
<div class="ts-rating">
<div class="star is-active"></div>
<div class="star"></div>
<div class="star"></div>
</div>以愛心的方式呈現評分。
<div class="ts-rating">
<div class="heart is-active"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>狀態
啟用指定的項目讓使用者得知目前評分為何。
<div class="ts-rating">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>使某個啟用的星號項目以一半呈現，通常用於帶有小數點的評分。
<div class="ts-rating">
<div class="star is-active"></div>
<div class="star is-half is-active"></div>
<div class="star"></div>
</div>外觀
評分的星星通常會是黃色，愛心則是紅色。
<div class="ts-rating is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>
<div class="ts-rating is-red">
<div class="heart is-active"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>更改評分的大小。
<div class="ts-rating is-small is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>
<div class="ts-rating is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>
<div class="ts-rating is-large is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>