홈페이지>.NET 소스 코드>기타 카테고리
다운로드

Blazorstylesheet

Blazorstylesheet은 Blazor ( Blazor Server , WebAssembly 및 Maui Blazor) 개발자가 외부 스타일 시트없이 CSS 스타일을 C#에 직접 작성할 수 있습니다.

Blazorstylesheet은 Stylesheet.net 위에 제작되었습니다.

Stylesheet.net은 C#, vb.net 및 F# 개발자를 위해 설계된 크로스 플랫폼 .NET 라이브러리입니다. 이를 통해 개발자는 코드에 직접 CSS 스타일을 작성하여 외부 스타일 시트 파일을 제거 할 수 있습니다. Stylesheet.net은 모든 CSS 속성, AT- 룰, 키워드 및 기타 요소에 대한 사전 작성된 구현을 제공하여 추가 종속성이 필요하지 않습니다.

Stylesheet.net은 외부에서 도서관이 아닙니다. 내가 썼고 유지 관리하는 오픈 소스 (MIT) 라이브러리입니다.

저장소 : https://github.com/abdisamadmoh/stylesheet.net

이 자습서를 계속하기 전에 스타일 시트.net을 사용하는 방법을 이해하고 이해하는 것이 좋습니다. 위의 링크를 클릭하고 문서를 읽으십시오.

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

빠른 시작

Blazorstylesheet 사용을 시작하려면 먼저 프로젝트에 추가해야합니다.

Nuget 에서 추가하거나 Blazorstylesheet.dll을 직접 참조 할 수 있습니다.

Visual Studio 에서 nuget 패키지 관리자를 열고 다음 코드를 붙여 넣습니다. 

 Install - Package BlazorStylesheet - Version 1.0 .0

  1. 설치 한 후 파일 프로그램을 엽니 다 .

    다음 코드를 추가하십시오 

     using BlazorStylesheet ;
builder . Services . AddStylesheet ( ) ;

  2. 파일 _imports.razor를 엽니 다. Blazor Server 및 WebAssembly 에서는 프로젝트 루트 아래에서 찾을 수 있습니다. Maui 의 경우 구성 요소 폴더에서 찾을 수 있습니다.

다음 네임 스페이스를 추가하십시오 

 @using BlazorStylesheet
@using StylesheetNET

  1. 이제 Blazor Server 에서 _layout.cshtml 공유 폴더에서 찾을 수 있거나 Blazor WebAsassembly 및 Maui 에서 index.html을 찾을 수있는 wwwroot 폴더에서 찾을 수 있습니다.

    스크립트 나 스타일 전에 헤드에 다음 HTML 태그를 추가하십시오. 

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

    이제 태그 <htm ...> add loading = "loader" 에서 스크롤하십시오. 왜 이후 섹션에서 이러한 태그와 속성이 필요한지 설명하겠습니다 ( '필요한 이유 ...'섹션 참조). 

     loading = "loader"
 OR
loading = ""

  2. 마지막으로 Blazor Server 와 Blazor WebAssembly Open App.Razor 에서 프로젝트 루트 아래에서 찾을 수 있습니다. Maui 에서는 Components 폴더에서 찾을 수있는 열린 경로 .

    거기에 보는 모든 것을 다음과 같이 랩핑하십시오. 

    < RazorStylesheet > </ RazorStylesheet >

위에서 언급 한 모든 단계를 완료해야합니다.

이제 우리는 C#에 첫 번째 CS를 쓸 준비가되었습니다.

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#에서 스타일 시트를 작성하는 방법을 배우려면 https://github.com/abdisamadmoh/stylesheet.net#quick-start를 참조하십시오.

다른 구성 요소의 sheet 에 액세스하려면 위의 4 단계 에 이어 stylesheet inject .

stylesheet 에서 무언가를 변경할 때마다 DOM 의 변경 사항을 반영하려면 sheet.Build() 호출해야합니다.

그것이 구성 요소에서 stylesheet 에 액세스 할 수있는 방법입니다. 그러나 구성 요소에 전체 CSS를 작성하는 것은 구성 요소 코드를 읽을 수 없게 만드는 좋은 생각이 아닙니다.

