ant design blazor

Blazor desain semut

Serangkaian komponen UI kelas perusahaan yang kaya berdasarkan desain semut dan Blazor.

Bahasa Inggris | 简体中文

Fitur

• ? UI kelas perusahaan yang dirancang untuk aplikasi web.
• ? Satu set komponen blazor berkualitas tinggi di luar kotak.
• ? Mendukung interaksi UI sisi-sisi berbasis WebAssembly berbasis Websembly dan sinyal-Sinyr.
• ? Mendukung Aplikasi Web Progresif (PWA).
• ? Bangun dengan C#, bahasa statis multi-paradigma untuk pengalaman pengembangan yang efisien.
• ? Dukungan internasionalisasi untuk lusinan bahasa.
• ? Integrasi mulus dengan proyek MVC dan Razor Pages Asp.NET Core.

? Contoh online

Hosting statis WebAssembly di:

• Situs Dokumen
• Dasbor Sistem Perusahaan

? Dukungan Lingkungan

• Mendukung .NET Core 3.1 / .NET 5 / .NET 6 / .NET 7 / .NET 8 / .NET 9.
• Mendukung penyebaran file statis WebAssembly.
• Mendukung 4 mesin browser utama, dan Internet Explorer 11+ (hanya Blazor Server)
• Mendukung .NET Maui / WPF / Windows Forms dan beban kerja hibrida Blazor lainnya.
• Mendukung lingkungan berbasis standar elektron dan standar lainnya.

Karena pembatasan WebAssembly, Blazor WebAssembly tidak mendukung IE Browser, tetapi Blazor Server mendukung IE 11 † dengan polyfill tambahan. Lihat dokumentasi resmi.

Dari .NET 5, IE 11 tidak lagi didukung secara resmi. Lihat Blazor: Dukungan browser yang diperbarui. Dukungan tidak resmi disediakan oleh Blazor.Polyfill Community Project.

? Versi saat ini

• Melepaskan:

• Malam:

  Unduh Build Nightly terbaru kami

? Spesifikasi Desain

Sinkronisasi secara teratur dengan spesifikasi desain semut resmi, Anda dapat memeriksa log sinkronisasi online.

Oleh karena itu, Anda dapat menggunakan gaya tema khusus desain semut secara langsung.

Sebelum rilis 1.0, kami hanya akan menyinkronkan gaya ANTD 4.x.

? Panduan Instalasi

Prasyarat

• Instal .NET Core SDK 3.1.300 atau lebih baru, .NET 8 bahkan lebih baik.

Opsi 1: Buat proyek baru dari Template Baru Dotnet

Kami telah menyediakan template dotnet new untuk membuat proyek boilerplate di luar kotak:

• Instal template

  $ dotnet new --install AntDesign.Templates

• Buat proyek boilerplate dengan template

  $ dotnet new antdesign -o MyAntDesignApp

Opsi untuk template ：

Opsi	Keterangan	Jenis	Bawaan
-f | --full	Jika ditentukan, hasilkan semua halaman Ant Design Pro	bool	PALSU
-ho | --host	Tentukan model hosting	'Webapp' | 'Wasm' | 'Server'	'Webapp'
--styles	Apakah menggunakan nodej dan lebih sedikit untuk mengkompilasi tema khusus Anda.	css | less	css
--no-restore	Jika ditentukan, lewati pemulihan otomatis proyek saat membuat	bool	PALSU

Opsi 2: Impor Blazor Desain Ant ke proyek yang ada

• Buka folder proyek aplikasi dan instal referensi paket nuget

  $ dotnet add package AntDesign

• Daftarkan Layanan di Program.cs

   builder . Services . AddAntDesign ( ) ;

  atau Startup.cs

   services . AddAntDesign ( ) ;

• Tambahkan namespace di _Imports.razor

   @using AntDesign

• Memperkenalkan file CSS dan JS di tempat yang sesuai. Proyek WebApp diperkenalkan di App.razor, dan proyek WebAssembly diperkenalkan di Index.html

    < link href =" _content/AntDesign/css/ant-design-blazor.css " rel =" stylesheet " >
    < script src =" _content/AntDesign/js/ant-design-blazor.js " > </ script >

• Untuk menampilkan komponen pop-up secara dinamis, Anda perlu menambahkan komponen <AntContainer /> di App.razor .

  • Untuk Blazor Webapp, Anda juga perlu menentukan mode render ke <Routes /> untuk interaktivitas.

  <Routes @rendermode="RenderMode.InteractiveAuto" />            <-- specify the rendermode 
  + <AntContainer @rendermode="RenderMode.InteractiveAuto" />    <-- add this component 

  • Untuk aplikasi Blazor Legacy, cukup tambahkan baris kode:

  <Router AppAssembly="@typeof(MainLayout).Assembly">
      <Found Context="routeData">
          <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
      </Found>
      <NotFound>
          <LayoutView Layout="@typeof(MainLayout)">
              <Result Status="404" />
          </LayoutView>
      </NotFound>
  </Router>
  
  +  <AntContainer />   <-- add this component 

• Akhirnya, dapat dirujuk dalam komponen .razor !

  < Button Type = " @ButtonType.Primary " >Hello World!</ Button >

? Perkembangan

Gitpod

Klik tombol di bawah ini untuk memulai ruang kerja baru untuk pengembangan secara gratis.

Lokal

• Instal .NET Core SDK 9.0.100 atau lebih baru.

• Instal Node.js (hanya untuk membuat file gaya dan file naskah yang dapat dioperasikan)

• Kloning untuk Pengembangan Lokal

  $ git clone https://github.com/ant-design-blazor/ant-design-blazor.git
  $ cd ant-design-blazor
  $ npm install
  $ dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj
  $ npm start

• Kunjungi https: // localhost: 5001 di browser yang didukung dan periksa dokumentasi pengembangan lokal untuk detailnya.

  Visual Studio 2022 direkomendasikan untuk pengembangan.

? Tautan

• Dokumentasi Blazor Desain Semut
• Dokumentasi Blazor Resmi
• MS Learn for Blazor Tutorial

? Peta jalan

Lihatlah masalah ini untuk mempelajari tentang rencana pengembangan kami untuk rilis 1.0.

Anda juga dapat menemukan berita terbaru tentang fitur yang akan kami terapkan di masa depan dengan gaya ANTD5.0.

? Berkontribusi

Jika Anda ingin berkontribusi, jangan ragu untuk membuat permintaan tarik, atau memberi kami laporan bug.

? Sumbangan

Proyek ini adalah proyek open source berlisensi MIT. Untuk mencapai pengembangan proyek yang lebih baik dan berkelanjutan, kami berharap mendapatkan lebih banyak pendukung. Kami akan menggunakan hasil untuk operasi dan promosi masyarakat. Anda dapat mendukung kami dengan cara berikut:

• OpenCollective
• Wechat wechat
• Alipay

Kami akan memasukkan catatan donasi terperinci di daftar pendukung.

❓ Dukungan masyarakat

Jika Anda mengalami masalah dalam proses tersebut, jangan ragu untuk meminta bantuan melalui saluran berikut. Kami juga mendorong pengguna yang berpengalaman untuk membantu pendatang baru.

• Pindai kode QR dengan DingTalk

Kontributor

Proyek ini ada berkat semua orang yang berkontribusi.

Kode Etik

Proyek ini telah mengadopsi Kode Etik yang ditentukan oleh Kontributor Perjanjian untuk mengklarifikasi perilaku yang diharapkan di komunitas kami. Untuk informasi lebih lanjut, lihat Kode Etik .NET Foundation.

☀️ Lisensi

.NET Foundation

Proyek ini didukung oleh .NET Foundation.