評分 - 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 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>