評分

呈現物體的評分數值或是對其進行評分。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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-yellow is-input">
    <input class="star" type="radio" name="rating" value="1" />
    <input class="star" type="radio" name="rating" value="2" checked />
    <input class="star" type="radio" name="rating" value="3" />
    <input class="star" type="radio" name="rating" value="4" />
    <input class="star" type="radio" name="rating" value="5" />
</div>
狀態
停用的

使評分呈現無法互動、點擊的模樣。

<div class="ts-rating is-input is-red">
    <input class="heart" type="radio" name="love" value="1" disabled />
    <input class="heart" type="radio" name="love" value="2" checked disabled />
    <input class="heart" type="radio" name="love" value="3" disabled />
    <input class="heart" type="radio" name="love" value="4" disabled />
    <input class="heart" type="radio" name="love" value="5" disabled />
</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-active is-half"></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 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-yellow is-small">
    <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-yellow is-large">
    <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 的所屬組織商標