評分

呈現物體的評分數值或是對其進行評分。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標