Rating - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-rating is-yellow">
    <div class="star is-active"></div>
    <div class="star is-active"></div>
    <div class="star"></div>
</div>

Types

Input

A rating can be used as an input, which can be interacted with.

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

States

Disabled

A rating can be started in non-interactive mode by adding [disabled] attribute.

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

Active

A rating with active items shows the current rating.

<div class="ts-rating">
    <div class="star is-active"></div>
    <div class="star is-active"></div>
    <div class="star"></div>
</div>

Half

Show partially filled ratings.

<div class="ts-rating">
    <div class="star is-active"></div>
    <div class="star is-active is-half"></div>
    <div class="star"></div>
</div>

Structure

Star

A rating can use stars as its items.

<div class="ts-rating">
    <div class="star is-active"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

Heart

A rating can be represented with hearts.

<div class="ts-rating">
    <div class="heart is-active"></div>
    <div class="heart"></div>
    <div class="heart"></div>
</div>

Variations

Colors

You can specify colors with is-yellow and is-red classes.

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

Sizes

A rating can vary in size.

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