MudBlazor

Composants de conception de matériaux pour Blazor

Mudblazor est un cadre de composant de conception de matériaux ambitieux pour Blazor en mettant l'accent sur la facilité d'utilisation et la structure claire. Il est parfait pour les développeurs .NET qui souhaitent créer rapidement des applications Web sans avoir à lutter avec CSS et JavaScript. Mudblazor, entièrement écrit en C #, vous permet d'adapter, de réparer ou d'étendre le cadre. Il existe de nombreux exemples dans la documentation, ce qui facilite la compréhension et l'apprentissage de Mudblazor.

Documentation et démo

• Mudblazor.com
• Try.mudblazor.com

Pourquoi Mudblazor est-il si réussi?

• Design graphique propre et esthétique basé sur la conception des matériaux.
• Structure claire et facile à comprendre.
• Bonne documentation avec de nombreux exemples et extraits de source.
• Tous les composants sont entièrement écrits en C #, aucun JavaScript n'est autorisé (sauf si vous êtes absolument nécessaire).
• Les utilisateurs peuvent créer de belles applications sans avoir besoin de CSS (mais ils peuvent bien sûr utiliser CSS aussi).
• Aucune dépendance sur les autres bibliothèques de composants, 100% contrôlent les composants et les fonctionnalités.
• Stabilité! Nous nous efforçons d'une couverture de test complète.
• Souvent, afin que les développeurs puissent obtenir leur PRS et correctement en temps opportun.

Condition préalable

Laz-blazor	.FILET	Soutien
1.xx - 2.0.x	.NET 3.1	Terminé le 03/2021
5.xx	.Net 5	Terminé le 01/2022
6.xx	.Net 6, .net 7, .net 8	Terminé le 01/2025
7.xx	.Net 7, .net 8	✔️
8.xx	.Net 8, .net 9	✔️

Avertissement

1. Le rendu statique n'est pas pris en charge - en savoir plus.
2. Nous ne pouvons garantir la compatibilité avec les navigateurs qui ne sont plus entretenus par leurs éditeurs. Pour la meilleure expérience, utilisez un navigateur à jour - voir les plates-formes prises en charge Blazor.

Statistiques

Contributif

Merci de vouloir contribuer!
Les contributions de la communauté sont ce qui fait le succès de Mudblazor.

Si vous connaissez des technologies comme C #, Blazor, JavaScript ou CSS, et que vous souhaitez rendre quelque chose, veuillez envisager de soumettre une demande de traction! Nous essayons de fusionner tous les bugfix non révolutionnaires et délibérerons la valeur des nouvelles fonctionnalités de la communauté. Veuillez noter qu'il n'y a aucune garantie que votre PR sera fusionné, donc si vous voulez être sûr avant d'investir le travail, n'hésitez pas à contacter l'équipe en premier.

Consultez les directives de contribution pour comprendre nos objectifs et en savoir plus sur les internes du projet.

Commencer

Nous avons des modèles préfabriqués disponibles dans le référentiel MudBlazor.Templates.

Des instructions d'installation complètes peuvent être trouvées sur notre site Web.

Guide d'installation rapide

Installer le package

 dotnet add package MudBlazor

Ajoutez ce qui suit à _Imports.razor

 @ using MudBlazor

Ajoutez ce qui suit au MainLayout.razor ou App.razor

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

Ajoutez ce qui suit à votre section HTML head , c'est soit index.html ou _Layout.cshtml / _Host.cshtml / App.razor selon que vous exécutez WebAssembly ou Server

< 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 " />

Ensuite, ajoutez ce qui suit au script Blazor par défaut à la fin du body

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

Ajoutez ce qui suit aux sections pertinentes de Program.cs

 using MudBlazor . Services ; 

 builder . Services . AddMudServices ( ) ;

Usage

< 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 " ;
    }
}