# Sistema de diseño Preline UI ## Vista previa de la interfaz del sistema de diseño Preline UI Compara tres sesiones creativas originales, cambia el tamaño del grupo y guarda un presupuesto de materiales claramente local. ## 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. ### Tema semántico claro predeterminado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --background | var(--color-white) | Rol de fondo predeterminado. | | --foreground | var(--color-gray-800) | Rol del texto principal. | | --border | var(--color-gray-200) | Rol de borde compartido. | | --primary | var(--color-primary-600) | Pestaña activa y acción principal. | | --primary-foreground | var(--color-white) | Texto sobre el color principal. | | --primary-hover | var(--color-primary-700) | Estado al pasar el cursor. | | --primary-focus | var(--color-primary-700) | Estado de foco. | | --primary-active | var(--color-primary-700) | Estado activo. | | --layer | var(--color-white) | Superficie del control de cantidad. | | --layer-line | var(--color-gray-200) | Borde del control de cantidad. | | --layer-hover | var(--color-gray-50) | Superficie al pasar el cursor. | | --card | var(--color-white) | Tarjetas de sesión y grupo. | | --card-line | var(--color-gray-200) | Borde de la tarjeta. | | --muted-foreground-1 | var(--color-gray-500) | Texto complementario. | ### Escalas de Tailwind utilizadas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | p-2 / gap-2 | 0.5rem | Contenedor de cantidad y separación entre pestañas. | | px-3 / gap-3 | 0.75rem | Relleno de pestañas y espaciado del control numérico. | | p-5 | 1.25rem | Tarjetas y margen interior predeterminado de la página. | | sm:p-8 | 2rem from 640px | Margen interior de la página en el punto de interrupción pequeño. | | mt-7 | 1.75rem | Espacio antes del planificador. | | text-xs | 0.75rem / 1rem | Etiquetas complementarias. | | text-sm | 0.875rem / 1.25rem | Controles y texto explicativo. | | text-lg | 1.125rem / 1.75rem | Encabezado del grupo. | | text-2xl | 1.5rem / 2rem | Título de la sesión. | | text-3xl | 1.875rem / 2.25rem | Encabezado de página y total. | | rounded-lg / rounded-xl | 0.5rem / 0.75rem | Controles / tarjetas; valores predeterminados de radio de Tailwind. | ### Restricciones de la aplicación original y los plugins | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Group size | min 1 / max 6 / step 1 | Las opciones de datos de HSInputNumber y las restricciones de entrada de HTML coinciden. | | Print studio allowance | $12 per participant | Presupuesto ficticio de materiales. | | Clay workshop allowance | $18 per participant | Presupuesto ficticio de materiales. | | Drawing walk allowance | $5 per participant | Presupuesto ficticio de materiales. | | Layout | Flexible session + 280px group card; stack at 760px | Composición original adaptable. | | Theme mapping | bg-primary → --color-primary → --primary | La utilidad semántica de Tailwind se resuelve mediante el alias de Preline. | ## Guía completa del sistema de diseño Preline UI Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Selecciona el taller de cerámica y confirma su título, materiales y duración. 2. Aumenta Participantes de dos a tres y comprueba el importe estimado de $54. 3. Guarda el plan local y luego cambia de pestaña para borrar la confirmación anterior. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## Preline UI Ejemplos de componentes del sistema de diseño ### Marcado semántico completo del planificador ID de pestañas, relaciones entre paneles, enlaces del control de número y una región de estado local explícita. ```

STUDIO SATURDAY · SAMPLE PROGRAM

Choose a different kind of afternoon.

Explore three creative sessions and calculate a sample materials budget for your group. This planner does not book a place.

09:30–11:00 · 90 minutes

Ink, paper, repeat.

Make a two-color print from a simple cut-paper composition.

Materials included in the estimate

  • Cobalt ink
  • Warm white stock
  • Registration guide

Sample materials allowance: $12 per person

