Es frecuente que alumnos de mi curso de Blazor en CampusMVP me pregunten sobre la existencia de bibliotecas de componentes que les ayuden a desarrollar aplicaciones profesionales más rápidamente, por lo que no podía pasar por alto la noticia que publicaban hace unos días los amigos de Radzen en su cuenta de Twitter:
En efecto, ¡los componentes para Blazor de Radzen han pasado a ser open source y distribuidos bajo licencia MIT!
Para los que no los conozcan, Radzen es uno de los referentes en el mundo de las herramientas y componentes visuales para el desarrollo rápido de aplicaciones web, pero lo que nos ocupa ahora son el conjunto de más de 60 componentes visuales para Blazor Server y WebAssembly que ahora podremos utilizar de forma totalmente gratuita (bueno, aunque existen opciones para pagar por servicios de soporte profesional).
¿Qué componentes podemos encontrar ahí?
Radzen es una de las suites de componentes más extensa, por lo que podemos encontrar componentes Blazor prácticamente para todo. Aunque para haceros una idea lo mejor es que acudáis al sitio web de demostración, más o menos se incluye lo siguiente:
|
|
¿Cómo utilizarlos?
Desde el repositorio Radzen Blazor Components de GitHub podríamos descargar el código fuente completo de los componentes e incluirlos directamente en nuestra solución, aunque normalmente lo más sencillo será utilizarlos instalando el paquete NuGet Radzen.Blazor
en nuestro proyecto Blazor.
Hecho esto, para mayor comodidad, es interesante incluir en el archivo _Imports.razor
general los espacios de nombres donde se incluyen los componentes, así los tendremos siempre a mano:
@using Radzen
@using Radzen.Blazor
A continuación, hay que incluir en la página contenedora del proyecto Blazor, ya sea _Host.cshtml
(Blazor Server) o index.html
(WebAssembly) las referencias a los scripts utilizados por los componentes Radzen, justo antes del </body>
que cierra el cuerpo:
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
De la misma forma, en esa misma página hay que añadir la hoja de estilos del tema visual utilizar:
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
La versión gratuita de los componentes, además del tema por defecto, incluye tres temas adicionales: dark, humanistic y software, y las versiones de pago ofrecen algunos temas premium más. Para usar alguno de estos temas, lo único que hay que hacer es sustituir el nombre en el <link>
anterior, por ejemplo software-base.css
.
Algunos componentes, como los cuadros de diálogo, menús contextuales, o tooltips requieren el registro de servicios en el inyector de dependencias. Por tanto, es buena idea dejarlos preparados desde un principio en la clase Startup
de Blazor Server o en Program
de Blazor WebAssembly:
// Blazor Server:
services.AddScoped<DialogService>();
services.AddScoped<NotificationService>();
services.AddScoped<TooltipService>();
services.AddScoped<ContextMenuService>();
// Blazor Wasm:
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();
¡Y esto es todo! Con estos simples pasos ya tenemos toda la potencia de los componentes Radzen a nuestra disposición 🙂
Publicado en Variable not found.
Publicado por José M. Aguilar a las 8:05 a. m.
Etiquetas: blazor, blazorserver, blazorwasm, componentes
3 Comentarios:
Jose Maria excelente ayuda, vamos a probarlo y gracias por la sugerencia, como siempre excelentes aportes a la comunidad.
buenos días.
Que diferencia existe entre un componente drowdown y drowdowngrid
Hola!
Nada más viendo el nombre seguro que te puedes hacer una idea ;) El dropdown es un desplegable con una lista de opciones, mientras que dropdowndatagrid muestra las opciones mediante una rejilla que puede usar paginación, varias columnas, etc.
En la web de Radzen tienes ejemplos de uso:
- Dropdown
- Dropdown Datagrid
Saludos!
Enviar un nuevo comentario