Rating

Estrellas para encuestas y reseñas. Soporta tamaños y modo solo lectura.

Tamaños

3,1

4,0 / 5

4,2 · 132 reseñas

<div class="rating sm readonly">
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star"
    icon="lucide:star" width="16" height="16"></iconify-icon><span class="meta">3,1</span>
</div>
<div class="rating readonly">
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star"
    icon="lucide:star" width="16" height="16"></iconify-icon><span class="meta">4,0 / 5</span>
</div>
<div class="rating lg readonly">
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star"
    icon="lucide:star" width="16" height="16"></iconify-icon><span class="meta">4,2 · 132 reseñas</span>
</div>

{% from "rating.jinja" import rating %}
{{ rating(value=4, size="sm", label="3,1", readonly=True) }}
{{ rating(value=4, label="4,0 / 5", readonly=True) }}
{{ rating(value=4, size="lg", label="4,2 · 132 reseñas", readonly=True) }}

<Rating value="4" size="sm" label="3,1" readonly />
<Rating value="4" label="4,0 / 5" readonly />
<Rating value="4" size="lg" label="4,2 · 132 reseñas" readonly />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Calidad del servicio · readonly

4,2 · 132 reseñas

<div class="rating readonly">
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star filled"
    icon="lucide:star" width="16" height="16"></iconify-icon>
  <iconify-icon class="rating-star"
    icon="lucide:star" width="16" height="16"></iconify-icon><span class="meta">4,2 · 132 reseñas</span>
</div>

{% from "rating.jinja" import rating %}
{{ rating(value=4, max=5, label="4,2 · 132 reseñas", readonly=True) }}

<Rating value="4" max="5" label="4,2 · 132 reseñas" readonly />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar — puntuar

Sin valoración

Click en una estrella para puntuar

<div data-signals="{ r: 4 }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="rating lg">
    
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= 1 ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = 1">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= 2 ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = 2">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= 3 ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = 3">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= 4 ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = 4">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= 5 ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = 5">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    
    <span class="meta" data-show="$r === 0">Sin valoración</span>
    <span class="meta" data-show="$r > 0" data-text="$r + ',0 / 5'"></span>
  </div>
  <span style="font-size:13px;color:var(--ink-3);">Click en una estrella para puntuar</span>
</div>

<div data-signals="{ r: 4 }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="rating lg">
    {% for i in range(1, 6) %}
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= {{ i }} ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = {{ i }}">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    {% endfor %}
    <span class="meta" data-text="$r + ',0 / 5'"></span>
  </div>
  <span style="font-size:13px;color:var(--ink-3);">Click en una estrella para puntuar</span>
</div>

<div data-signals="{ r: 4 }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="rating lg">
    {% for i in range(1, 6) %}
    <svg class="rating-star"
      data-attr-class="'rating-star ' + ($r >= {{ i }} ? 'rating-star--filled' : '')"
      viewBox="0 0 24 24" fill="currentColor" data-on:click="$r = {{ i }}">
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
    {% endfor %}
    <span class="meta" data-text="$r + ',0 / 5'"></span>
  </div>
  <span style="font-size:13px;color:var(--ink-3);">Click en una estrella para puntuar</span>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`value`	int	0	Estrellas rellenadas.
`max`	int	5	Total de estrellas.
`size`	str	"md"	`sm` · `md` · `lg`.
`readonly`	bool	false	Desactiva hover y cursor de pointer.
`label`	str	""	Etiqueta a la derecha (ej. "4,2 · 132 reseñas").
`attrs`	dict	None	Atributos extra.