Un planificador de sesiones nativo de Preline con pestañas vinculadas, un complemento de entrada numérica con límites, alias de temas instalados, escalas reales de Tailwind y una estimación local de materiales que se actualiza según la sesión seleccionada.
Preline 4.2.0 HSTabs y HSInputNumber con Tailwind CSS 4.3.3 y el tema predeterminado del paquete. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Preline UI
Preline npm 4.2.0 con Tailwind CSS 4.3.3; tema predeterminado del paquete instalado. El sitio de marketing y documentación puede mostrar un aviso de una versión más reciente, por lo que el ejemplo ejecutable está fijado explícitamente a esta versión. Los alias del tema siguen siendo alias; no se han inventado conversiones hexadecimales.
Sistema de diseño Preline UI: Preline combina el marcado de utilidades con plugins de comportamiento
Preline combina el marcado de utilidades con plugins de comportamiento
El planificador utiliza dos plugins nativos de Preline: HSTabs selecciona un panel de sesión y HSInputNumber gestiona controles acotados para incrementar y reducir valores. Las clases de Tailwind proporcionan la mayor parte del tratamiento visual. La ilustración original de la sesión y el cálculo del presupuesto pertenecen a la aplicación, no a un componente ficticio que lo gestione todo en uno.
Esta distinción importa al copiar el ejemplo. Instalar únicamente el paquete JavaScript no compila las clases de utilidades ni proporciona el marcado de la aplicación. A la inversa, copiar HTML sin inicializar los plugins deja incompleto el comportamiento de las pestañas y los controles numéricos. La integración completa que se muestra a continuación incluye cada parte de forma explícita.
Sistema de diseño Preline UI: sigue los alias semánticos hasta sus roles de paleta
Sigue los alias semánticos hasta sus roles de paleta
En el tema claro predeterminado del paquete, --primary hace referencia a --color-primary-600, cuya escala de color primaria subyacente es azul. El color de primer plano primario se resuelve en blanco; los estados hover, focus y active usan el rol setecientos. La pestaña seleccionada y la acción Save comparten esa familia mediante clases de utilidades semánticas.
Las tarjetas usan --card y --card-line, mientras que el campo de cantidad usa --layer y --layer-line. Mantener separados esos roles hace que los futuros cambios de tema sean más predecibles que dispersar por todas partes clases literales de blanco y gris. La tabla conserva los alias oficiales en lugar de presentar aproximaciones calculadas como si fueran tokens de origen.
Sistema de diseño Preline UI: usa la escala real de Tailwind y señala las excepciones originales
Usa la escala real de Tailwind y señala las excepciones originales
El título de página y el presupuesto usan text-3xl, el título de sesión usa text-2xl y el texto de los formularios usa text-sm. El relleno de tarjeta p-5 equivale a 1.25rem con la unidad de espaciado predeterminada. El mayor margen interior de página sm:p-8 comienza en el punto de interrupción small de Tailwind, a 640px, mientras que la cuadrícula original pasa a una columna a 760px.
La hoja de estilos local usa system-ui y no carga las fuentes personalizadas opcionales indicadas en el archivo de tema de Preline. A 280px, las pestañas se distribuyen en dos filas y la tarjeta del grupo queda debajo de la sesión. Son decisiones deliberadas de composición de la aplicación, no una afirmación de que todos los diseños de Preline tengan esta geometría.
Sistema de diseño Preline UI: mantener vinculados los controles de pestañas y los paneles mediante ID estables
Mantén los controles de pestañas y los paneles vinculados mediante ID estables
Cada pestaña tiene un data-hs-tab que apunta a un único panel. aria-controls de la pestaña y aria-labelledby del panel repiten esa relación para las tecnologías de asistencia. Solo una pestaña inicial lleva active y aria-selected=true, y los demás paneles empiezan ocultos. HSTabs nativo actualiza esos estados mientras el usuario navega.
El estilo visual activo usa hs-tab-active:bg-primary y hs-tab-active:text-primary-foreground. Estas variantes provienen de variants.css de Preline, por lo que omitir esa importación puede hacer que el estado seleccionado resulte ambiguo visualmente, aunque el JavaScript cambie las clases correctamente. La aplicación observa los cambios de selección para actualizar el resumen adyacente.
Selecciona el taller de cerámica y confirma su título, materiales y duración.
Aumenta Participantes de dos a tres y comprueba el importe estimado de $54.
Guarda el plan local y luego cambia de pestaña para borrar la confirmación anterior.
Sistema de diseño Preline UI: las opciones del complemento y las restricciones de entrada deben coincidir
Las opciones del plugin y las restricciones de entrada deben coincidir
El contenedor de cantidad establece min uno, max seis y step uno en data-hs-input-number. El campo de número nativo repite esas restricciones. Así, tanto los botones del complemento como la validación del navegador comparten el mismo conjunto de valores permitidos, en lugar de permitir que un número introducido a mano eluda un límite que solo exista en el controlador del botón.
El resumen escucha los eventos input y change, así como la devolución de llamada change del complemento. Si la entrada manual no es válida, el total se sustituye por una raya em y se desactiva Guardar; además, el controlador de guardado llama a reportValidity antes de leer el valor. El límite de seis personas es una restricción de planificación de ejemplo, no una afirmación sobre la disponibilidad real.
Sistema de diseño Preline UI: calcular a partir del panel activo, no de etiquetas obsoletas
Calcula a partir del panel activo, no de etiquetas obsoletas
Cada panel almacena un nombre de sesión, un precio y una duración estables como atributos data. La función de actualización lee el panel visible y multiplica el importe asignado por el tamaño válido del grupo. Así, el estudio de impresión, el taller de cerámica y el recorrido de dibujo son opciones realmente distintas, en lugar de pestañas que muestran la misma tarjeta de ejemplo.
El importe estimado mostrado solo incluye los materiales. Las descripciones originales indican qué representa el importe asignado, y la página aclara explícitamente que no reserva una plaza. Los valores no están vinculados a pagos, comprobaciones de inventario ni horarios externos. Un flujo de reserva real necesitaría esos sistemas por separado y validación en el servidor.
Sistema de diseño Preline UI: usar la entrada manual exportada en esta versión del paquete
Usa la entrada manual exportada en esta versión del paquete
El paquete verificado 4.2.0 ofrece exportaciones con nombre HSTabs y HSInputNumber desde preline/non-auto. El ejemplo las importa y llama a sus métodos autoInit después de que exista el marcado. A pesar del nombre, aquí autoInit es un análisis explícito que inicia la aplicación, no un enlace implícito de carga de página para todo el paquete.
Durante la verificación, las rutas .mjs de cada complemento no exponían una clase predeterminada, y las importaciones directas desde esas rutas podían eliminarse según los metadatos de efectos secundarios del paquete. El uso de la entrada manual exportada resolvió ese problema concreto de compilación. Por ello, la configuración muestra la importación versionada que funciona, en lugar de una importación genérica del complemento que no se había probado.
Sistema de diseño Preline UI: hacer que la confirmación caduque cuando cambie el plan
Hacer que la confirmación caduque cuando cambie el plan
Guardar plan local escribe un mensaje de estado con la sesión exacta, el número de participantes y el total de materiales, y luego se desactiva. Cualquier cambio en la cantidad o en la pestaña seleccionada llama a update, restaura el mensaje explicativo habitual y vuelve a calcular si se puede guardar. Un mensaje de guardado anterior no puede permanecer asociado a un plan nuevo.
La prueba local seleccionó el taller de cerámica, aumentó el número de participantes a tres y comprobó el estado resultante de $54. También examinó la página renderizada a 280px. Un total estático o un botón que simplemente cambia su propia etiqueta no demostraría que los dos complementos nativos y el estado de la aplicación están conectados.
Usa una región de estado para mostrar el resultado local exacto.
Evita incluir valores no válidos en el total calculado.
Conserva los ID estables de pestañas y paneles al adaptar el marcado.
Sistema de diseño Preline UI: compilar el tema, las variantes y el marcado de origen real
Compila el tema, las variantes y el marcado de origen real
La hoja de estilos importa Tailwind primero, luego las variantes de Preline y el tema predeterminado del paquete. Las rutas de origen explícitas incluyen el archivo local HTML, la aplicación JavaScript y los archivos de distribución de Preline, para que las utilidades dependientes del estado estén disponibles en el CSS generado. La hoja de estilos de diseño original va después de esas importaciones.
La vista previa independiente incluye CSS compilado y JavaScript empaquetado, y no realiza ninguna solicitud a una CDN. Un proyecto de producción puede servir los mismos archivos de salida por separado. Mantén las rutas de archivo relativas a la entrada CSS real; el ejemplo reproducible de abajo coloca todos los archivos de origen en la raíz del proyecto para evitar dependencias ocultas de espacios de trabajo temporales.
Las ilustraciones son originales CSS y tienen aria-hidden.
Esta hoja de estilos va después de las importaciones de Tailwind y Preline.
04
Preline UI Configuración del agente del sistema de diseño
Punto de partida para la implementación
Preline 4.2.0 nativo verificado. El marcado completo, la lógica y CSS se proporcionan más arriba. Las rutas de origen de input.css suponen que los cuatro archivos de origen están en la raíz del proyecto.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Una instrucción para tu proyecto
Instrucción para el agente
Usa Preline 4.2.0 con las importaciones con nombre HSTabs y HSInputNumber desde preline/non-auto, e inicializa explícitamente ambos complementos. Conserva los tres talleres de Studio Saturday, el rango de cantidad de uno a seis y el coste de materiales del taller seleccionado. Calcula el total según el panel activo y la cantidad; invalida el plan guardado si cambia cualquiera de los dos y valida el rango numérico antes de guardarlo localmente. Incluye la configuración proporcionada de temas y variantes de Tailwind y el diseño original. No conviertas el plan local del estudio en una confirmación de reserva ni de pago.
05
Fuentes y alcance del sistema de diseño de Preline UI
Preline npm 4.2.0 nativo con Tailwind CSS 4.3.3. Descripciones originales de las sesiones, ilustraciones y asignaciones ficticias para materiales. Guardar solo almacena el estado local de la página; no se realiza ninguna reserva, pago ni envío de mensajes externos.
