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

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

WBOY

リリース： 2024-09-12 10:32:50

オリジナル

801 人が閲覧しました

?おかえり！パート 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

Learn how to make a styled picture frame web component with props (Learn Modulo.js - Part f

このチュートリアルでは、プレーン 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 つの最も基本的なコンポーネントパーツを学習しました:

テンプレート - <テンプレート> - テンプレートは、コンポーネントに含める任意の HTML コードを配置する場所です。現時点では、変更されていない HTML をいくつか含めるだけにします。次のチュートリアルでは、「テンプレート言語」を使用して、どのような環境でどのような HTML が生成されるかを制御する方法を学びます。
スタイル - <スタイル> -
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 サイトの他の関連記事を参照してください。