mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
67 lines
1.8 KiB
Plaintext
67 lines
1.8 KiB
Plaintext
---
|
|
// Port of preview/pages/stars-rating.html (layout: default)
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Rating from '@shared/components/ui/Rating.astro';
|
|
---
|
|
|
|
<DefaultLayout
|
|
title="Star Ratings"
|
|
pageHeader="Star Ratings"
|
|
pageMenu="base.stars-rating"
|
|
pageLibs={['tabler-flags', 'star-rating.js']}
|
|
>
|
|
<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><Rating 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">
|
|
<Rating value={4} />
|
|
<Rating icon="heart" value={4} color="red" />
|
|
<Rating icon="ghost" value={4} color="azure" />
|
|
<Rating 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">
|
|
<Rating id="color" value={3} />
|
|
<Rating id="color-primary" color="primary" value={3} />
|
|
<Rating id="color-red" color="red" value={3} />
|
|
<Rating 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">
|
|
<Rating id="size-sm" value={3} size="sm" />
|
|
<Rating id="size-primary" value={3} />
|
|
<Rating id="size-md" value={3} size="md" />
|
|
<Rating id="size-lg" value={3} size="lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|