MudBlazor

Materialdesignkomponenten für Blazor

Mudblazor ist ein ehrgeiziges Material für das Material Design -Komponenten für Blazor mit Schwerpunkt auf Benutzerfreundlichkeit und klarer Struktur. Es ist perfekt für .NET -Entwickler, die schnell Webanwendungen erstellen möchten, ohne mit CSS und JavaScript zu kämpfen zu haben. Mudblazor, der vollständig in C#geschrieben ist, befähigt Sie, das Rahmen anzupassen, zu reparieren oder zu erweitern. Es gibt viele Beispiele in der Dokumentation, die das Verständnis und das Lernen von Schlammblazor sehr einfach machen.

Dokumentation & Demo

• Mudblazor.com
• Try.mudblazor.com

Warum ist Mudblazor so erfolgreich?

• Sauberes und ästhetisches Grafikdesign basierend auf Materialdesign.
• Klar und leicht zu verstehen.
• Gute Dokumentation mit vielen Beispielen und Quellenausschnitten.
• Alle Komponenten sind vollständig in C#geschrieben, kein JavaScript zulässig (außer wenn es absolut notwendig ist).
• Benutzer können schöne Apps erstellen, ohne CSS zu benötigen (können sie natürlich auch CSS verwenden).
• Keine Abhängigkeiten von anderen Komponentenbibliotheken, 100% Kontrolle über Komponenten und Funktionen.
• Stabilität! Wir streben nach einer vollständigen Testabdeckung.
• Veröffentlichungen oft, damit Entwickler ihre PRs und Fixes rechtzeitig erhalten können.

Voraussetzungen

Schlammblazor	.NETTO	Unterstützung
1.xx - 2.0.x	.NET 3.1	Ende 03/2021
5.xx	.NET 5	Ende 01.01.2022
6.xx	.NET 6, .NET 7, .NET 8	Ende 01.01.2025
7.xx	.Net 7, .net 8	✔️
8.xx	.Net 8, .net 9	✔️

Warnung

1. Das statische Rendering wird nicht unterstützt - mehr erfahren.
2. Wir können die Kompatibilität mit Browsern nicht mehr garantieren, die von ihren Verlegern nicht mehr gepflegt werden. Verwenden Sie für die beste Erfahrung einen aktuellen Browser-siehe Blazor unterstützte Plattformen.

Statistiken

Beitragen

Danke, dass du einen Beitrag leisten willst!
Beiträge aus der Gemeinschaft machen Mudblazor erfolgreich.

Wenn Sie mit Technologien wie C#, Blazor, JavaScript oder CSS vertraut sind und etwas zurückgeben möchten, sollten Sie eine Pull -Anfrage einreichen! Wir versuchen, alle nicht sprechenden Fehler zusammenzuführen, und werden den Wert neuer Merkmale für die Community überlegen. Bitte beachten Sie, dass Ihre PR keine Garantie gibt. Wenn Sie also sicher sein möchten, bevor Sie die Arbeit investieren, können Sie sich zunächst an das Team wenden.

Schauen Sie sich die Beitragsrichtlinien an, um unsere Ziele zu verstehen und mehr über die Interna des Projekts zu erfahren.

Erste Schritte

Wir haben vorgefertigte Vorlagen im Mudblazor. Templates Repository.

Vollständige Installationsanweisungen finden Sie auf unserer Website.

Schnellinstallationshandbuch

Paket installieren

 dotnet add package MudBlazor

Fügen Sie Folgendes zu _Imports.razor hinzu

 @ using MudBlazor

Fügen Sie Folgendes zum MainLayout.razor oder App.razor hinzu

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

Fügen Sie Ihrem HTML head Folgendes hinzu. Es ist entweder index.html oder _Layout.cshtml / _Host.cshtml / App.razor je nachdem, ob Sie WebAssembly oder Server ausführen

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

Fügen Sie als nächstes das Standard -Blazor -Skript am Ende des body hinzu

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

Fügen Sie Folgendes zu den entsprechenden Program.cs hinzu.cs

 using MudBlazor . Services ; 

 builder . Services . AddMudServices ( ) ;

Verwendung

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