En esta ocasión, he hecho una mezcla de productos que considero es muy fácil, que los desarrolladores los utilicen, ya que considero que está muy generalizado el uso de Tailwind CSS y Daisy UI.

En este ejemplo a la solución S025 – integración con un DataGrid he añadido la representación del DataGrid en un formato Calendario, en concreto el Calendar de SVAR UI.

Objetivo

Estudio de integración de la solución de SVAR Calendar en un proyecto construido en Daisy UI y Tailwind CSS.

El resultado me ha encantado, por todo (funcionalidad, aspecto, facilidad, etc.).

DEMO: https://fhumanes.com/svarcalendar-svelte/

Si estas interesado en este artículo sigue leyéndolo en este enlace.

Os referí en el artículo S-025   que había probado la solución de ApexGrid, que podría ser la solución de DataGrid para cualquier proyecto, pero que había desistido de utilizarla porque no vi cómo se podía adaptar al español.

Al cabo de pocos días, consulté otra vez la web de ApexGrid e identifiqué que se había publicado la versión 3.3.0 y que se había solucionado este problema y además, se había renovado la web de documentación, estando mucho mejor.

Completé la demo que estaba haciendo y mi impresión es que todavía hay muchos aspectos que no entiendo de la solución, por ejemplo, que las acciones a nivel de registro, el típico CRUD, no esté disponible en la versión Community y su en la Profesional, por ello, en mis proyectos voy a seguir utilizando el DataGrid que he explicado en el artículo S-025 . Este artículo lo publico porque es posible que pueda ayudar a quién se inicia en el uso de ApexGrid en Svelte, ya que la documentación, no explica nada de este entorno.

Objetivo

Seleccionar un DataGrid «potente» para integrarlo en las app’s de los desarrollos en Svelte.

DEMO: https://fhumanes.com/apexgrid-svelte/

Para que salga el «popup» de las acciones hay que seleccionar el checkbox (casilla de verificación) o pulsar la tecla de «espacio».

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

Aquel que me haya seguido desde 2017, sabrá que me gusta mucho la solución de AnyChart, pero que ésta es de pago, aunque los que trabajamos con PHPRunner, la licencia de PHPRunner incluye una licencia de AnyChart para integrar gráficos en sus desarrollos.

Este producto ApexCharts, es también un producto de muchas posibilidades y de excelente calidad, que dispone de una licencia Community, por lo que podremos utilizarlo en casi todas las posibilidades.

Aparte de analizar los tipos de gráficos, sus posibilidades, etc., se quiere probar su funcionamiento en Svelte 5 con Runas y su integración con TailWind CSS y Daisy UI.

Objetivo

Construir un ejemplo de aplicativo donde integremos ApexCharts, TailWind CSS y Daisy UI, y analizar las posibilidades de construcción de DashBoard.

DEMO: https://fhumanes.com/apexchart-svelte/

Si te interesa este artículo, sigue leyéndolo en este enlace. 

Una de las cosas que se repiten muchísimas veces es disponer de un «DataGrid», para mostrar y navegar por los elementos de una tabla.

En los ejemplos hasta ahora mostrados, he utilizados soluciones hechas 100% con código Svelte 5 y en otras ocasiones el DataGrid de alguna librería como las de SVAR. He intentado utilizar ApexGrid, como DataGrid general y reutilizable para «todo», pero me he encontrado que sólo me funcionaba en inglés y no he sido capaz de ponerlo en otros idiomas.

Objetivo

Partiendo del DataGrid hecho con código Svelte 5 y utilizando Daisy UI, realizar un componente de DataGrid que pueda reutilizar en los proyectos de cara a simplificar,  optimizar y minimizar el código necesario para disponer de DataGrid para las tablas de un proyecto.

DEMO: https://fhumanes.com/datagrid-svelte/

Si estás interesado en este artículo, sigue leyéndolo en este enlace.

He vuelto a realizar, otra vez, el ejemplo de la Gestión de Videos, que ya he realizado muchas otras veces.

En este caso, sólo he utilizado Daisy UI + Tailwind CSS, porque creo que es una de las combinaciones que más se utilizan en los desarrollos de framework de JavaScript y que mejor se ajustan al aprendizaje de los que se inician en ellos.

También, quería resolver el uso de «drawer» (ventanas emergentes que aparecen por los bordes de la pantalla), que incorpora Daisy UI.

Objetivo

Obtener un ejemplo claro, potente y sencillo de utilización de Daisy UI + Tailwind CSS, utilice los «drawer» de Daisy UI.

Deseo utilizar esta base para realizar ejemplos de WEB Components y Tailwind CSS es excelente para la realización de APP de escritorio que se adapten perfectamente al uso en móvil.

DEMO: https://fhumanes.com/daisy-svelte/

Si te interesa este artículo, sigue leyéndolo en este enlace.