小道具を使用してスタイル付きのピクチャ フレーム Web コンポーネントを作成する方法を学びます (Modulo.js を学ぶ - パート f)

?おかえり！パート 1 を理解できませんでしたか?心配はいりません。最初から始めることも、ここからいきなり始めることもできます!

紹介: PictureFrame コンポーネント

このチュートリアルのタスクは、Web アプリ上で写真をスタイリングするためのピクチャ フレーム コンポーネントを構築することです。前回は以下のような抜粋で終わりました。ただし、このチュートリアルでは、代わりにピンク/サーモン色のカバの「写真フレーム」とその下にキャプションを表示するように「テンプレート」を変更しました。このチュートリアルを開始するには、次の内容をコピーして新しいファイルに貼り付け、ブラウザで開きます:

<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="小道具を使用してスタイル付きのピクチャ フレーム Web コンポーネントを作成する方法を学びます (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

このチュートリアルでは、プレーン HTML コンポーネントに スタイル を追加し、最後にもう 1 つの重要なコンポーネント パーツを確認する前に、Modulo フレームワークの最初の中心概念であるコンポーネント パーツについて説明します。 : プロップ.

まず、上記のコードには厄介な点があることに気づくかもしれません。すべてのスタイルは 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="小道具を使用してスタイル付きのピクチャ フレーム Web コンポーネントを作成する方法を学びます (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 の「Style」タグとよく似た外観と動作をするため、クラスやセレクターを思う存分作成できます。

ステップ 2: ホストコンポーネント自体のスタイル設定

多くの場合、Web コンポーネント自体 (この場合は タグ) のスタイルを設定する必要があります。これには特別な :host セレクターを使用できます:

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

構成部品の紹介

Modulo の中心的な概念はコンポーネント パーツです。すべてのコンポーネント定義は、いくつかのコンポーネント パーツで構成されます。したがって、コンポーネント定義は実際にはコンポーネント パーツ定義の単なるコレクションです。コンポーネントの「内部」では、各コンポーネント パーツには、コンポーネントの機能に貢献する異なる役割があります。

私たちはすでに 2 つの最も基本的なコンポーネント パーツを学習しました:

1. テンプレート - - テンプレートは、コンポーネントに含める任意の HTML コードを配置する場所です。現時点では、変更されていない HTML をいくつか含めるだけにします。次のチュートリアルでは、「テンプレート言語」を使用して、どのような環境でどのような HTML が生成されるかを制御する方法を学びます。

2. スタイル - -

スタイル と テンプレート には多くの構成可能なオプションがありますが、この用途ではデフォルトで十分であることに注意してください。

小道具の紹介

さて、3 番目の重要なコンポーネント パーツを紹介しましょう: Props

前のセクションでは、主にコンポーネントの定義に関心がありました。コンポーネントは一度定義されますが、何度でも使用できることを思い出してください。 Props の目的は、その 2 番目のステップでより柔軟な対応を可能にすることです。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="小道具を使用してスタイル付きのピクチャ フレーム Web コンポーネントを作成する方法を学びます (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.

以上が小道具を使用してスタイル付きのピクチャ フレーム Web コンポーネントを作成する方法を学びます (Modulo.js を学ぶ - パート f)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。