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