웹 구성 요소 구축 101 - 3부

Part 2에서는 FAST의 기본 사항을 살펴보고 FAST Element를 사용하여 사용자 지정 구성 요소를 만들었습니다. 이 기사에서는 FAST에서 사용자 정의 속성을 생성하는 방법에 대해 설명합니다.

2부에서 중단한 부분부터 시작하겠습니다. 이 기사의 소스 코드에 액세스하려면 https://github.com/tebinraouf/learning-fast/tree/building-web-components-101-part-3에서 프로젝트를 복제할 수 있습니다.

또는 Stackblitz를 사용할 수 있습니다.

stackblitz.com

사용자 정의 속성을 생성하는 방법은 무엇입니까?

2부에서는 제목 색상을 하드 코딩한 사용자 지정<tebin-h1> 구성 요소를 만듭니다. 이 글에서는 컴포넌트를 사용할 때 커스텀 속성 값을 정의할 수 있도록 커스텀 속성을 생성해 보겠습니다.

암호:
<tebin-h1>Albert Einstein</tebin-h1>
결과:



기본적으로 제목은 우리가 정의했기 때문에 갈색입니다.

//h1.style.ts
import { css } from "@microsoft/fast-element";

export const styles = css`
    :host {
        display: block;
    }
    h1 {
        color: brown
    }
`;

아래와 같이 컴포넌트가 사용될 때 설정할 수 있도록 color 속성을 생성하려고 합니다.

<tebin-h1 color="yellow">Albert Einstein</tebin-h1>
<tebin-h1 color="#41aea9">Albert Einstein</tebin-h1>
<tebin-h1 color="blue">Albert Einstein</tebin-h1>

FAST에서 사용자 정의 속성을 생성하는 방법은 무엇입니까?

FAST는 속성을 생성하는 데코레이터를 제공합니다@attr. @attr 데코레이터를 사용하는 데 필요한 단계를 살펴보겠습니다.

사용자 정의 구성 요소 클래스에 속성을 만듭니다. 이 경우 tebin-h1 구성 요소에 대한 클래스는 h1.ts에 정의됩니다.

import { FASTElement, attr } from "@microsoft/fast-element";
import { styles } from "./h1.style.js";
import { template } from "./h1.template.js";


export class H1Component extends FASTElement {
+    @attr color: string = 'brown'
}

export const h1component = H1Component.compose({
    name: "tebin-h1",
    template,
    styles,
});

기본적으로 값은 갈색으로 설정됩니다.

다음 단계는 값이 h1 태그로 설정되도록 템플릿을 업데이트하는 것입니다. 이 데모에서는 인라인 스타일을 사용할 것입니다. 그러나 일반적으로 css 태그 또는 scss를 사용하여 구성 요소의 스타일을 지정합니다.

h1.template.ts는 이제 다음과 같습니다.

import { html } from "@microsoft/fast-element";

export const template = html`
-    <h1>
+    <h1 style="color: ${x => x.color}">
        <slot></slot>
    </h1>
`;

FAST는 MVVM - Model-View-ViewModel 패턴을 사용합니다. 모델인 클래스에 color 속성을 정의했으므로 ${x => x.color} 를 사용하여 뷰에 바인딩할 수 있습니다.

마지막으로 h1.style.ts 파일에서 정의한 스타일을 삭제합니다.

import { css } from "@microsoft/fast-element";

export const styles = css`
    :host {
        display: block;
    }
-    h1 {
-        color: brown
-    }
`;

몇 가지만 변경하면 맞춤 요소에 이제 맞춤 속성이 있습니다.

마크업:

    <tebin-h1 color="yellow">Albert Einstein</tebin-h1>
    <p>Life is like riding a bicycle. To keep your balance, you must keep moving.</p>

    <tebin-h1 color="#41aea9">Albert Einstein</tebin-h1>
    <p>Life is like riding a bicycle. To keep your balance, you must keep moving.</p>

    <tebin-h1 color="blue">Albert Einstein</tebin-h1>
    <p>Life is like riding a bicycle. To keep your balance, you must keep moving.</p>

결과:



다음 기사에서는 FAST에서 이벤트를 바인딩하는 방법에 대해 설명합니다.