MudBlazor

Componentes de design de material para blazor

Mudblazor é uma estrutura ambiciosa do componente de design de material para o Blazor, com ênfase na facilidade de uso e na estrutura clara. É perfeito para desenvolvedores .NET que desejam criar rapidamente aplicativos da Web sem ter que lutar com o CSS e o JavaScript. Mudblazor, sendo escrito inteiramente em C#, o capacita a adaptar, consertar ou estender a estrutura. Existem muitos exemplos na documentação, o que facilita a compreensão e o aprendizado do Mudblazor.

Documentação e demonstração

• Mudblazor.com
• Try.mudblazor.com

Por que Mudblazor é tão bem -sucedido?

• Design gráfico limpo e estético com base no design de material.
• Estrutura clara e fácil de entender.
• Boa documentação com muitos exemplos e trechos de origem.
• Todos os componentes são escritos inteiramente em C#, não é permitido JavaScript (exceto quando absolutamente necessário).
• Os usuários podem criar aplicativos bonitos sem precisar de CSS (mas é claro que também podem usar o CSS).
• Sem dependências de outras bibliotecas de componentes, controle de 100% sobre componentes e recursos.
• Estabilidade! Nós nos esforçamos para uma cobertura completa do teste.
• Os lançamentos geralmente para que os desenvolvedores possam obter seus PRs e correções em tempo hábil.

Pré -requisitos

Mudblazor	.LÍQUIDO	Apoiar
1.xx - 2.0.x	.NET 3.1	Terminou em 03/2021
5.xx	.NET 5	Terminou em 01/2022
6.xx	.NET 6, .NET 7, .NET 8	Terminou em 01/2025
7.xx	.NET 7, .NET 8	✔️
8.xx	.NET 8, .NET 9	✔️

Aviso

1. A renderização estática não é suportada - aprenda mais.
2. Não podemos garantir a compatibilidade com os navegadores que não são mais mantidos por seus editores. Para a melhor experiência, use um navegador atualizado-consulte plataformas suportadas por Blazor.

Estatísticas

Contribuindo

Obrigado por querer contribuir!
As contribuições da comunidade são o que torna o Mudblazor bem -sucedido.

Se você estiver familiarizado com tecnologias como C#, Blazor, JavaScript ou CSS e deseja devolver algo, considere enviar uma solicitação de tração! Tentamos mesclar todas as bugs sem quebra e deliberará o valor de novos recursos para a comunidade. Observe que não há garantia de que seu PR será mesclado; portanto, se você quiser ter certeza antes de investir o trabalho, entre em contato com a equipe primeiro.

Confira as diretrizes de contribuição para entender nossos objetivos e saber mais sobre os internos do projeto.

Começando

Temos modelos pré -fabricados disponíveis no repositório Mudblazor.Templates.

As instruções completas de instalação podem ser encontradas em nosso site.

Guia de instalação rápida

Instale o pacote

 dotnet add package MudBlazor

Adicione o seguinte a _Imports.razor

 @ using MudBlazor

Adicione o seguinte ao MainLayout.razor ou App.razor

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

Adicione o seguinte à sua seção head HTML, é index.html ou _Layout.cshtml / _Host.cshtml / App.razor dependendo de você estar executando WebAssembly ou 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 " />

Em seguida, adicione o seguinte ao script padrão padrão no final do body

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

Adicione o seguinte às seções relevantes do 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 " ;
    }
}