Todos los componentes (204)

Resumen de valoraciones

Comercio · RatingSummary · .amset-ratings

Qué es y cuándo usarlo

El resumen de las opiniones de un producto: la nota media en grande, sus estrellas, cuántas opiniones hay y cuántas de cada número de estrellas.

Cuándo usarlo

En la ficha de producto, encima de la lista de opiniones.
breakdown es el desglose: cuántas opiniones (count) tiene cada número de estrellas (stars). Los tramos que no vengan salen a cero; max cambia el tope (5 por defecto).
Con onFilter, cada tramo pasa a ser un botón para ver solo esas opiniones, y filtered marca el tramo activo. Qué pasa al pulsar otra vez el activo (quitar el filtro, por ejemplo) lo decide quien lo usa.
average cuando la nota viene del servidor; sin ella se calcula del desglose.

Cuándo no

Solo la nota, en una tarjeta o en un listado: Rating de solo lectura (es la que lleva ProductCard).
Para que alguien puntúe: Rating editable, o NpsSurvey si la pregunta es de 0 a 10.
Un reparto que no es de estrellas: BarChart.

Teclado: sin onFilter no hay nada enfocable. Con él, cada tramo es un botón: Tab pasa de uno a otro, e Intro o Espacio filtran. Un tramo sin opiniones está deshabilitado y sale del orden del Tab.

Accesibilidad: las barras son decoración (aria-hidden): cada fila dice con palabras cuántas opiniones son y qué parte del total, «29 (23 %)». La label es obligatoria y nombra las estrellas: «4,5 de 5» a secas no dice de qué. Cada botón se llama «Ver solo las opiniones de 4 estrellas: 29 (23 %)» y el tramo activo lleva aria-pressed, además de fondo y peso.

Contexto: el idioma de LocaleProvider (o de AmsetProvider) pone la coma de la nota y el punto de los miles; sin proveedor, es-ES.

Aspecto fino: variables CSS --amset-ratings-*: -bar, -count, -font, -gap, -note, -over, -row-padding. El tamaño mueve la nota grande, el grosor de la barra y los cuerpos de letra.

Cómo se ve

5 estrellas82 (65 %)
4 estrellas31 (24 %)
3 estrellas9 (7 %)
2 estrellas3 (2 %)
1 estrella2 (2 %)

<RatingSummary
  label="Valoraciones del producto"
  breakdown={[
    { stars: 5, count: 82 },
    { stars: 4, count: 31 },
  ]}
/>

Props

Se importa con import { RatingSummary } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`breakdown`obligatoria	`readonly RatingSegment[]`	—
`label`obligatoria	`string`	Que se esta valorando. Obligatorio: «4,3 de 5» a secas no dice de que.
`average`	`number`	La media. Sin esto se calcula del desglose.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`filtered`	`number \| null`	Tramo por el que se esta filtrando ahora mismo.
`max`	`number`	—
`onFilter`	`(stars: number) => void`	Con esto, cada barra es un boton que filtra por esas estrellas.
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-ratings-gap`	`var(--amset-space-4)`
`--amset-ratings-note`	`2.5rem`
`--amset-ratings-over`	`var(--amset-text-base)`
`--amset-ratings-font`	`var(--amset-text-sm)`
`--amset-ratings-count`	`var(--amset-text-xs)`
`--amset-ratings-bar`	`0.5rem`
`--amset-ratings-row-padding`	`var(--amset-space-1) var(--amset-space-2)`

Cómo se cambia

.amset-ratings {
  --amset-ratings-gap: ...;
  --amset-ratings-note: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: