Rating

Notations par étoiles pour les retours utilisateurs et les avis.

Import

import { Rating } from 'asterui'

Exemples

Notation basique

Simple notation 5 étoiles sans configuration nécessaire.

import { Rating } from 'asterui'

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

export default App

Effaçable

Cliquez à nouveau sur la même étoile pour effacer la notation.

import { Rating } from 'asterui'

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

export default App

Différentes tailles

Notation dans diverses tailles.

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

Demi-étoile

Autorisez une précision de demi-étoile.

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

Forme de coeur

Notation avec icônes en forme de coeur.

import { Rating } from 'asterui'

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

export default App

Couleurs personnalisées

Différentes couleurs pour chaque niveau de notation en utilisant 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

Désactivé

Afficher la notation sans interaction.

import { Rating } from 'asterui'

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

export default App

Nombre personnalisé

Spécifiez un nombre différent d'étoiles.

import { Rating } from 'asterui'

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

export default App

Notation contrôlée

Contrôlez la valeur de notation de manière externe.

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

Étoile alternative

Style d'étoile différent.

import { Rating } from 'asterui'

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

export default App

Intégration de formulaire

La notation fonctionne avec la validation de formulaire.

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`

Propriété	Description	Type	Défaut
`children`	Composants Rating.Item personnalisés (optionnel)	`React.ReactNode`	-
`value`	Valeur de notation contrôlée	`number`	-
`defaultValue`	Valeur de notation par défaut (non contrôlée)	`number`	`0`
`onChange`	Callback lorsque la notation change	`(value: number) => void`	-
`onHoverChange`	Callback lorsque la valeur de survol change	`(value: number) => void`	-
`count`	Nombre d’étoiles	`number`	`5`
`size`	Taille de notation	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`gap`	Espace entre les étoiles	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`color`	Classe de couleur d’arrière-plan Tailwind	`string`	`'bg-warning'`
`mask`	Forme des icônes de notation	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`allowClear`	Permettre d’effacer la notation en cliquant sur la même valeur	`boolean`	`true`
`allowHalf`	Permettre la sélection de demi-étoiles	`boolean`	`false`
`disabled`	État désactivé (non interactif)	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

`Rating.Item`

Propriété	Description	Type	Défaut
`value`	Valeur de notation que cet élément représente	`number`	-
`mask`	Forme de l’icône de notation	`'star' \| 'star-2' \| 'heart'`	`'star-2'`
`color`	Classe de couleur d’arrière-plan Tailwind	`string`	`'bg-warning'`
`hidden`	Élément masqué pour effacer la notation	`boolean`	`false`
`half`	Position de demi-étoile	`'first' \| 'second'`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Utilise role="radiogroup" pour une sémantique appropriée
Utilise le pattern des boutons radio pour la sélection de notation
Chaque étoile a un aria-label décrivant sa valeur
Navigation au clavier entre les options de notation
L’aperçu au survol affiche un retour visuel avant la sélection
L’état désactivé empêche l’interaction tout en affichant la valeur