Anglar 응용 프로그램을 통한 CSS 클래스 문자열 구성

Anglar SPA 프로그램을 인코딩할 때 CSS 클래스 문자열을 제어하는 코드를 이렇게 쓸 수 있습니다.

// my.component.ts
@Component({template:'my.component.html',...})
export class MyComponent {
  rotate: boolean;
  disabled: boolean;
  ...

<!-- my.component.html -->
<div [ngClass]="{'rotate':rotate, 'disabled':disabled}">...

상기 코드는 구성 요소rotate와 disabled 속성이 사실인지 여부에 따라 이러한 DOM을 나타낸다.

<div class="rotate disabled">...

나는 이 Anglar의ngClass 지도성이 직관적이고 알기 쉽다고 생각한다.

Blazor면 좀 힘들어...

참, Blazor C#SPA 프로그램을 인코딩할 때 CSS 클래스 문자열의 제어가 좀 고통스럽습니다.
Blazor에서는 Anglar의 방법처럼 조건을 스스로 판단해 CSS 클래스 문자열을 연결하는 코드를 만들어야 하지 않습니다.

@* MyComponent.razor *@
<div class="@CssClass()">...

@code {
  bool Rotate;
  bool Disabled;

  // CSS クラス文字列の構築が必要なときに毎回、こんなコードを書かなきゃいけないの!?
  string CssClass() {
    var cssClass = new List<string>();
    if (this.Rotate) cssClass.Add("rotate");
    if (this.Disabled) cssClass.Add("disabled");
    return string.Join(' ', cssClass);
  }
  ...

나는 이런 방법에 만족할 수 없다.
그럼 도대체 어떻게 된 일입니까?

기본 이념

따라서 Anglar의 방법처럼 익명의 객체로부터 CSS 클래스 문자열을 구축하는 유틸리티 함수를 자체 제작했습니다.
실용 프로그램 함수의 기본 개념은 다음과 같다.

이 함수에 익명의 대상을 전달할 수 있습니다.

이 함수는NET CLR의 반사 기능을 사용하여 매개변수 객체bool 유형의 속성을 가져옵니다.

이 함수는 속성 값을 true 속성으로 축소한다.

마지막으로 함수는 이 속성 이름과 빈칸 구분자를 연결하는 문자열을 되돌려줍니다.

이 기본 개념은 라이브러리에서 실현되었다.
유형명CssClassInlineBuilder은 정적 방법CssClass()으로 실시한다.CssClass() 정적 방법의 원본 코드는 다음과 같다.

// CssClassInlineBuilder.cs
public static class CssClassInlineBuilder 
{
  public static string CssClass(object obj)
  {
    var boolPropNames = obj.GetType()
      // Enumarate all properties of the argument object.
      .GetProperties()
      // Filter the properties only it's type is "bool".
      .Where(p => p.PropertyType == typeof(bool))
      // Filter the properties only that value is "true".
      .Where(p => (bool)p.GetMethod().Invoke(obj, null))
      // Collect names of properties, and convert it to lower case.
      .Selec(p => p.Name.ToLower());

    // Concatenate names of filtered properties with space separator.
    return string.Join(' ', boolPropNames);
  }
}

이 클래스 라이브러리를 사용하면 코드를 설명하고 CSS 클래스 문자열을 동적으로 구축할 수 있습니다. 예를 들어 Anglar 방법, 코드 시스템이 없습니다!

@* MyComponent.razor *@
<div class="@CssClassInlineBuilder.CssClass(new {Rotate, Disabled})">...

@code {
  bool Rotate;
  bool Disabled;
  ...

느낌 좋다;)
...하지만 그것에 만족할 수는 없다.CssClassInlineBuilder.CssClass(new {...}) 이런 코드는 너무 길지 않나요?

좀 더 간단하게!

C#문장 중 하나가 유용하다!
유명using static을 생략하기 위해 지도성을 사용했다.

@* _Imports.razor *@
...
@using static CssClassInlineBuilder

결국, 방법명으로 기술할 수밖에 없다!

@* MyComponent.razor *@
<div class="@CssClass(new {Rotate, Disabled})">...

@code {
  bool Rotate;
  bool Disabled;
  ...

이렇게 해도 초밥을 돌릴 수 있어요.
(Source code is on GitHub , inspired by "sushi-go-round" .)

총결산

이 실행은 새로 고쳐졌으며, 이 라이브러리를 NuGet 패키지로 공개합니다.
이 프로그램 라이브러리에 관심이 있다면 아래 링크를 따라가십시오.

"CSS Class Inline Builder"

모든 소스 코드는 GiitHub에 있습니다.

https://github.com/jsakamoto/CssClassInlineBuilder

Blazor Happy coding 사용:)