Todos los componentes (204)

Tabla de planes

Comercio · PricingTable

Qué es y cuándo usarlo

La comparativa de planes o tarifas de una landing: los planes en columnas, con su precio, su descripción y su botón, y lo que trae cada uno en filas.

Cuándo usarlo

Para elegir entre unos pocos planes de suscripción o de servicio.
featured en el plan que se recomienda: lleva escrito «Recomendado», además del borde.
En perPlan, true o false para lo que se tiene o no (sale un tic o una equis) y un texto para lo que se cuenta («1 al año», «Ilimitado»).
Un precio de cero se escribe con freeText («Gratis» por defecto) y sin periodo.

Cuándo no

Datos que se ordenan, se filtran o se seleccionan: Table.
Las características de un solo producto: DataList.

Teclado: la tabla va en una caja que se enfoca con Tab, para poder desplazarla cuando no cabe; después, Tab pasa por los botones de cada plan.

Accesibilidad: es una <table> con los planes como cabeceras de columna y las características como cabeceras de fila, así que se puede recorrer oyendo el plan, la característica y el valor de cada celda. El label nombra la caja (un role="group") y es el <caption> de la tabla. Los tics y las equis son decorativos y llevan al lado «Incluido» o «No incluido», ocultos a la vista.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los precios.

Aspecto fino: variables CSS --amset-plans-*: -cell-padding, -font, -icon, -name, -plan-padding, -price, -radius, -stamp. El tamaño mueve el relleno de la columna y de la celda, el precio y los cuerpos de letra. Se declaran en la caja de fuera (.amset-plans__box), que es la que redondea sus esquinas: puestas en la tabla de dentro no le llegarían.

Cómo se ve

Pago anual

Planes de la tienda en línea
	EsencialGratisPara empezar a vender	RecomendadoProfesional29 €/mes	Empresa79 €/mesVarias tiendas
Productos en el catálogo	50	Ilimitados	Ilimitados
Facturas automáticas	No incluido	Incluido	Incluido
Usuarios del equipo	1	5	Sin límite
Soporte por teléfono	No incluido	No incluido	Incluido

Elige un plan.

<PricingTable
  label="Planes de la tienda en línea"
  plans={planes.map((plan) => ({ ...plan, price: anual ? plan.price * 10 : plan.price, period: anual ? '/año' : '/mes' }))}
  features={caracteristicas}
  freeText="Gratis"
/>

Props

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

Prop	Tipo	Para qué sirve
`features`obligatoria	`readonly PlanFeature[]`	—
`plans`obligatoria	`readonly PricingPlan[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	—
`freeText`	`string`	Texto cuando el precio es cero.
`label`	`string`	Nombre de la comparativa. Es lo que nombra la tabla.
`size`	`"sm" \| "md" \| "lg"`	—

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: