BlazorStylesheet

BlazorStylesheet

BlazorStyleSheet允許Blazor（ Blazor Server ， WebAssembly和Maui Blazor）開發人員直接在C＃中編寫其CSS樣式，而無需外部樣式表。

BlazorStylesheet建於stylesheet.net之上。

stylesheet.net是一個跨平台.NET庫，為C＃，VB.NET和F＃開發人員設計。它使開發人員能夠在其代碼中直接編寫CSS樣式，從而消除了對外部樣式表文件的需求。 Stylesheet.net為所有CSS屬性，插曲，關鍵字和其他元素提供了預編寫的實現，從而消除了對其他依賴關係的需求。

stylesheet.net不是外部的庫。這是我編寫和維護的開源（麻省理工學院）庫。

存儲庫：https：//github.com/abdisamadmoh/stylesheet.net

我建議您在繼續本教程之前先了解一下如何使用stylesheet.net 。單擊上面的鏈接並閱讀文檔。

快速開始

要開始使用BlazorStyleSheet ，我們首先需要將其添加到我們的項目中。

我們可以從Nuget添加它，也可以直接引用BlazorStylesheet.dll

在Visual Studio中打開nuget軟件包管理器並粘貼以下代碼。

 Install - Package BlazorStylesheet - Version 1.0 .0

1. 安裝完成後，打開file程序。

   添加以下代碼

    using BlazorStylesheet ;
   builder . Services . AddStylesheet ( ) ;

2. 打開文件_imports.razor 。在Blazor Server和WebAssembly中，您可以在項目根部找到它。對於毛伊島，您可以在組件文件夾下找到它。

添加以下名稱空間

 @using BlazorStylesheet
@using StylesheetNET

3. 現在，在Blazor Server中打開_layout.cshtml ，您可以在共享文件夾下找到它，或者在Blazor WebAssembly和Maui中index.html找到，您可以在wwwroot文件夾下找到它。

   在任何腳本或樣式之前，在頭部中添加以下HTML標籤。

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

   現在向上滾動，在標籤<htm ...>添加加載=“ loader”中。我將解釋為什麼我們需要以後的部分中需要這些標籤和屬性（請參閱“為什麼需要...”部分）。

    loading = "loader"
    OR
   loading = ""

4. 最後，在Blazor Server和Blazor WebAssembly Open App.Razor中，您可以在Project root下找到。在毛伊島中，打開路線。

   包裹您在那裡看到的所有內容：

   < RazorStylesheet > </ RazorStylesheet >

您必須完成上面提到的每個步驟。

現在，我們準備在C＃中編寫我們的第一個CSS。

在我們的mainlayout.razor中，讓我們注入主樣式表並將其稱為sheet 。然後，我們可以使用sheet屬性編寫我們的CSS。您可以在要訪問主樣式表的每個組件中執行此操作。

現在，在mainlayout.razor c＃代碼中復制以下代碼並粘貼。

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

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

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

 }

現在構建您的應用程序並刷新瀏覽器。您會看到您的HTML身體變成blue 。

要了解如何在C＃中寫下樣式表

要在其他組件中訪問sheet ，請在上面的步驟4下inject stylesheet 。

每當您更改stylesheet中的某些內容時，都必須調用sheet.Build()以反映DOM中的更改。

這就是您可以在組件中訪問stylesheet方式。但是，將整個CSS寫入組件並不是一個好主意，因為這使得您的組件代碼不可讀。

實際上，在組件中寫下CSS並沒有錯。但是在單獨的classes中寫作是個好主意。我們將在下一部分中這樣做。同樣，我們還將學習何時應該在組件中編寫CSS。

讓我們構建現實世界應用

現在，讓我們介紹以下Navbar菜單。

1. 創建一個新的組件並將其命名為Navbar.Razor 。

2. 將以下html代碼粘貼在您創建的磁帶中。

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

3. 添加您創建的navbar.razor在mainlayout.razor或您想要的任何其他組件中。

4. 現在讓我們在C＃中創建我們的CSS。創建一個新類並將其稱為Style.cs ，然後添加這兩個名稱空間。

 using BlazorStylesheet ;
using StylesheetNET ;

現在，我們的班級可能看起來像這樣：

 public class Style
{
}

但這只是一個簡單的課程，而BlazorStylesheet無法識別。我們需要指出此類用於樣式表。我們可以通過像這樣的[StylesheetClass]屬性進行裝飾來做到這一點：

 [ StylesheetClass ]
public class Style
{ 
}

現在，當我們運行應用程序時， BlazorStyleSheet將識別我們的課程並將其編譯為CSS。

現在讓我們在班上寫一些CSS。但是寫在哪裡？

好吧，讓我們添加一種方法和名稱Setup ，然後用[StylesheetMethod]像這樣裝飾它：

 [ StylesheetMethod ]
private void Setup ( )
{

}

當我們再次運行應用程序並找到我們的類時，它將尋找我們的Setup方法並執行它。

實際上，我們的Setup方法是執行的，不是因為它被稱為Setup ，而是BlazorStylesheet尋找任何無參數的方法，這些方法裝飾有[StylesheetMethod]屬性並執行它們。這意味著我們可以擁有想要的盡可能多的方法，並命名我們想要的任何名稱。

 [ 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. 
}

但是，我們應該如何寫我們的CSS？

好吧，要編寫我們的CSS，我們需要訪問我們的主要樣式表。主要樣式表是樣式表，其作用類似於我們網站的樣式表文件。當瀏覽器加載我們的網站時，它將創建。它在我們的網站上可用，它是恆定的，意思是，它再也不會重新創建，直到瀏覽器被刷新。

在剃須刀組件中，我們可以通過注射訪問它。

但是，要訪問我們同類的主要樣式表，我們必須添加類型Stylesheet的屬性，並使用[StylesheetProperty]進行裝飾。我們可以將其命名為我們想要的任何名字。在此示例中，我們將sheet命名。

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

現在， sheet是我們主要樣式表的引用。我們可以使用它來編寫我們的CSS。

BlazorStyleSheet將尋找具有屬性[StylesheetProperty]的任何屬性，並將其引用到主樣式表。

現在，檢查所有內容是否如預期的。讓我們給我們網站的身體red background color 。

您的Style.cs課程現在應該像這樣。

 [ 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.
     }
 }

現在構建您的應用程序並刷新瀏覽器。您的網站身體應該是紅色的。

在毛伊島，您可能會遇到此錯誤：

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

因為Microsoft.Maui.Controls和StylesheetNET都有Element類。

要修復，請添加以下名稱空間：

 using Element = StylesheetNET . Element ; 

如果一切順利，讓我們為我們的Navbar.razor編寫CSS。

儘管您都可以在您喜歡的任何地方寫下CSS，但是最好將它們分類為方法。那就是我們在這裡做的。

現在讓我們寫完整的CSS。這是完整的C＃代碼。

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

除了用於幫助的蘭斯的樣式外，我們還為移動，平板電腦和台式機添加了媒體查詢，在其中我們更改每個人的body顏色。我們還為h1元素添加了名為flash的動畫。

這就是您可以使用BlazorStylesheet在C＃中的類中寫CSS的方式。按照這種方式，您可以根據需要擁有任意數量的課程。歸根結底，所有這些都將被編譯成單個樣式表文件。

如果您在不同的地方編寫相同的CSS，即始終將較早的CS覆蓋較舊的CSS。取決於執行和彙編的順序。

在這裡，我還沒有介紹如何使用BlazorStylesheet在C＃中編寫CSS的完整教程。由於此庫使用具有全面教程的stylesheet.net庫，因此您可以參考下面的鏈接以獲取有關C＃編寫CSS的詳細指南。

存儲庫：https：//github.com/abdisamadmoh/stylesheet.net

何時以及如何在組件中編寫CSS？

借助BlazorStylesheet ，我們可以自由地在我們的Blazor Project的任何地方編寫CSS。這很方便，以保持特定於特定組件的樣式並實時更新我們的CSS。但是請記住，對於整個應用程序中使用的更大樣式或樣式，通常最好在單獨的C＃類中組織它們。這使您的代碼更易於管理。

與類別不同，我們可以通過屬性裝飾訪問主要樣式表，該屬性裝飾由BlazorStyleSheet本身管理。在組件中，我們可以通過.NET提供的依賴項注入（DI）容器提供的注入來訪問主樣式表。

在您的組件中使用@Inject 。將其放在剃須刀文件的頂部。

 @inject Stylesheet sheet

然後，您可以在組件中使用sheet 。

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

在BlazorStyleSheet無法管理的組件或其他位置，您必須在更改樣式表中的某些內容以反映更改時，必須致電sheet.Build()

您無需致電StateHasChanged() ，因為這對BlazorStylesheet沒有影響。

為什麼我們需要...

loading="loader"屬性在我們的<html loading="loader">和fix.css中？

BlazorStyleSheet取決於Blazor提供的JavaScript Runtime（JSruntime） 。 JSruntime尚未準備就緒，直到整個頁面已加載。這意味著BlazorStyleSheet必須等待啟動JSRUNTIME ，才可以將COMPIET COSS發送給客戶。

這將造成一個問題，而您的網站未被啟用，直到所有內容都已加載。您可以通過顯示加載程序或不顯示網站來解決此問題，直到CSS準備就緒而已準備好。

兩種解決方案都在於fix.css文件。

在準備好時顯示加載程序，請在HTML標籤中添加以下HTML屬性。

 < html loading =" loader " >

為了在準備好時不顯示網站的內容，請在您的HTML標籤中添加以下HTML屬性。

 < html loading ="" >

BlazorStylesHeet不會向DOM添加任何元素以創建加載程序。因此，您不必擔心自己的DOM被修改。

更多的...

該庫使用stylesheet.net ，您可以在下面找到存儲庫

存儲庫：https：//github.com/abdisamadmoh/stylesheet.net