Beranda>Kode sumber .NET>Kategori lainnya
Unduh

Blazorstylesheet

Blazorstylesheet memungkinkan pengembang Blazor ( Blazor Server , WebAssembly dan Maui Blazor) untuk menulis gaya CSS mereka secara langsung di C# tanpa perlu stylesheet eksternal.

Blazorstylesheet dibangun di atas stylesheet.net .

Stylesheet.net adalah perpustakaan .NET cross-platform yang dirancang untuk pengembang C#, VB.NET, dan F#. Ini memungkinkan pengembang untuk menulis gaya CSS secara langsung dalam kode mereka, menghilangkan kebutuhan untuk file stylesheet eksternal. Stylesheet.net menyediakan implementasi pra-tertulis untuk semua properti CSS, at-aturan, kata kunci, dan elemen lainnya, menghilangkan kebutuhan akan dependensi tambahan.

Stylesheet.net bukan perpustakaan dari luar. Ini adalah perpustakaan open source (MIT) yang saya tulis dan pertahankan.

Repositori : https://github.com/abdisamadmoh/stylesheet.net

Saya akan merekomendasikan Anda untuk melihat dan memahami cara menggunakan stylesheet.net sebelum Anda dapat melanjutkan tutorial ini. Klik tautan di atas dan baca dokumentasinya.

https // githubcom/abdisamadmoh/stylesheetnet/raw/master/20240304013616imagePng

Awal yang cepat

Untuk mulai menggunakan Blazorstylesheet , pertama -tama kita perlu menambahkannya dalam proyek kami.

Kita dapat menambahkannya dari nuget , atau secara langsung merujuk blazorstylesheet.dll

Buka nuget Package Manager di Visual Studio dan tempel kode berikut. 

 Install - Package BlazorStylesheet - Version 1.0 .0

  1. Setelah instalasi selesai, buka file program.cs atau startup.cs atau mauiprogram.cs di proyek Blazor Anda.

    Tambahkan kode berikut 

     using BlazorStylesheet ;
builder . Services . AddStylesheet ( ) ;

  2. Buka file _imports.razor . Di Blazor Server dan WebAssembly Anda dapat menemukannya di bawah root proyek. Untuk Maui Anda dapat menemukannya di bawah folder Komponen .

Tambahkan ruang nama berikut 

 @using BlazorStylesheet
@using StylesheetNET

  1. Sekarang buka _layout.cshtml di Blazor Server yang dapat Anda temukan di bawah folder bersama , atau index.html di Blazor WebAssembly dan Maui yang dapat Anda temukan di bawah folder wwwroot .

    Tambahkan tag HTML berikut di kepala sebelum skrip atau gaya apa pun. 

     < link href =" _content/BlazorStylesheet/fix.min.css " rel =" stylesheet " />
< script src =" _content/BlazorStylesheet/BlazorStylesheet.js " > </ script >

    Sekarang gulir ke atas, di tag <htm ...> Tambahkan loading = "loader" . Saya akan menjelaskan mengapa kita membutuhkan tag dan atribut ini di bagian selanjutnya (lihat bagian 'Mengapa kita membutuhkan ...'). 

     loading = "loader"
 OR
loading = ""

  2. Dan terakhir, di Blazor Server dan Blazor WebAssembly terbuka app.razor yang dapat Anda temukan di bawah root proyek. Dan di Maui , rute terbuka .

    Bungkus semua yang Anda lihat di sana dengan: 

    < RazorStylesheet > </ RazorStylesheet >

Anda harus menyelesaikan setiap langkah yang disebutkan di atas.

Sekarang kami siap untuk menulis CSS pertama kami di C#.

Di MainLayout kami sheet Kemudian kita dapat menggunakan properti sheet untuk menulis CSS kita. Anda dapat melakukan ini di setiap komponen Anda ingin mengakses stylesheet utama .

Sekarang salin kode berikut dan tempel di MainLayout.Razor C# Code. 

 [ Inject ]
 public Stylesheet sheet
 {
     get ; set ;
 }

 protected override void OnAfterRender ( bool firstRender )
 {
    base . OnAfterRender ( firstRender ) ;

    if ( firstRender )
    {
        sheet [ "body" ] . BackgroundColor = "blue" ;
        sheet . Build ( ) ;
    }

 }

Sekarang bangun aplikasi Anda dan segarkan browser. Anda akan melihat tubuh HTML Anda menjadi warna blue .

Untuk mempelajari cara menulis stylesheet Anda di C# silakan lihat https://github.com/abdisamadmoh/stylesheet.net#quick-start

Untuk mengakses sheet di komponen lain, inject ke stylesheet , mengikuti langkah 4 di atas.

