스키마

    스키마는 구성 요소 테마가 사용하는 모든 속성을 나열하는 간단하고 선언적인 방법입니다.

    개요

    스키마는 레시피와 같습니다. 이는 테마가 사용할 수 있는 모든 속성을 정의할 수 있는 JSON과 유사한 간단한 Sass 맵입니다. 이러한 속성은 색상, 고도 수준, 원형 정도 등이 될 수 있습니다. 테마가 사용하는 모든 것은 schema로 설명된 다음 전역 또는 구성 요소 테마로 전달될 수 있습니다. 구성 요소 스키마는 기존 구성 요소 스키마를 확장하고 해당 속성을 재정의할 수 있습니다.

    CSS 스타일 규칙이나 CSS 변수가 중복되지 않는 방식으로 구성 요소의 기본 테마 속성을 변경하려는 경우 스키마를 사용해야 합니다.

    가벼운 Material Avatar 스키마를 살펴보겠습니다.

    $_light-avatar: extend(
    $_square-shape-avatar,
    (
        background: (
           color: ('gray', 400)
        ),

        color: (
           color: ('gray', 800)
        ),
    )
);

    위의 예에서 볼 수 있듯이 구성 요소 스키마는 아바타 테마가 사용하는 속성을 정의합니다. 구체적인 색상 팔레트 맵을 참조하지 않고 아바타가 사용해야 하는 색상을 규정할 뿐입니다.

    예를 들어 background 속성을 살펴보겠습니다. 기본 배경이 무엇인지 아바타 테마에 알려줍니다.

    ​background 임의의 값, 즉 CSS background-color 속성에 할당할 수 있는 값을 할당할 수 있습니다. 위의 샘플처럼 background에 지도를 할당할 수도 있습니다. background 속성에 지도를 할당할 때 지도에는 키 이름(예: color)으로 함수가 포함되어야 하며, 해당 키에 대한 값으로 함수에 대한 인수가 포함되어야 합니다. 나중에 아바타 테마를 구축할 때 값을 확인할 수 있도록 이렇게 합니다. 보세요, 우리는 사용자가 아바타 테마에 전달할 수 있는 팔레트를 모르기 때문에 나중에 팔레트가 알려진 경우에만 문제를 해결할 수 있어야 합니다.

    또한 키 값 쌍으로 background 맵에 다른 함수와 인수를 추가할 수도 있습니다. 예를 들어 일반적으로 rgba로 표시되는 gray 팔레트의 400 색상 변형에 대한 HEX 값을 확인하기 위해 우리가 가지고 있는 to-opaque 함수를 통해 color: ('gray', 400)에서 확인된 결과를 실행할 수 있습니다. .

    이 항목을 추가하면 스키마가 어떻게 변경되는지 살펴보겠습니다.

    $_light-avatar: (
    icon-background: (
       color: ('gray', 400),
        to-opaque: #fff
    ),
    ...
);

    ​color 함수 호출의 결과는 자동으로 to-opaque 함수의 첫 번째 인수로 전달됩니다. to-opaque 배경색에 대한 두 번째 인수를 허용하므로 이를 값으로 제공합니다. 함수가 추가 인수를 허용하지 않으면 빈 목록 ()을 해당 값으로 할당해야 합니다.

    Extending Schemas

    위의 예에서 보셨듯이. 스키마는 간단한 맵이므로 일부 속성을 재정의하여 확장할 수 있습니다. 당신은 원할 수도 있습니다 연장하다 재료 아바타 스키마를 변경하는 것만으로 background 다른 모든 속성을 수동으로 복사할 필요 없이 속성을 사용할 수 있습니다. 이 작업은 다음을 사용하여 쉽게 수행됩니다. extend 우리가 제공하는 기능.

    $my-avatar-schema: extend($_light-avatar, (
    background: limegreen
));

    이제 $my-avatar-schema 값에는 $_light-avatar의 모든 속성이 포함되지만 background 값은 limegreen 입니다.

    Predefined Schemas

    우리는 테마 사전 설정에서 사용하는 사전 정의된 밝은 스키마와 어두운 스키마를 제공합니다.

    • 라이트 스키마
      • $ 가벼운 재료 스키마
      • $light-fluent-스키마
      • $라이트-부트스트랩-스키마
      • $light-indigo-스키마
    • 다크 스키마
      • $dark-material-스키마
      • $dark-fluent-스키마
      • $dark-bootstrap-스키마
      • $dark-indigo-스키마

    우리는 밝은 색상과 어두운 색상 팔레트에 맞춰 밝은 색상과 어두운 색상 스키마를 사용하여 구성 요소 테마를 만듭니다. 예를 들어, $light-material-schema​ ​$light-material-palette schema를 사용하면 모든 조명 재료 구성 요소 테마를 만드는 데 도움이 됩니다. 그 반대의 경우도 마찬가지입니다. $dark-material-schema​ ​$dark-material-palette schema를 사용하면 어두운 재질 구성 요소 테마가 제공됩니다.

    Consuming Schemas

    지금까지 우리는 컴포넌트 스키마가 무엇이고 어떻게 생성할 수 있는지 보여줬지만, Sass 프로젝트에서 스키마를 사용하는 방법에 대해서는 다루지 않았습니다.

    개별 구성 요소 스키마는 우리가 보유한 모든 구성 요소에 대한 전역 스키마 맵에 번들로 제공됩니다. 따라서 $_light-avatar 스키마는 전역 $light-material-schema의 일부입니다. $light-material-schema 구성 요소 스키마를 구성 요소 이름에 매핑합니다. $light-material-schema 다음과 같습니다:

    $light-material-schema: (
    igx-avatar: $_light-avatar,
    igx-badge: $_light-badge,
    ...
);

    우리는 전체 $light-material-schema​ ​theme 믹스인에 전달할 수 있도록 이렇게 합니다. 예를 들어 아바타 구성 요소가 사용하는 기본 구성 요소 스키마를 대체하여 $light-material-schema 수정하려는 경우 다음을 수행할 수 있습니다.

    $my-light-schema: extend($light-material-schema, (
    igx-avatar: $my-avatar-schema
));

    이제 모든 것을 전역 테마 믹스인에 전달할 수 있습니다.

    // styles.scss
@include theme(
    $schema: $my-light-schema,
    $palette: $default-palette
);

    이제 글로벌 테마의 아바타는 배경에 라임그린 색상을 사용합니다.

    버튼 스키마와 같은 일부 구성 요소 스키마에는 원형성에 대한 속성 정의가 있습니다. 즉, 모든 버튼의 기본 버튼 원형률을 변경할 수 있습니다.

    마지막으로 개별 구성 요소 테마가 위에서 만든 스키마를 어떻게 사용할 수 있는지 살펴보겠습니다.

    $my-avatar-theme: avatar-theme(
    $schema: $my-avatar-schema
);

    Conclusions

    스키마에는 테마 기능 및 믹스인에 비해 테마 라이브러리에 대한 더 깊은 지식이 필요하지만 생성된 CSS의 크기를 늘리지 않고도 구성 요소 테마를 선언할 수 있습니다. 스키마 사용의 또 다른 이점은 단순한 Sass 맵이므로 재사용 및 확장이 가능하다는 것입니다. 구성 요소 스키마를 혼합하고 일치시켜 전역 테마 스키마를 생성할 수 있습니다.

    우리는 내부적으로 스키마를 사용하여 Material, Bootstrap, Fluent 및 Indigo에 대해 사전 번들로 제공되는 다양한 테마를 생성하는 변형을 만듭니다.

    API Overview

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.