Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como popup

Shadcn/ui popup dialog

  ¿Tiene shadcn ui algún popup dialog que adentro pueda tener cualquier HTML y JSX? Sí, shadcn/ui incluye un componente de Dialog que funciona como un popup modal y dentro de su contenido ( DialogContent ) podés renderizar cualquier HTML o JSX sin restricciones. Está construido sobre los primitives de Radix UI, lo que garantiza accesibilidad, manejo de foco y soporte para teclado. 🔹 Cómo funciona el Dialog en shadcn/ui Componentes principales : Dialog : contenedor raíz. DialogTrigger : define el elemento que abre el popup. DialogContent : el área del popup donde podés poner cualquier HTML/JSX. DialogHeader , DialogTitle , DialogDescription : opcionales para estructurar el contenido. DialogFooter : opcional para botones de acción. DialogClose : para cerrar el popup. Flexibilidad : Dentro de DialogContent podés incluir formularios, inputs, listas, imágenes, componentes personalizados, incluso otros hooks de React. No hay limitación: es un contenedor React normal. 🔹 Ejemplo prá...

Mostrar el resultado de una operación sin recargar la página

 Quiero mostrar siempre los mensajes de error y de éxito en un popup de shadcn/ui que esté en la misma página donde se cargaron los datos. En el caso del odontograma, el popup tiene que aparecer encima del canvas donde se dibuja el odontograma. Necesito que en vez de hacer un post que cambie de página, se quede en la misma página, y recién después de aceptar el mensaje de éxito, salga de la página donde estaba. ¿Es una estrategia de UI/UX bastante común? ¡Esa es una excelente y moderna estrategia de UI/UX ! De hecho, el patrón de mostrar la retroalimentación (éxito/error) en un modal o popup en la misma página, y solo navegar después de una acción de confirmación , es la práctica recomendada en las aplicaciones web dinámicas (SPA - Single Page Applications). ¿Por qué esta estrategia es superior en tu caso? Preservación del Estado (Odontograma): En tu caso particular, al guardar el odontograma (que es un canvas con estado complejo), una recarga de página (lo que ocurre en un POST...