Setiap kali Anda mengubah sesuatu di stylesheet Anda, Anda harus menelepon sheet.Build() untuk mencerminkan perubahan dalam DOM .

Itulah cara Anda dapat mengakses stylesheet Anda di komponen Anda. Tetapi menulis seluruh CSS Anda dalam komponen bukanlah ide yang baik karena membuat kode komponen Anda tidak dapat dibaca.

Infact Tidak ada yang salah menulis CSS Anda di komponen Anda. Tapi itu ide yang baik untuk menulis di classes yang terpisah. Kami akan melakukannya di bagian selanjutnya. Juga kita akan belajar kapan kita harus menulis CSS kita dalam komponen.

Mari Bangun Aplikasi Dunia Nyata

Sekarang mari kita krete menu Navbar berikut.

  1. Buat komponen baru dan beri nama Navbar.razor .

  2. Tempel kode html berikut di Navbar.razor yang telah Anda buat. 

< nav class = " navbar " >
    < a href = " # " class = " selected " >Home</ a >
    < a href = " # " >About</ a >
    < a href = " # " >Blog</ a >
    < a href = " # " >Portefolio</ a >
    < a href = " # " >Contact</ a >
</ nav >

  1. Tambahkan navbar.razor yang telah Anda buat ke MainLayout.razor atau di komponen lain yang Anda inginkan.

  2. Sekarang mari kita buat CSS kami di C#. Buat kelas baru dan sebut saja Style.cs dan tambahkan dua ruang nama ini. 

 using BlazorStylesheet ;
using StylesheetNET ;

Sekarang, kelas kita mungkin terlihat seperti ini: 

 public class Style
{
}

Tapi itu hanya kelas sederhana, dan Blazorstylesheet tidak mengenalinya. Kita perlu menunjukkan bahwa kelas ini untuk Stylesheet . Kita dapat melakukannya dengan hanya menghiasnya dengan atribut [StylesheetClass] seperti ini: 

 [ StylesheetClass ]
public class Style
{ 
}

Sekarang, ketika kami menjalankan aplikasi kami, Blazorstylesheet akan mengenali kelas kami dan mengkompilasinya menjadi CSS.

Sekarang mari kita tulis beberapa CS di kelas kita. Tapi tulis dimana?

Baik, mari kita tambahkan metode dan beri nama Setup dan hias dengan [StylesheetMethod] seperti ini: 

 [ StylesheetMethod ]
private void Setup ( )
{

}

Ketika kami menjalankan aplikasi kami lagi dan Blazorstylesheet menemukan kelas kami, itu akan mencari metode Setup kami dan menjalankannya.

Infact, metode Setup kami dieksekusi, bukan karena disebut Setup tetapi Blazorstylesheet mencari metode tanpa parameter yang dihiasi dengan atribut [StylesheetMethod] dan mengeksekusi mereka. Itu berarti kita dapat memiliki metode sebanyak yang kita inginkan dan beri nama nama apa pun yang kita inginkan. 

 [ StylesheetMethod ]
public void method1 ( )
{
    // will be executed
} 

public method2 ( )
{
    // will not be executed because it is missing [StylesheetMethod]
   // BlazorStylesheet will ignore it.
} 


[ StylesheetMethod ]
public void method3 ( object parameter )
{
    // will throw an exception error 
   // bacause a method with [StylesheetMethod]
   // should not have any parameter. 
}

Tapi tetap saja, bagaimana kita harus menulis CSS kita?

Nah, untuk menulis CSS kami, kami perlu memiliki akses ke stylesheet utama kami. Stylesheet utama adalah stylesheet yang bertindak seperti file stylesheet dari situs web kami. Ini dibuat ketika browser memuat situs web kami. Dan tersedia di seluruh situs web kami dan konstan, artinya, tidak pernah diciptakan kembali sampai browser disegarkan.

Dalam komponen pisau cukur kita dapat mengaksesnya melalui injeksi.

Tetapi untuk mengakses stylesheet utama di kelas kami, kami harus menambahkan properti tipe Stylesheet dan menghiasnya dengan [StylesheetProperty] . Kami dapat menamainya nama apa pun yang kami inginkan. Untuk contoh ini, kami akan menyebutkannya sheet . 

 [ StylesheetClass ]
 public class Style
 {
     [ StylesheetProperty ]
     private Stylesheet sheet
     {
         get ;
         set ;
     }
 }

Sekarang, sheet adalah referensi ke stylesheet utama kami. Dan kita dapat menggunakannya untuk menulis CSS kita.

Blazorstylesheet akan mencari properti apa pun dengan atribut [StylesheetProperty] dan merujuknya ke stylesheet utama .

