評分 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<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-input is-disabled is-red">
    <input class="heart" type="radio" name="love" value="1" />
    <input class="heart" type="radio" name="love" value="2" checked />
    <input class="heart" type="radio" name="love" value="3" />
    <input class="heart" type="radio" name="love" value="4" />
    <input class="heart" type="radio" name="love" value="5" />
</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>

可供輸入的

可讓使用者以點擊的方式輸入評分數值。

<div class="ts-rating is-input is-yellow">
    <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>