``` Referencia de código - Las tres sesiones y sus precios son datos de ejemplo originales. - El campo nativo tiene las mismas restricciones que el complemento. ### Inicialización y cálculo completos de los complementos Inicialización manual desde la entrada non-auto exportada; la selección y la cantidad alimentan un único resumen calculado. ``` import {HSTabs,HSInputNumber} from 'preline/non-auto'; HSTabs.autoInit();HSInputNumber.autoInit(); const quantity=document.querySelector('#people'),save=document.querySelector('#save'),feedback=document.querySelector('#feedback'); function selected(){return document.querySelector('[role=tabpanel]:not(.hidden)')} function update(){const panel=selected(),count=Number(quantity.value);document.querySelector('#selected-name').textContent=panel.dataset.name;document.querySelector('#selected-duration').textContent=panel.dataset.duration;document.querySelector('#total').textContent=quantity.checkValidity()&&count>=1?'$'+count*Number(panel.dataset.price):'—';save.disabled=!quantity.checkValidity()||count<1;feedback.textContent='No booking or payment is created.'} document.querySelectorAll('[data-hs-tab]').forEach(button=>button.addEventListener('click',()=>queueMicrotask(update))); new MutationObserver(update).observe(document.querySelector('nav'),{subtree:true,attributes:true,attributeFilter:['aria-selected']}); quantity.addEventListener('input',update);quantity.addEventListener('change',update); const instance=HSInputNumber.getInstance('#quantity');instance.on('change',update); save.addEventListener('click',()=>{if(!quantity.reportValidity())return;const panel=selected();feedback.textContent=`Saved locally: ${panel.dataset.name}, ${quantity.value} people, $${Number(quantity.value)*Number(panel.dataset.price)} materials estimate.`;save.disabled=true});update(); ``` Referencia de código - Usa las exportaciones con nombre de preline/non-auto. - Los archivos .mjs de las rutas versionadas de los complementos no exportan una clase predeterminada. - Tanto los eventos de cambio del campo como las devoluciones de llamada change del complemento actualizan el resumen. ### Composición adaptable original completa Ilustraciones decorativas de impresión, cerámica y dibujo en torno a los complementos nativos de pestañas y número. ``` html,body{margin:0;height:auto;min-height:0}body{background:#f7f8fb;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}button{cursor:pointer}button:disabled{cursor:default}.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.session-art{height:200px;position:relative;overflow:hidden;border-radius:12px 12px 0 0}.session-art i,.session-art b,.session-art span{display:block;position:absolute}.print{background:#e2e9f4}.print i{width:160px;height:140px;left:15%;top:45px;background:#2456a7;transform:rotate(-13deg)}.print b{width:150px;height:150px;right:14%;top:30px;background:#f0a979;border-radius:50%;mix-blend-mode:multiply}.print span{width:180px;height:8px;left:20%;top:160px;background:#f9f8ef;transform:rotate(-13deg)}.ceramics{background:#e8d9c8}.ceramics i{width:150px;height:100px;left:25%;top:65px;border-radius:15% 15% 50% 50%;background:#a87862}.ceramics b{width:150px;height:32px;border-radius:50%;left:25%;top:53px;background:#704a3d;box-shadow:inset 0 0 0 10px #bd8f78}.ceramics span{width:150px;height:12px;left:25%;top:171px;background:#c7b39e;border-radius:50%}.drawing{background:#e2e8de}.drawing i{width:160px;height:145px;left:23%;top:25px;background:#fffdf4;transform:rotate(8deg);border:1px solid #d6d8cb}.drawing b{height:90px;width:80px;left:33%;top:49px;border:2px solid #4d655b;transform:rotate(-18deg);border-radius:50% 50% 10% 10%}.drawing span{width:130px;height:7px;background:#ad754c;left:45%;top:145px;transform:rotate(-33deg)}@media(max-width:760px){.planner-grid{grid-template-columns:minmax(0,1fr)}.session-art{height:170px}}@media(max-width:360px){main{padding:14px!important}.session-art i,.session-art b,.session-art span{transform:scale(.8)}.session-art{height:150px}h1{font-size:26px!important}} ``` Referencia de código - Las ilustraciones son originales CSS y tienen aria-hidden. - Esta hoja de estilos va después de las importaciones de Tailwind y Preline. ## 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. ``` # Create an empty directory and run: npm init -y npm install preline@4.2.0 tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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",`Studio planner${f.readFileSync("body.html","utf8")}`)' # Serve this directory with your existing static server. ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Temas Asignación de roles semánticos y personalización del tema. - Complemento de pestañas Relaciones entre destinos, inicialización y comportamiento. - Número de entrada Límites, hooks, métodos y callbacks de cambio. - Marcado de pestañas Composición de la lista de pestañas y los paneles. - Integración con JavaScript Límites de inicialización y ciclo de vida del framework. - Tipografía Jerarquía tipográfica basada en utilidades. - Instalación Configuración del paquete y compilación de Tailwind. ## Recursos relacionados con el sistema de diseño de Preline UI ### Prime UI Una implementación de PrimeVue con versión fijada del ecosistema Prime UI: un árbol de documentos con tema Aura y referencias reales al preajuste, expansión controlada, filtrado, selección y fijación local. ### Pure CSS Pure CSS es una hoja de estilos modular para cuadrículas, formularios, botones, menús y tablas, sin un entorno de ejecución para widgets. Esta guía muestra cómo se combinan su módulo opcional de cuadrícula adaptable y los elementos semánticos nativos en un catálogo de equipos filtrable, con la ordenación y la selección implementadas explícitamente. ### Quasar Un flujo guiado nativo de Quasar con valores reales de marca y espaciado, validación de QForm, un creador de informes en tres pasos, opciones de formato con botones de radio y una agenda dinámica de cuarenta y cinco minutos. - [Referencia de implementación](https://preline.co/plugins/tabs.html) - [Fuente](https://preline.co/docs/themes.html) - [Fuente](https://preline.co/docs/typography.html) - [Fuente](https://preline.co/plugins/input-number.html) - [Consulta la especificación complementaria](https://preline.co/docs/index.html) - [Consulta la especificación complementaria](https://preline.co/docs/themes.html) - [Consulta la especificación complementaria](https://preline.co/docs/typography.html) - [Consulta la especificación complementaria](https://preline.co/plugins/tabs.html) - [Consulta la especificación complementaria](https://preline.co/plugins/input-number.html) - [Consulta la especificación complementaria](https://preline.co/docs/components/tabs.html) - [Consulta la especificación complementaria](https://preline.co/docs/preline-javascript.html) - [Referencia de código](https://preline.co/docs/components/tabs.html) - [Referencia de código](https://preline.co/plugins/input-number.html) - [Referencia de código](https://preline.co/docs/themes.html) - [Temas Asignación de roles semánticos y personalización del tema.](https://preline.co/docs/themes.html) - [Complemento de pestañas Relaciones entre destinos, inicialización y comportamiento.](https://preline.co/plugins/tabs.html) - [Número de entrada Límites, hooks, métodos y callbacks de cambio.](https://preline.co/plugins/input-number.html) - [Marcado de pestañas Composición de la lista de pestañas y los paneles.](https://preline.co/docs/components/tabs.html) - [Integración con JavaScript Límites de inicialización y ciclo de vida del framework.](https://preline.co/docs/preline-javascript.html) - [Tipografía Jerarquía tipográfica basada en utilidades.](https://preline.co/docs/typography.html) - [Instalación Configuración del paquete y compilación de Tailwind.](https://preline.co/docs/index.html)