Interfaz de usuario y formularios
En esta página
La interfaz pone el flujo de trabajo de la aplicación al alcance de quien la usa. OwlMeans Common combina bibliotecas de interfaz conocidas con convenciones para formularios, navegación e identidad.
Bibliotecas según su función
| Biblioteca o estándar | Función | Paquete público de OwlMeans |
|---|---|---|
| React y React DOM | Renderizar pantallas interactivas de la aplicación. | @owlmeans/web-client |
| shadcn/ui | Proporcionar componentes de interfaz que utiliza la familia actual de paneles web. | @owlmeans/web-panel |
| Radix UI | Proporcionar elementos básicos de interfaz, como cuadros de diálogo, menús y controles de selección. | @owlmeans/web-panel |
| Tailwind CSS | Facilitar estilos coherentes mediante clases de utilidad. | @owlmeans/web-panel |
| Lucide | Proporcionar iconos de interfaz reutilizables. | @owlmeans/web-panel |
| React Hook Form y adaptadores de resolución | Gestionar los campos de los formularios y conectarlos con la validación. | @owlmeans/client-panel |
| i18next | Permitir traducir los textos de la aplicación. | @owlmeans/client-i18n |
| Sonner | Mostrar notificaciones de la aplicación. | @owlmeans/web-panel |
| react-dropzone | Facilitar las interacciones para seleccionar y subir archivos. | @owlmeans/web-client |
| qrcode.react | Renderizar códigos QR cuando una función los necesite. | @owlmeans/web-panel |
Estas dependencias y estándares forman parte del ecosistema público. El conjunto exacto de dependencias de una app depende del proyecto generado y de las funciones desarrolladas; no todas las aplicaciones necesitan todas las bibliotecas de esta lista.
Uso en un proyecto
- Describa el comportamiento que necesita en la especificación o en la historia.
- Pida al agente que use las convenciones de OwlMeans Common ya presentes en el proyecto.
- Consulte la documentación pública del paquete correspondiente cuando quiera entender una dependencia.
- Pruebe el comportamiento en la vista previa y revise las reglas de acceso.
Pida al agente un formulario de contacto con etiquetas, mensajes claros de error en los campos y navegación por teclado. Pruebe con un correo electrónico no válido y compruebe que el formulario explica qué debe corregir.
Una interfaz de usuario (UI) es el conjunto de pantallas y controles que utiliza una persona. Una biblioteca de formularios ayuda a mantener la coherencia de los valores introducidos, los errores y el comportamiento al enviar el formulario.
Lea OwlMeans Tech Concept para conocer la arquitectura de la aplicación y continúe con otro agente para conocer cómo se trabaja con el entorno del agente.
Ejemplo de aplicación
Categoría: CRM y gestión de clientes. Ejemplo: un CRM para un equipo pequeño con contactos asignados a responsables y acceso para gerentes.
Nombres y marcas
Los nombres shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone y qrcode.react, así como sus marcas asociadas, siguen perteneciendo a sus respectivos titulares o responsables de los proyectos. Las referencias identifican productos, estándares o ejemplos de código fuente. La documentación de OwlMeans no implica patrocinio ni respaldo por parte de esos titulares.