Una composición con acordeón y panel lateral nativos de Flowbite 4, con alias semánticos del tema verificados, una lista de equipaje persistente y un flujo accesible para añadir notas sobre materiales de forma local.
Clases de acordeón y panel lateral de Flowbite 4.0.2, tema predeterminado y Tailwind CSS 4.3.3. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Flowbite
Tema predeterminado de Flowbite 4.0.2 con Tailwind CSS 4.3.3. Los alias con nombre que aparecen a continuación son variables reales del tema Flowbite; las escalas a las que hacen referencia proceden de Tailwind. La ilustración del equipaje y las decisiones sobre el espaciado de la aplicación son originales.
Funciones semánticas predeterminadas de texto y estado
Sistema de diseño Flowbite Four añade un tema predeterminado con nombre
Flowbite Four añade un tema predeterminado con nombre
Este ejemplo usa Flowbite 4.0.2, no una colección sin versión de fragmentos antiguos en azul y gris. Su tema predeterminado define alias semánticos como color-body, color-heading, color-brand y color-neutral-primary. La página importa ese tema antes de aplicar el complemento Tailwind de Flowbite y después usa clases correspondientes, como text-heading y bg-brand.
Los alias apuntan a las escalas de color de Tailwind. Por ejemplo, la acción de marca normal hace referencia a blue-700, mientras que su función de estado al pasar el cursor, con más énfasis, hace referencia a blue-800. La especificación conserva esas referencias para que se pueda distinguir la función semántica de un valor de color primitivo. La ilustración del equipaje reutiliza las mismas funciones de marca, pero no se presenta como una ilustración oficial de Flowbite.
Sistema de diseño Flowbite: la geometría del tema y la maquetación de Tailwind trabajan en conjunto
La geometría del tema y la maquetación de Tailwind trabajan en conjunto
El radius-base del tema predeterminado es de doce píxeles y rounded-base se usa en los contenedores principales, los controles del panel lateral y el aviso de resultado. También define radios distintos de dos, cuatro, seis, ocho y dieciséis píxeles. Por eso es importante importar el tema cuando un componente copiado utiliza los nombres de clase semánticos más recientes.
Inter encabeza la pila de fuentes proporcionada, pero esta vista previa autocontenida no descarga fuentes remotas. Usa la fuente alternativa del sistema disponible. El espaciado de página sigue las clases de utilidad de Tailwind: p-6 equivale a un rem y medio, gap-8 a dos rem y el p-10 de escritorio a dos rem y medio. Estas clases de utilidad de maquetación no se presentan como una escala de espaciado Flowbite inventada y separada.
Sistema de diseño Flowbite: una instancia del acordeón gestiona tres categorías
Una instancia del acordeón gestiona tres categorías
JavaScript crea un Accordion a partir de una matriz de elementos. Cada elemento tiene un ID estable, un elemento activador y un panel de destino; la categoría de papel aparece activa al inicio. alwaysOpen es false, por lo que al abrir Herramientas se cierra Papel. Las clases activeClasses e inactiveClasses personalizadas usan los nombres semánticos de texto y superficie del tema predeterminado.
La clase controla la visibilidad del panel y actualiza aria-expanded en el elemento activador. El marcado incluye aria-controls y los ID correspondientes de los paneles. Las casillas de la lista siguen en el documento cuando se contrae un panel, de modo que su estado marcado se conserva al cambiar de categoría. Contraer una sección cambia su visibilidad; no reinicia el trabajo del usuario al preparar el equipaje.
Sistema de diseño Flowbite: el progreso se calcula a partir de las casillas reales
El progreso se calcula a partir de las casillas reales
Seis casillas reales representan materiales concretos para el taller. La aplicación calcula el número de elementos preparados, el siguiente elemento y el texto sobre los elementos pendientes a partir del estado marcado actual. El ancho de la barra de progreso y aria-valuenow se actualizan a partir de ese mismo recuento; así, no hay un contador independiente que pueda desincronizarse de la lista.
Las hojas de dibujo y el papel de calco son opciones separadas porque su preparación es distinta. La alfombrilla de corte corresponde a una estación compartida, y la cinta de baja adhesión incluye una advertencia sobre las superficies de las paredes. Esos detalles concretos hacen útil la categoría desplegada; el acordeón no se limita a ocultar párrafos genéricos repetidos.
Abre Papel y marca Hojas de dibujo como preparadas.
Abre Herramientas, marca Lápices y rotuladores como preparados y vuelve a Papel.
Comprueba que ambas opciones sigan seleccionadas y que el resumen indique dos de seis.
Sistema de diseño Flowbite: una instancia del panel lateral gestiona la visibilidad y la capa de fondo
Una instancia del panel lateral gestiona la visibilidad y la capa de fondo
El panel de materiales se inicializa mediante new Drawer con placement right, backdrop true y bodyScrolling false. Al abrir el panel, se llama a show; al cerrarlo, se llama a hide. La implementación nativa de Flowbite aplica las clases de posicionamiento y transición, el fondo superpuesto y los atributos de visibilidad. Esta página usa deliberadamente JavaScript API, en lugar de combinarlo con un segundo inicializador de atributos de datos para el mismo panel.
El ancho del cajón es de veinticuatro rem y usa max-w-full, por lo que sigue siendo práctico en ventanas estrechas. El contenido puede desplazarse verticalmente dentro del panel. La altura de la página depende de su contenido; h-screen del cajón es una superposición fija intencional y no crea un ciclo de altura mínima en la página integrada.
Sistema de diseño de Flowbite: añadir gestión del foco al ciclo de vida del cajón
Añade la gestión del foco al ciclo de vida del panel lateral
La devolución de llamada onShow hace que el elemento main del fondo sea inert y enfoca el campo Prepared by. onHide elimina inert y devuelve el foco a la nota Prepare materials. Un pequeño controlador de keydown recorre con Tab y Shift+Tab los controles entre el primero y el último del panel. Estas mejoras aparecen en el código fuente completo; no se presupone que las proporcione una clase de estilo.
Flowbite gestiona Escape en su cajón. Las devoluciones de llamada del ejemplo garantizan que, independientemente de cómo se cierre, el fondo vuelva a ser interactivo. El panel está etiquetado con aria-labelledby y el control de cierre tiene un nombre accesible explícito. En una aplicación real, este comportamiento debe probarse junto con sus propios portales y su enrutamiento; el nombre de una biblioteca no garantiza por sí solo la accesibilidad.
Sistema de diseño de Flowbite: validar a la persona responsable y guardar solo texto local
Valida al responsable y guarda solo texto local
El campo Prepared by es obligatorio y tiene límites de longitud mínima y máxima. Además, el controlador de envío elimina los espacios sobrantes del nombre y rechaza las entradas que solo contienen espacios en blanco. Session note es opcional y admite un máximo de 240 caracteres. El resumen de elementos pendientes se actualiza al abrir el cajón, de modo que refleja la lista de verificación actual y no un estado de preparación anterior.
Al guardar, se cierra el cajón y se anuncia una nota local con la persona responsable, la cantidad de elementos preparados y el texto opcional. No se envía ningún correo ni se crea ningún documento compartido. Las cadenas proporcionadas por el usuario se asignan mediante textContent. Al editar la lista de verificación, se borra el aviso del resultado anterior, ya que la cantidad previa podría resultar engañosa.
Sistema de diseño de Flowbite: incluir las clases generadas por la biblioteca JavaScript
Incluye las clases generadas por la biblioteca JavaScript
La entrada de Tailwind importa el tema predeterminado de Flowbite y registra flowbite/plugin. Las directivas source explícitas abarcan HTML, el módulo de la aplicación y la biblioteca ESM de Flowbite. Esta última ruta es importante: las clases que la biblioteca añade en tiempo de ejecución deben estar presentes en la hoja de estilos generada, aunque no se hayan escrito directamente en HTML al inicio.
El paquete importa Accordion y Drawer de flowbite. El ejemplo proporcionado inicializa cada instancia una sola vez, después de que exista su marcado. Las aplicaciones basadas en frameworks que montan y desmontan vistas deben vincular la configuración del ciclo de vida con la limpieza de las instancias para evitar oyentes duplicados. La página local solo se monta una vez y no tiene transiciones de rutas del lado del cliente.
Sistema de diseño de Flowbite: una guía de preparación con límites de implementación claros
Una ayuda para preparar el equipaje con límites de implementación visibles
La guía de campo muestra un acordeón con mucho contenido, estado persistente de las casillas y un flujo de trabajo con superposición. No incluye datos de inventario inventados ni resultados de compra remotos. Los seis materiales son tareas de muestra para preparar un taller, y la nota guardada permanece en la memoria mientras la página está abierta.
El tema semántico predeterminado, las clases de componentes y el comportamiento de JavaScript provienen de Flowbite; el contenido del taller, la ilustración original y las mejoras de gestión del foco son código de la aplicación. Esta separación permite al lector reutilizar una composición práctica y, al mismo tiempo, comprender qué responsabilidades cubre realmente la biblioteca.
Usa la instancia con estado de Flowbite para controlar la visibilidad del panel.
Mantén los datos de la lista de verificación y el progreso derivado en la lógica de la aplicación.
Gestiona las compras reales o la persistencia compartida solo mediante una integración explícita con un backend.
Los botones se conectan a los ID de los paneles mediante aria-controls.
El encabezado etiqueta el cajón.
La barra de progreso muestra el mismo recuento que ven los usuarios videntes.
Instancias nativas de Flowbite y estado local
Inicialización de Accordion/Drawer, además de la gestión de la lista de verificación y del foco específica de la aplicación.
javascript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Guarda la interacción proporcionada como main.js y compílala en bundle.js, como se muestra en la configuración.
Se incluyen la ventana gráfica y la carga de recursos nativos.
04
Configuración del agente para el sistema de diseño de Flowbite
Punto de partida para la implementación
Verificado con Flowbite 4.0.2 y Tailwind CSS 4.3.3. Adapta la ruta del código fuente en node_modules a la ubicación real de input.css. No se necesitan fuentes remotas.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
Una instrucción para tu proyecto
Instrucción para el agente
Usa la guía completa de preparación para talleres de Flowbite 4.0.2, incluidos el descubrimiento de fuentes de Tailwind y la inicialización nativa de Accordion y Drawer. Mantén los grupos de materiales y el estado de la lista de verificación vinculados a la guía, y valida la información de la persona responsable antes de guardar una nota local de preparación. Conserva el foco del teclado del cajón, la gestión inert del fondo y el comportamiento de cierre. Mantén la ilustración original CSS separada del tema semántico de la biblioteca. No añadas solicitudes de servicio ni envíos externos a este flujo de trabajo local de preparación.
05
Fuentes y alcance del sistema de diseño de Flowbite
Flowbite 4.0.2 con su tema predeterminado. El contenido de preparación, las ilustraciones decorativas y las mejoras de gestión del foco son originales. Las notas sobre materiales se mantienen localmente.
