小道具を使用してスタイル付きのピクチャ フレーム 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
                    style="width: 50px;"
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
                />
                <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="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" />
        <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. スタイル - <スタイル> -

   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 サイトの他の関連記事を参照してください。