MudBlazor

Componentes de diseño de material para Blazor

Mudblazor es un ambicioso marco de componentes de diseño de material para Blazor con énfasis en la facilidad de uso y la estructura clara. Es perfecto para los desarrolladores de .NET que desean construir rápidamente aplicaciones web sin tener que luchar con CSS y JavaScript. Mudblazor, escrito completamente en C#, le permite adaptarse, arreglar o extender el marco. Hay muchos ejemplos en la documentación, lo que facilita la comprensión y el aprendizaje de barro.

Documentación y demostración

• Barblazor.com
• Prueba.mudblazor.com

¿Por qué el mudblazor es tan exitoso?

• Diseño gráfico limpio y estético basado en el diseño de materiales.
• Estructura clara y fácil de entender.
• Buena documentación con muchos ejemplos y fragmentos de fuente.
• Todos los componentes se escriben completamente en C#, no se permite JavaScript (excepto cuando sea absolutamente necesario).
• Los usuarios pueden hacer hermosas aplicaciones sin necesidad de CSS (pero, por supuesto, también pueden usar CSS).
• No hay dependencias de otras bibliotecas de componentes, 100% de control sobre componentes y características.
• ¡Estabilidad! Nos esforzamos por una cobertura de prueba completa.
• Lanzamientos a menudo para que los desarrolladores puedan obtener sus PR y soluciones de manera oportuna.

Requisitos previos

Flaza de barro	.NETO	Apoyo
1.xx - 2.0.x	.NET 3.1	Terminó el 03/2021
5.xx	.NET 5	Terminó el 01/2022
6.xx	.NET 6, .NET 7, .NET 8	Terminó 01/2025
7.xx	.NET 7, .NET 8	✔️
8.xx	.NET 8, .NET 9	✔️

Advertencia

1. La representación estática no es compatible, aprenda más.
2. No podemos garantizar la compatibilidad con los navegadores que ya no mantienen sus editores. Para la mejor experiencia, use un navegador actualizado: consulte las plataformas compatibles con Blazor.

Estadísticas

Que contribuye

¡Gracias por querer contribuir!
Las contribuciones de la comunidad son lo que hace que Mudblazor sea exitoso.

Si está familiarizado con tecnologías como C#, Blazor, JavaScript o CSS, y desea devolver algo, ¡considere enviar una solicitud de extracción! Intentamos fusionar todas las correcciones de errores no rompientes y deliberamos el valor de las nuevas características para la comunidad. Tenga en cuenta que no hay garantía de que su PR se fusione, por lo que si desea estar seguro antes de invertir el trabajo, no dude en comunicarse con el equipo primero.

Consulte las pautas de contribución para comprender nuestros objetivos y obtener más información sobre las partes internas del proyecto.

Empezando

Tenemos plantillas prefabricadas disponibles en el repositorio de mudblazor.templates.

Las instrucciones de instalación completas se pueden encontrar en nuestro sitio web.

Guía de instalación rápida

Paquete de instalación

 dotnet add package MudBlazor

Agregue lo siguiente a _Imports.razor

 @ using MudBlazor

Agregue lo siguiente a MainLayout.razor o App.razor

< MudThemeProvider />
< MudPopoverProvider />
< MudDialogProvider />
< MudSnackbarProvider />

Agregue lo siguiente a su sección head HTML, es index.html o _Layout.cshtml / _Host.cshtml / App.razor dependiendo de si está ejecutando webassembly o servidor

< link href = " https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap " rel = " stylesheet " />
< link href = " _content/MudBlazor/MudBlazor.min.css " rel = " stylesheet " />

A continuación, agregue lo siguiente al script Blazor predeterminado al final del body

< script src = " _content/MudBlazor/MudBlazor.min.js " ></ script >

Agregue lo siguiente a las secciones relevantes del Program.cs

 using MudBlazor . Services ; 

 builder . Services . AddMudServices ( ) ;

Uso

< MudText Typo = " Typo.h6 " >
    MudBlazor is @Text
</ MudText >

< MudButton Variant = " Variant.Filled " 
           Color = " Color.Primary " 
           OnClick = " ButtonOnClick " >
    @ButtonText
</ MudButton >

@code {
    string Text { get ; set ; } = " ???? " ;
    string ButtonText { get ; set ; } = " Click Me " ;
    int ClickCount { get ; set ; }

    void ButtonOnClick ()
    {
        ClickCount += 1 ;
        Text = $" Awesome x { ClickCount } " ;
        ButtonText = " Click Me Again " ;
    }
}