mirror of
https://github.com/tabler/tabler.git
synced 2026-01-25 04:16:36 +00:00
63 lines
1.8 KiB
HTML
63 lines
1.8 KiB
HTML
---
|
|
title: Star Ratings
|
|
page-header: Star Ratings
|
|
page-libs: [tabler-flags, star-rating.js]
|
|
page-menu: base.stars-rating
|
|
layout: default
|
|
permalink: stars-rating.html
|
|
---
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-md-4">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="h3 card-title">Basic</div>
|
|
<div>{% include "ui/rating.html" value=4 %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="h3 card-title">Different icon</div>
|
|
<div class="space-y">
|
|
{% include "ui/rating.html" value=4 %}
|
|
{% include "ui/rating.html" icon="heart" value=4 color="red" %}
|
|
{% include "ui/rating.html" icon="ghost" value=4 color="azure" %}
|
|
{% include "ui/rating.html" icon="circle" value=4 color="green" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="h3 card-title">Custom colors</div>
|
|
<div class="space-y">
|
|
{% include "ui/rating.html" id="color" value=3 %}
|
|
{% include "ui/rating.html" id="color-primary" color="primary" value=3 %}
|
|
{% include "ui/rating.html" id="color-red" color="red" value=3 %}
|
|
{% include "ui/rating.html" id="color-lime" color="lime" value=3 %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="h3 card-title">Custom sizes</div>
|
|
<div class="space-y">
|
|
{% include "ui/rating.html" id="size-sm" value=3 size="sm" %}
|
|
{% include "ui/rating.html" id="size-primary" value=3 %}
|
|
{% include "ui/rating.html" id="size-md" value=3 size="md" %}
|
|
{% include "ui/rating.html" id="size-lg" value=3 size="lg" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|