Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Importe

Superficies · Amount

Qué es y cuándo usarlo

Un precio, con su moneda y en el formato del idioma activo: 1234,56 € en español, $1,234.56 en inglés. Con precio anterior lo tacha, escribe «Antes» para quien no lo ve y dice lo que se ahorra.

Cuándo usarlo

  • Precios de producto, líneas de carrito, totales, cuotas: todo importe que se enseña.
  • Los céntimos se quitan cuando no aportan nada (20 € y no 20,00 €). withDecimals los fuerza aunque el importe sea redondo; withDecimals={false} los quita siempre, redondeando.
  • before para una rebaja: sale tachado y con el ahorro en una pastilla («25 %»), redondeado hacia abajo, porque decir «-50 %» cuando es el 49,6 % es mentira. Solo hay oferta si before es mayor que quantity. highlightOffer={false} quita el rojo de la cifra.
  • currency con el código ISO de la moneda (euros por defecto); freeText para el cero («Gratis»); perUnit para lo que va detrás («/mes», «por kg»).

Cuándo no

  • Un importe que se escribe: NumberField con format="currency".
  • Un resumen de compra con sus líneas y su total: OrderSummary.
  • La cifra de un cuadro de mando con su variación: Stat.

Teclado: no es enfocable.

Accesibilidad: ningún lector de pantalla anuncia un tachado, así que el precio anterior lleva «Antes:» escrito y oculto a la vista, y la pastilla dice «Ahorras un 25 %». El texto seguido se lee «14,90 € Antes: 19,90 € Ahorras un 25 %».

Aspecto fino: sin variables propias: se ajusta con las clases amset-amount, amset-amount--sm/--md/--lg (el cuerpo de la cifra) y amset-amount--offer (la cifra en --amset-error).

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide la coma decimal, el punto de los miles y dónde va el símbolo.

Cómo se ve

sm · md · lg

189 €189 €189 €

Rebajado

14,90 € Antes: 19,90 € Ahorras un 25 %

Con unidad

9,90 €/mes

Sin coste

Gratis

<Amount quantity={189} size="sm" />
<Amount quantity={189} />
<Amount quantity={189} size="lg" />
<Amount quantity={14.9} before={19.9} />
<Amount quantity={9.9} perUnit="/mes" />
<Amount quantity={0} freeText="Gratis" />

Props

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

PropTipoPara qué sirve
quantityobligatorianumber—
beforenumberPrecio anterior. Sale tachado y con lo que se ahorra.
classNamestringSe une a las clases de la biblioteca, no las sustituye.
currencystringCodigo ISO. Por defecto euros.
freeTextstringTexto cuando la cantidad es cero. Sin esto se pinta «0 €».
highlightOfferbooleanLo pinta en rojo de oferta cuando hay precio anterior.
perUnitstringLo que va detras: «/mes», «por kg», «la unidad».
sizeAmountSize—
withDecimalsbooleanSin decir nada, los centimos salen solo si los hay. Con `true` salen siempre, aunque el importe sea redondo (`20,00 €`); con `false` no salen nunca y el importe se REDONDEA al entero (`14,90 €` se pinta `15 €`, y el precio anterior tambien): solo para precios que ya son redondos o donde el centimo no importa.

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

En el banco de pruebas

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