Sekarang, untuk memeriksa apakah semuanya berfungsi seperti yang diharapkan. Mari kita berikan red background color tubuh situs web kami.

Kelas Style.cs Anda akan terlihat seperti ini untuk saat ini. 

 [ StylesheetClass ]
 public class Style
 {
     [ StylesheetProperty ]
     public Stylesheet sheet
     {
         get ;
         set ;
     }

     [ StylesheetMethod ]
     private void MakeBodyRed ( )
     {
         sheet [ "body" ] = new Element ( )
         {
             BackgroundColor = "red !important"
         } ;
       //You can also write like this: 
       // sheet["body"].BackgroundColor = "red !important";
      // But the way i wrote is recommended and cleaner if you are not updating.
     }
 }

Sekarang bangun aplikasi Anda dan segarkan browser. Badan situs web Anda harus merah.

Di Maui , Anda mungkin mengalami kesalahan ini:

'Element' is an ambiguous reference between 'Microsoft.Maui.Controls.Element' and 'StylesheetNET.Element'

Karena baik Microsoft.Maui.Controls dan StylesheetNET memiliki kelas Element .

Untuk memperbaiki, tambahkan namespace berikut: 

 using Element = StylesheetNET . Element ;
Jika semuanya berjalan dengan baik, mari kita tulis CSS untuk Navbar.razor kami

Meskipun Anda dapat menulis CSS dengan toh Anda suka, tetapi merupakan ide yang baik untuk mengkategorikannya dalam metode. Itulah yang akan kita lakukan di sini.

Sekarang mari kita tulis CSS lengkap kami. Ini kode C# lengkap. 

  [ StylesheetClass ]
  public class Style
  {
      [ StylesheetProperty ]
      private Stylesheet sheet
      {
          get ;
          set ;
      }

      [ StylesheetMethod ]
      private void NavBar ( )
      {
          sheet [ ".navbar" ] = new Element ( )
          {

              Position = PositionOptions . Relative ,
              Width = "590px" ,
              Height = "60px" ,
              PaddingLeft = "10px" ,
              PaddingRight = "10px" ,
              BackgroundColor = "#34495e" ,
              BorderRadius = "8px" ,
              FontSize = "0"
          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a ( )
      {
          sheet [ ".navbar > a" ] = new Element ( )
          {
              LineHeight = "50px" ,
              Height = "100%" ,
              Width = "100px" ,
              FontSize = "15px" ,
              Display = DisplayOptions . InlineBlock ,
              Position = PositionOptions . Relative ,
              ZIndex = "1" ,
              TextDecoration = "none" ,
              TextTransform = TextTransformOptions . Uppercase ,
              TextAlign = TextAlignOptions . Center ,
              Color = "white" ,
              Cursor = CursorOptions . Pointer
          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a_Selected ( )
      {
          sheet [ ".navbar > a.selected" ] = new Element ( )
          {
              BackgroundColor = "#17B1EA" ,
              BorderRadius = "10px"

          } ;
      }
      [ StylesheetMethod ]
      private void NavBar_a_Selected_Hover ( )
      {
          sheet [ ".navbar > a" ] = new ElementHover ( )
          {
              BackgroundColor = "#17B1EA" ,
              BorderRadius = "10px" ,
              Transition = "border-radius" ,
              TransitionDuration = ".3s" ,
              TransitionTimingFunction = TransitionTimingFunctionOptions . EaseIn

          } ;
      }
      [ StylesheetMethod ]
      void Animation ( )
      {
          sheet [ "h1" ] = new Element ( )
          {
              AnimationName = "pulse" ,
              AnimationDuration = "2s" ,
              AnimationIterationCount = AnimationIterationCountOptions . Infinite
          } ;

          sheet [ AtRuleType . Keyframes ] = new Keyframes ( "pulse" )
          {
              [ "from" ] = new Keyframe ( )
              {
                  Opacity = "1.0"
              } ,
              [ "to" ] = new Keyframe ( )
              {
                  Opacity = "0"
              }
          } ;
      }
      //Media Query for Mobile Devices
      // @media (max-width: 480px) 
      [ StylesheetMethod ]
      void ForMobile ( ) //Make body red for mobile phones
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MaxWidth ( "480px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "red"
              }
          } ;
      }
      // Media Query for low resolution  Tablets, Ipads
      // @media (min-width: 481px) and (max-width: 767px)
      [ StylesheetMethod ]
      void ForTablet ( ) //Make body yellow for Tablets, Ipads
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MinWidth ( "481px" ) . And . MaxWidth ( "767px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "yellow"
              }
          } ;
      }

      // Media Query for Laptops and Desktops
      // @media (min-width: 1025px) and (max-width: 1280px)
      [ StylesheetMethod ]
      void ForDesktop ( ) //Make body gren for Laptops and Desktops
      {
          sheet [ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MinWidth ( "1025px" ) . And . MaxWidth ( "1280px" ) )
          {
              [ "body" ] = new Element ( )
              {
                  BackgroundColor = "green"
              }
          } ;
      }
  }

