스키마

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

개요

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

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

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

$light-avatar: (
    background: (
        color: (
            'gray',
            400,
            0.54,
        ),
    ),
    color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    icon-color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    border-radius: rem(8px),
    size: (
        sizable: (
            rem(40px),
            rem(64px),
            rem(88px),
        ),
    ),
    default-size: 1,
);
scss

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

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

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Extending Schemas

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

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

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

Predefined Schemas

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

• 라이트 스키마
  • $light-material-schema
  • $light-fluent-schema
  • $light-bootstrap-schema
  • $light-indigo-schema
• 다크 스키마
  • $dark-material-schema
  • $dark-fluent-schema
  • $dark-bootstrap-schema
  • $dark-indigo-schema

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

Consuming Schemas

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

개별 구성 요소 스키마는 우리가 가진 모든 구성 요소에 대한 전역 스키마 맵에 번들로 제공됩니다. 따라서 스키마는 $light-avatar 변수에 $material-avatar 저장되고 전역 $light-material-schema에서 사용됩니다. 맵에는 $light-material-schema 모든 구성 요소 이름이 키로 포함되고 해당 스키마가 값으로 포함됩니다. 모양은 $light-material-schema 다음과 같습니다.

$light-material-schema: (
    action-strip: $material-action-strip,
    avatar: $material-avatar,
    badge: $material-badge,
    ...
);
scss

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

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

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

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

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

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

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

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

현재 스키마의 가장 일반적인 사용 사례는 특정 요소가 전역 요소와 다른 테마를 갖기를 원하는 경우입니다. 예를 들어, 글로벌 테마를 신청하고 특정 아바타 컴포넌트를 하나만 사용 $light-indigo-schema 하려는 경우 $light-material-schema 다음을 수행할 수 있습니다.

// We only get the avatar part of the light-indigo-schema
$indigo-avatar: map.get($light-indigo-schema, avatar);

// We include the specific schema to a class which we can then set on the avatar component that we want
.indigo-avatar {
    @include css-vars(
        avatar-theme(
            $schema: $indigo-avatar
        )
    );
}
scss

Conclusions

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

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

API Overview

• 아바타 스키마
• 조명 구성요소 스키마
• 다크 구성요소 스키마
• 글로벌 테마
• 아바타 테마

Additional Resources

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

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular