CSS 사용자 정의 가능한 Angular 구성 요소를 활성화하는 우아한 방법

원래 내 블로그에 게시됨: https://blog.merckx.fr/css-customizable-angular-components .

Angular로 구성 요소를 만드는 것은 축복입니다. 입력 및 출력을 선언하는 API는 명확하고 간단합니다. 보기 캡슐화는 스타일이 구성 요소의 호스트 외부로 누출되지 않도록 합니다. 그러나 Angular 프레임워크에서 명확하게 정의되지 않은 한 가지가 있습니다. 소비자가 구성 요소의 스타일을 사용자 지정할 수 있도록 API를 제공하는 것입니다.

물론 입력을 설정하여 달성할 수 있습니다. 입력을 선언하고 구성 요소 내부의 요소에 인라인 스타일을 적용해야 합니다. 또한 때때로 @HostBinding를 사용하여 호스트 요소에 스타일을 첨부해야 합니다.

이 게시물에서 제안하는 대안은 변수라고도 하는 CSS 사용자 지정 속성을 사용하는 것입니다. 그들이 무엇인지 모른다면 MDN's website 에 이 주제에 대한 유용한 페이지가 있습니다.

오후 {
파란색;
}

카드 구성 요소의 예를 직접 살펴보겠습니다. 바로 아래에 제목과 프로젝트 콘텐츠가 있습니다.

<h3>{{title}}</h3>

<div class="content">
  <ng-content></ng-content>
</div>

card.component.html

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() title = '';
}

card.component.ts

:host {
  padding: var(--card-padding, 10px 10px);
  border: var(--card-border, 1px solid grey);
  box-shadow: var(--card-box-shadow, 1px 1px 4px 1px grey);
  display: inline-block;
}

h3 {
  color: var(--card-title-color, black);
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 16px;
}

.content {
  margin: 5px 0;
  font-size: 12px;
}

카드.구성요소.css

마지막 CSS 파일은 CSS 사용자 정의를 활성화하는 곳입니다. 카드 구성 요소는 몇 가지 CSS 변수--card-padding , --card-border , --card-box-shadow 및 --card-title-color 를 사용합니다. color: var(--card-title-color, black /* <- fallback value */ ); 구문으로 폴백 값을 제공한다는 점도 알 수 있습니다.

이제 카드 구성 요소를 사용하고 스타일을 사용자 지정하는 방법을 살펴보겠습니다.

<app-card [title]="'Card #1'" class="card-1">
  <p>This is card #1.</p>
</app-card>

<app-card [title]="'Card #2'" class="card-2">
  <p>This is card #2.</p>
</app-card>

app.component.html

app-card {
  margin: 3px;
  --card-box-shadow: 0 0 4px 0px grey;
}

app-card.card-1 {
  --card-title-color: red;
}

app-card.card-2 {
  --card-title-color: blue;
}

app.component.css

우리의 애플리케이션 템플릿은 두 개의 카드를 선언합니다. 각각은 CSS 클래스를 받습니다. CSS 파일에서 우리는 카드의 --card-box-shadow가 0 0 4px 0px grey이어야 한다고 말합니다. .card-1는 빨간색 제목을, .card-2는 파란색 제목을 얻습니다.


우리 응용 프로그램의 두 카드

CSS 변수 또는 사용자 지정 속성은 다른 CSS 속성처럼 작동합니다. 상속 및 특정성 규칙은 동일한 방식으로 적용됩니다.
:root 선택기를 사용하여 전체 응용 프로그램에 대한 CSS 변수를 정의할 수도 있습니다.

:root {
  --card-box-shadow: 0 0 4px 0px grey;
  --card-title-color: red;
  --card-border: 1px solid grey;
}

전역적으로 변수 정의

이 기법을 사용하면 개발자와 소비자가 관심사를 분리할 수 있습니다. 스타일링과 관련된 것은 CSS에 유지됩니다. 또한 라이브러리 작성자가 구성 요소에 더 많은 사용자 지정 기능을 제공할 수 있는 우아한 방법이기도 합니다.


KM

사진 제공: David Pisnoy on Unsplash