Terlepas dari gaya untuk Navbar.razor , kami juga menambahkan kueri media untuk ponsel , tablet , dan desktop di mana kami mengubah warna latar belakang body untuk masing -masing. Kami juga menambahkan animasi yang disebut flash untuk elemen h1 .

Begitulah cara Anda dapat menulis CSS di kelas di C# menggunakan Blazorstylesheet . Mengikuti dengan cara ini, Anda dapat memiliki kelas sebanyak yang Anda inginkan. Pada akhirnya, semuanya akan dikompilasi menjadi satu file stylesheet.

Jika Anda menulis CSS yang sama di berbagai tempat IE, selalu yang nanti akan mengesampingkan yang lebih tua. Tergantung urutan eksekusi dan kompilasi.

Di sini, saya belum membahas tutorial lengkap tentang cara menulis CSS di C# menggunakan Blazorstylesheet . Karena perpustakaan ini menggunakan perpustakaan stylesheet.net , yang memiliki tutorial komprehensif, Anda dapat merujuk ke tautan di bawah ini untuk panduan terperinci tentang penulisan CSS di C#.

Repositori : https://github.com/abdisamadmoh/stylesheet.net

Kapan dan bagaimana cara menulis CSS dalam komponen?

Dengan Blazorstylesheet , kami memiliki kebebasan untuk menulis CSS kami di mana saja dalam proyek Blazor kami. Ini berguna untuk menjaga gaya khusus untuk komponen tertentu dan memperbarui CSS kami secara realtime. Tapi ingat, untuk gaya atau gaya yang lebih besar yang digunakan di seluruh aplikasi Anda, umumnya lebih baik untuk mengaturnya di kelas C# terpisah. Ini membuat kode Anda lebih mudah dikelola.

Tidak seperti kelas, yang dapat kami akses stylesheet utama melalui dekorasi atribut yang dikelola oleh injeksi oleh blazorstylesheet itu sendiri. Dalam komponen , kita dapat mengakses stylesheet utama melalui injeksi yang disediakan oleh wadah Injeksi Ketergantungan (DI) yang disediakan oleh .NET.

Di komponen Anda menggunakan @Inject . Tempatkan di atas file pisau cukur Anda. 

 @inject Stylesheet sheet

Kemudian Anda dapat menggunakan sheet di komponen Anda. 

 protected override void OnAfterRender ( bool firstRender )
 {
     base . OnAfterRender ( firstRender ) ;
     if ( firstRender )
     {
         sheet [ "body" ] . BackgroundColor = "blue" ;
         sheet . Build ( ) ;
     }
 }

Di komponen atau tempat lain di mana Blazorstylesheet tidak mengelola, Anda harus menelepon sheet.Build() ketika Anda mengubah sesuatu di stylesheet untuk mencerminkan perubahan.

Anda tidak perlu menyebut StateHasChanged() karena itu tidak berpengaruh pada Blazorstylesheet .

Mengapa kita membutuhkan ...

loading="loader" di <html loading="loader"> dan fix.css kami?

Blazorstylesheet tergantung pada runtime JavaScript (jsruntime) yang disediakan oleh Blazor. JSruntime tidak siap sampai seluruh halaman dimuat. Ini berarti Blazorstylesheet harus menunggu sampai jsruntime siap untuk mengirim CSS yang dikompilasi ke sisi klien.

Ini akan menciptakan masalah di mana situs web Anda tidak ditata sampai semuanya dimuat. Anda dapat memperbaiki masalah ini dengan menampilkan loader atau tidak menampilkan situs web sampai CSS siap dan situs web ditata.

Kedua solusi terletak pada file fix.css yang Anda tambahkan.

Untuk menampilkan Loader saat situs web sedang bersiap -siap menambahkan atribut HTML berikut di tag HTML Anda. 

 < html loading =" loader " >

Untuk tidak menampilkan konten situs web saat bersiap -siap menambahkan atribut HTML berikut di tag HTML Anda. 

 < html loading ="" >

Blazorstylesheet tidak menambahkan elemen apa pun ke DOM untuk membuat loader. Jadi, Anda tidak perlu khawatir tentang DOM Anda yang dimodifikasi.

Lagi...

Perpustakaan ini menggunakan stylesheet.net yang dapat Anda temukan repositori di bawah ini

Repositori : https://github.com/abdisamadmoh/stylesheet.net

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua