Rating

Calificaciones con estrellas para comentarios de usuarios y reseñas.

Importar

import { Rating } from 'asterui'

Ejemplos

Calificación básica

Calificación simple de 5 estrellas sin configuración necesaria.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} />
    )
}

export default App

Borrable

Haz clic en la misma estrella nuevamente para borrar la calificación.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} allowClear />
    )
}

export default App

Diferentes tamaños

Calificación en varios tamaños.

</>

xs

sm

md

lg

xl

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xs</span><Rating size="xs" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">sm</span><Rating size="sm" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating size="md" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating size="lg" defaultValue={3} /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">xl</span><Rating size="xl" defaultValue={3} /></div>
      </Space>
    )
}

export default App

Media estrella

Permite precisión de media estrella.

</>

md

lg

import { Rating, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">md</span><Rating defaultValue={2.5} allowHalf /></div>
        <div className="flex items-center gap-4"><span className="w-8 text-xs opacity-70">lg</span><Rating defaultValue={2.5} allowHalf size="lg" /></div>
      </Space>
    )
}

export default App

Forma de corazón

Calificación con iconos de corazón.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={4} mask="heart" color="bg-error" />
    )
}

export default App

Colores personalizados

Diferentes colores para cada nivel de calificación usando Rating.Item.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3}>
        <Rating.Item value={1} color="bg-error" />
        <Rating.Item value={2} color="bg-warning" />
        <Rating.Item value={3} color="bg-warning" />
        <Rating.Item value={4} color="bg-success" />
        <Rating.Item value={5} color="bg-success" />
      </Rating>
    )
}

export default App

Deshabilitado

Muestra calificación sin interacción.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating value={4} disabled />
    )
}

export default App

Conteo personalizado

Especifica un número diferente de estrellas.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={7} count={10} />
    )
}

export default App

Calificación controlada

Controla el valor de calificación externamente.

</>

Current rating: 0

import { Rating } from 'asterui'
import { useState } from 'react'

function App() {
  const [rating, setRating] = useState(0)
  
  return (
      <div>
        <Rating value={rating} onChange={setRating} />
        <p className="mt-2">Current rating: {rating}</p>
      </div>
    )
}

export default App

Estrella alternativa

Estilo de estrella diferente.

</>

import { Rating } from 'asterui'

function App() {
  return (
      <Rating defaultValue={3} mask="star" color="bg-success" />
    )
}

export default App

Integración con formulario

Rating funciona con validación de Form.

</>

Your rating

 

Submit

import { Rating, Form, notification, Button } from 'asterui'

function App() {
  const handleSubmit = (values: { rating?: number }) => {
    notification.success({ message: 'Submitted!', description: `Rating: ${values.rating}` })
  }
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ rating: 3 }}>
        <Form.Item
          name="rating"
          label="Your rating"
          rules={{ required: 'Please provide a rating' }}
        >
          <Rating />
        </Form.Item>
        <Button htmlType="submit" color="primary">Submit</Button>
      </Form>
    )
}

export default App

API

Rating

Propiedad	Descripción	Tipo	Predeterminado
children	Componentes Rating.Item personalizados (opcional)	React.ReactNode	-
value	Valor de calificación controlado	number	-
defaultValue	Valor de calificación predeterminado (no controlado)	number	0
onChange	Callback cuando cambia la calificación	(value: number) => void	-
onHoverChange	Callback cuando cambia el valor de hover	(value: number) => void	-
count	Número de estrellas	number	5
size	Tamaño de calificación	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
gap	Espacio entre estrellas	'none' | 'xs' | 'sm' | 'md' | 'lg'	'md'
color	Clase de color de fondo de Tailwind	string	'bg-warning'
mask	Forma de los iconos de calificación	'star' | 'star-2' | 'heart'	'star-2'
allowClear	Permitir borrar calificación haciendo clic en el mismo valor	boolean	true
allowHalf	Permitir selección de media estrella	boolean	false
disabled	Estado deshabilitado (no interactivo)	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Rating.Item

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de calificación que representa este elemento	number	-
mask	Forma del icono de calificación	'star' | 'star-2' | 'heart'	'star-2'
color	Clase de color de fondo de Tailwind	string	'bg-warning'
hidden	Elemento oculto para borrar calificación	boolean	false
half	Posición de media estrella	'first' | 'second'	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa role="radiogroup" para semántica apropiada
• Usa patrón de botón de radio para selección de calificación
• Cada estrella tiene un aria-label describiendo su valor
• Navegación por teclado entre opciones de calificación
• La vista previa de hover muestra retroalimentación visual antes de la selección
• El estado deshabilitado previene interacción mientras muestra el valor