了解如何使用 props 製作樣式化的相框 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 組件添加Style，並討論Modulo 框架中的第一個核心概念：組件部分，然後最後看看一個更重要的組件部分: 道具.

首先，您可能會注意到上面的程式碼有些混亂。所有的樣式都被塞進一個 style= 屬性中！在編寫 CSS 程式碼時，將所有樣式放入內聯 style= 屬性中通常很難維護。 Modulo 支援「Style」元件部分，讓我們更自然地編寫 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 的核心概念是組件部分。所有組件定義都由一定數量的組件部分組成。因此，組件定義實際上只是組件部分定義的集合。在組件的“底層”，每個組件部件都將發揮不同的作用來為組件的功能做出貢獻。

我們已經學會了兩個最基本的組件：

1. 模板 - - 模板是您放置您希望組件包含的任意 HTML 程式碼的位置。現在，我們只包含一些不變的 HTML。在下一個教程中，我們將學習如何使用「模板語言」來控制在什麼情況下產生什麼 HTML。

2. 風格 - - 就像一樣HTML 中的標籤。然而，它有一一重要的區別：包含的樣式將僅限於您的組件。這是因為此處編寫的 CSS 將自動添加前綴，以便它僅適用於您的組件以及模板組件部分生成的任何 HTML。這非常有用：它允許我們為每個組件編寫獨立的 CSS，甚至無需考慮它。保持 CSS 獨立意味著更少的意外互動。

請記住，樣式和模板都有很多可配置選項，但對於我們的使用來說，預設值就足夠了。

道具介紹

現在，我們來介紹第三個重要的組件：Props

在上一節中，我們主要專注於定義元件。回想一下，元件定義一次，但可以使用多次。 Props 的目的是在第二步驟中提供更大的靈活性：Props Component Part 定義了每次重複使用元件時可以自訂元件的屬性。

給我們支持！

目前，我們的相框無法重複用於不同的照片或標題。我們不能永遠被河馬追趕！ ???

我們希望最終能夠做這樣的事情：

<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.

來實現這一點

第三步：新增道具

為了讓元件在重複使用時能夠「接收」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="{{ props.image }}" />
    <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:

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.

以上是了解如何使用 props 製作樣式化的相框 Web 元件（學習 Modulo.js - 第 f 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！