소품을 사용하여 스타일이 지정된 사진 프레임 웹 구성 요소를 만드는 방법을 알아보세요(Modulo.js 학습 - 파트 f

? 돌아온 것을 환영합니다! 1부를 못 보셨나요? 걱정하지 마세요. 처음부터 시작하거나 여기에서 뛰어들 수도 있습니다!

소개: PictureFrame 구성 요소

이 튜토리얼의 작업은 웹 앱에서 사진 스타일링을 위한 사진 프레임 구성 요소를 만드는 것입니다. 지난번에는 아래와 같은 스니펫으로 마무리했습니다. 그러나 이 튜토리얼에서는 아래 캡션과 함께 하마의 분홍색/연어 "사진 프레임"을 표시하도록 "템플릿"을 변경했습니다. 이 튜토리얼을 시작하려면 다음을 복사하여 새 파일에 붙여넣고 브라우저에서 엽니다.

<template modulo>
    <component name="PictureFrame">
        <template>
            <div style="display: inline-block; border: 10px inset salmon; padding: 10px; margin: 10px; width: 100px; background: pink;">
                <img  src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" class="lazy"   style="max-width:90%" alt="소품을 사용하여 스타일이 지정된 사진 프레임 웹 구성 요소를 만드는 방법을 알아보세요(Modulo.js 학습 - 파트 f" >
                <p>Photograph: <em>The Return of the Hippo</em></p>
            </div>
        </template>
    </component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-pictureframe></x-pictureframe>

2부 소개

이 튜토리얼에서는 Modulo 프레임워크의 첫 번째 핵심 개념인 구성 요소 부분에 대한 논의와 함께 일반 HTML 구성 요소에 스타일을 추가한 후 마지막으로 더 중요한 구성 요소 부분을 살펴보겠습니다. : 소품.

먼저 위 코드에서 뭔가 지저분한 점을 발견할 수 있습니다. 모든 스타일은 style= 속성에 포함됩니다! CSS를 코딩할 때 모든 스타일을 inline style= 속성에 배치하는 것은 종종 유지 관리하기 어렵습니다. Modulo는 CSS 코드를 보다 자연스럽게 작성할 수 있도록 "스타일" 구성 요소 부분을 지원합니다. 구성 부품이란 무엇입니까? 글쎄, 우리는 그것에 대해서도 알아볼 것입니다. 먼저 스타일리시하자!

1단계: 스타일 구성 요소 부분 생성

<template>
    <div class="salmon-frame">
        <img  src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" class="lazy" alt="소품을 사용하여 스타일이 지정된 사진 프레임 웹 구성 요소를 만드는 방법을 알아보세요(Modulo.js 학습 - 파트 f" >
        <p>Photograph: <em>The Return of the Hippo</em></p>
    </div>
</template>
<style>
    img {
        width: 50px;
    }
    .salmon-frame {
        display: inline-block;
        border: 10px inset salmon;
        padding: 10px;
        margin: 10px;
        width: 100px;
        background: pink;
    }
</style>

훨씬 나아졌어요! 이는 HTML의 "스타일" 태그와 매우 유사하게 보이고 작동하므로 원하는 대로 클래스와 선택기를 만들 수 있습니다.

2단계: 호스트 구성요소 자체 스타일 지정

웹 구성 요소 자체의 스타일을 지정하려는 경우가 많습니다(이 경우 태그). 이를 위해 특별한 :host 선택기를 사용할 수 있습니다:

<style>
    :host {
        text-align: center;
    }
    /* ... etc ... */
</style>

구성 부품 소개

Modulo의 핵심 개념은 Component Parts입니다. 모든 구성 요소 정의는 몇 가지 구성 요소 부분으로 구성됩니다. 따라서 구성 요소 정의는 실제로 구성 요소 부분 정의의 모음일 뿐입니다. 구성 요소의 "내부"에서 각 구성 요소 부분은 구성 요소의 기능에 기여하는 서로 다른 역할을 갖습니다.

우리는 이미 가장 기본적인 구성 요소 두 가지를 배웠습니다.

1. 템플릿 - - 템플릿은 구성 요소에 포함할 임의의 HTML 코드를 넣는 곳입니다. 지금은 변경되지 않는 일부 HTML만 포함하겠습니다. 다음 튜토리얼에서는 "템플릿 언어"를 사용하여 어떤 상황에서 어떤 HTML이 생성되는지 제어하는 ​​방법을 배우겠습니다.

2. 스타일 - -

스타일과 템플릿 모두 구성 가능한 옵션이 많지만, 우리의 사용법에서는 기본값이면 충분합니다.

소품 소개

이제 세 번째 중요한 구성 요소인 Props

를 소개하겠습니다.

이전 섹션에서는 주로 구성 요소 정의에 관심을 가졌습니다. 구성 요소는 한 번 정의되지만 여러 번 사용될 수 있다는 점을 기억하세요. Props의 목적은 두 번째 단계에서 더 많은 유연성을 허용하는 것입니다. Props 구성 요소 부분은 재사용할 때마다 구성 요소에 대해 사용자 정의할 수 있는 속성을 정의합니다.

우리에게 소품을!

현재로서는 사진 액자를 다른 사진이나 캡션에 재사용할 수 있는 방법이 없습니다. 우리 모두가 영원히 하마에게 쫓길 수는 없습니다! ???

우리는 궁극적으로 다음과 같은 일을 할 수 있기를 바랍니다.

<x-pictureframe image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" caption="Hippopotamus out of water" photographer="Lee R. Berger"></x-pictureframe>

그러면 "실제" HTML 태그처럼 느껴질 것입니다. 즉, 속성을 통해 구성할 수 있습니다. "레이어를 벗겨내고" Props를 사용하여 이 작업을 어떻게 수행할 수 있는지 살펴보겠습니다.

3단계: 소품 추가

구성 요소가 재사용될 때 props를 "수신"할 수 있으려면 props를 정의해야 합니다. Props 정의는 내용이 없고 단지 속성이 있는 여는 태그와 닫는 태그가 뒤따른다는 점을 제외하면 이전 정의와 같습니다. 다음을 참조하세요:

<props image caption photographer></props>

참고: 일반적인 실수는 Props를 포함하는 것을 잊어버리는 것입니다. 구성 요소가 받을 것으로 예상하는 모든 속성은 다음 단계에서 사용할 수 있도록 Props에 나열되어야 합니다.

Step 4: Using Props in Template

Now, we'll get our first sneak peak at the true power of Templates: Adding in data and values into your HTML. You can use the following syntax to get your "props" and inject them into the generated HTML:

<div class="salmon-frame">
    <img  src="/static/imghwm/default1.png" data-src="https://unpkg.com/mdu.js" class="lazy" alt="소품을 사용하여 스타일이 지정된 사진 프레임 웹 구성 요소를 만드는 방법을 알아보세요(Modulo.js 학습 - 파트 f" >
    <p>Photograph: <em>{{ props.caption }}</em></p>
    <p>Photographer: <em>{{ props.photographer }}</em></p>
</div>

Note the {{ and }}: This the templating syntax that indicates where the "props" values get inserted.

- Complete Example

Combining it all, we get the following results. Note how our custom Web Component can be re-used with different attributes:

<script></script>
Learn Modulo.js: Part 2
Style and Props
<x-pictureframe image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" caption="Hippopotamus out of water" photographer="Lee R. Berger"></x-pictureframe>

Conclusion

That's all for Part 2! Be sure to follow to catch the rest, and, as always, feel free to ask questions or suggestions in the comments.

위 내용은 소품을 사용하여 스타일이 지정된 사진 프레임 웹 구성 요소를 만드는 방법을 알아보세요(Modulo.js 학습 - 파트 f의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!