MudBlazor

Komponen Desain Bahan untuk Blazor

Mudblazor adalah kerangka komponen desain material yang ambisius untuk Blazor dengan penekanan pada kemudahan penggunaan dan struktur yang jelas. Ini sangat cocok untuk pengembang .NET yang ingin membangun aplikasi web dengan cepat tanpa harus berjuang dengan CSS dan JavaScript. Mudblazor, ditulis sepenuhnya dalam C#, memberdayakan Anda untuk beradaptasi, memperbaiki atau memperluas kerangka kerja. Ada banyak contoh dalam dokumentasi, yang membuat pemahaman dan belajar Mudblazor sangat mudah.

Dokumentasi & Demo

• Mudblazor.com
• Try.mudblazor.com

Mengapa Mudblazor begitu sukses?

• Desain grafis bersih dan estetika berdasarkan desain material.
• Struktur yang jelas dan mudah dimengerti.
• Dokumentasi yang baik dengan banyak contoh dan cuplikan sumber.
• Semua komponen ditulis sepenuhnya dalam C#, tidak ada JavaScript yang diizinkan (kecuali jika benar -benar diperlukan).
• Pengguna dapat membuat aplikasi yang indah tanpa memerlukan CSS (tetapi tentu saja dapat menggunakan CSS juga).
• Tidak ada dependensi pada pustaka komponen lain, kontrol 100% atas komponen dan fitur.
• Stabilitas! Kami berusaha untuk cakupan tes lengkap.
• Rilis seringkali sehingga pengembang bisa mendapatkan PR dan perbaikan mereka secara tepat waktu.

Prasyarat

Mudblazor	.BERSIH	Mendukung
1.xx - 2.0.x	.NET 3.1	Berakhir 03/2021
5.xx	.Net 5	Berakhir 01/2022
6.xx	.Net 6, .net 7, .net 8	Berakhir 01/2025
7.xx	.Net 7, .net 8	✔️
8.xx	.Net 8, .net 9	✔️

Peringatan

1. Rendering statis tidak didukung - pelajari lebih lanjut.
2. Kami tidak dapat menjamin kompatibilitas dengan browser yang tidak lagi dikelola oleh penerbit mereka. Untuk pengalaman terbaik, gunakan browser terkini-lihat platform yang didukung Blazor.

Statistik

Berkontribusi

Terima kasih telah ingin berkontribusi!
Kontribusi dari komunitas adalah apa yang membuat Mudblazor sukses.

Jika Anda terbiasa dengan teknologi seperti C#, Blazor, JavaScript, atau CSS, dan ingin mengembalikan sesuatu, silakan pertimbangkan untuk mengirimkan permintaan tarik! Kami mencoba untuk menggabungkan semua perbaikan bug yang tidak memecahkan dan akan membahas nilai fitur baru untuk masyarakat. Harap dicatat tidak ada jaminan PR Anda akan digabungkan, jadi jika Anda ingin memastikan sebelum menginvestasikan pekerjaan, jangan ragu untuk menghubungi tim terlebih dahulu.

Lihatlah pedoman kontribusi untuk memahami tujuan kami dan pelajari lebih lanjut tentang internal proyek.

Memulai

Kami memiliki templat premade yang tersedia di repositori Mudblazor.Templates.

Instruksi instalasi lengkap dapat ditemukan di situs web kami.

Panduan Instalasi Cepat

Instal Paket

 dotnet add package MudBlazor

Tambahkan yang berikut ke _Imports.razor

 @ using MudBlazor

Tambahkan yang berikut ke MainLayout.razor atau App.razor

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

Tambahkan yang berikut ke bagian head html Anda, baik index.html atau _Layout.cshtml / _Host.cshtml / App.razor tergantung pada apakah Anda menjalankan webassembly atau 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 " />

Selanjutnya, tambahkan yang berikut ke skrip Blazor default di ujung body

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

Tambahkan yang berikut ini ke bagian yang relevan dari Program.cs

 using MudBlazor . Services ; 

 builder . Services . AddMudServices ( ) ;

Penggunaan

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