사실 구성 요소에 CSS를 쓰는 것은 잘못된 것이 없습니다. 그러나 별도의 classes 으로 작성하는 것이 좋습니다. 다음 섹션에서는 그렇게 할 것입니다. 또한 구성 요소에 CSS를 작성 해야하는시기를 배울 것입니다.

실제 응용 프로그램을 구축 할 수 있습니다

이제 다음 Navbar 메뉴를 크레타이트로 만들 수 있습니다.

  1. 새 구성 요소를 만들고 navbar.razor 이름을 지정하십시오.

  2. 생성 한 Navbar.razor 에 다음 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 >

  1. MainLayout.razor 또는 원하는 다른 구성 요소에 만든 Navbar.razor 를 추가하십시오.

  2. 이제 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 ( )
{

}

응용 프로그램을 다시 실행하면 Blazorstylesheet 이 수업을 찾으면 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.
     }
 }

이제 응용 프로그램을 구축하고 브라우저를 새로 고치십시오. 귀하의 웹 사이트 본문은 빨간색이어야합니다.

Maui 에서는이 오류가 발생할 수 있습니다.

'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를 작성해 봅시다.

어쨌든 CS를 좋아하는 CS를 쓸 수는 있지만 방법으로 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"
              }
          } ;
      }
  }

Navbar.razor 의 스타일 외에도 모바일 , 태블릿 및 데스크탑 용 미디어 쿼리를 추가하여 body 의 배경색을 변경했습니다. 또한 h1 요소 용 flash 라는 애니메이션을 추가했습니다.

이것이 Blazorstylesheet을 사용하여 C#의 클래스에서 CSS를 작성하는 방법입니다. 이 방법에 따라 원하는만큼의 수업을 가질 수 있습니다. 하루가 끝나면 모두 단일 스타일 시트 파일로 컴파일됩니다.

다른 장소에서 동일한 CS를 작성하는 경우, IE 클래스는 항상 나중에 나중에 CS를 사용하여 오래된 CS를 무시합니다. 실행 순서 및 컴파일에 따라

여기서는 Blazorstylesheet을 사용하여 C#에 CSS를 작성하는 방법에 대한 전체 자습서를 다루지 않았습니다. 이 라이브러리는 포괄적 인 자습서가있는 Stylesheet.net 라이브러리를 사용하기 때문에 C#에서 CSS 작성에 대한 자세한 지침은 아래 링크를 참조 할 수 있습니다.

저장소 : https://github.com/abdisamadmoh/stylesheet.net

구성 요소에서 CSS를 언제 그리고 어떻게 작성합니까?

Blazorstylesheet을 사용하면 Blazor 프로젝트의 어느 곳에서나 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() 호출해야합니다.

Blazorstylesheet 에 영향을 미치지 않기 때문에 StateHasChanged() 호출 할 필요가 없습니다.

우리가 필요한 이유 ...

loading="loader" 속성 <html loading="loader"> 및 fix.css ?

Blazorstylesheet은 Blazor가 제공하는 JavaScript 런타임 (JSRuntime) 에 따라 다릅니다. 전체 페이지가로드 될 때까지 JSRuntime이 준비되지 않았습니다. 이는 JSRuntime 이 컴파일 된 CSS를 ClientSide로 보낼 준비가되기까지 BlazorStylesheet이 기다려야한다는 것을 의미합니다.

이렇게하면 모든 것이로드 될 때까지 웹 사이트가 스타일이없는 문제가 발생합니다. CSS가 준비되고 웹 사이트가 스타일이 될 때까지 로더를 표시하거나 웹 사이트를 표시하지 않으면이 문제를 해결할 수 있습니다.

두 솔루션 모두 추가 한 fix.css 파일에 있습니다.

웹 사이트가 준비되는 동안 로더를 표시하려면 HTML 태그에 다음 HTML 속성을 추가하십시오. 

 < html loading =" loader " >

준비하는 동안 웹 사이트의 내용을 표시하지 않으려면 HTML 태그에 다음 HTML 속성을 추가하십시오. 

 < html loading ="" >

Blazorstylesheet은 로더를 생성하기 위해 DOM에 요소를 추가하지 않습니다. 따라서 DOM이 수정 된 것에 대해 걱정해서는 안됩니다.

더...

이 라이브러리는 Stylesheet.net을 사용하여 아래의 저장소를 찾을 수 있습니다.

저장소 : https://github.com/abdisamadmoh/stylesheet.net

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체