Ketahui cara membuat komponen web bingkai gambar bergaya dengan prop (Belajar Modulo.js - Bahagian f

? Selamat kembali! Tidak menangkap Bahagian 1? Jangan risau, anda boleh mula dari awal, atau terjun sahaja di sini!

Memperkenalkan: Komponen PictureFrame

Tugas kami dalam tutorial ini ialah membina komponen bingkai gambar, untuk menggayakan gambar pada apl web. Kali terakhir kami akhiri dengan coretan sedikit seperti di bawah. Walau bagaimanapun, dalam tutorial ini, kami telah menukar "Templat" untuk menunjukkan "bingkai gambar" merah jambu/salmon seekor kuda nil dengan kapsyen di bawahnya. Untuk memulakan tutorial ini, salin dan tampal yang berikut ke dalam fail baharu, dan buka dalam penyemak imbas anda:

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

Memperkenalkan Bahagian 2

Dalam tutorial ini, kami akan menambah Gaya pada komponen HTML biasa, bersama-sama dengan perbincangan tentang konsep teras pertama dalam rangka kerja Modulo: Bahagian Komponen, sebelum akhirnya mengintip satu bahagian komponen yang lebih penting : Props.

Pertama, anda mungkin melihat sesuatu yang tidak kemas tentang kod di atas. Semua gaya dirempuh ke dalam atribut style=! Apabila mengekod CSS, meletakkan semua gaya kami dalam atribut style= inline selalunya sukar untuk dikekalkan. Modulo menyokong Bahagian Komponen "Gaya" untuk membolehkan kami menulis kod CSS dengan lebih semula jadi. Apakah Bahagian Komponen? Nah, kita akan sampai ke itu juga. Mula-mula, mari kita bergaya!

Langkah 1: Mencipta Bahagian Komponen Gaya

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

Lebih baik! Ini akan kelihatan dan berkelakuan seperti teg "Gaya" dalam HTML, membolehkan anda membuat kelas dan pemilih mengikut kehendak anda.

Langkah 2: Menggayakan komponen hos itu sendiri

Selalunya, anda perlu menggayakan Komponen Web itu sendiri (dalam kes ini, teg ). Kita boleh menggunakan pemilih :host khas untuk ini:

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

Memperkenalkan Bahagian Komponen

Konsep utama Modulo ialah Bahagian Komponen. Semua definisi komponen terdiri daripada beberapa bahagian Komponen. Oleh itu, definisi komponen sebenarnya hanyalah koleksi definisi Bahagian Komponen. "Di bawah hud" komponen anda, setiap Bahagian Komponen akan mempunyai peranan yang berbeza untuk menyumbang kepada kefungsian komponen anda.

Kami telah mempelajari dua Bahagian Komponen paling asas:

1. Templat - - Templat ialah tempat anda meletakkan sebarang kod HTML sewenang-wenangnya yang anda mahu komponen anda mengandungi. Buat masa ini, kami hanya akan memasukkan beberapa HTML yang tidak berubah. Dalam tutorial seterusnya, kita akan belajar cara menggunakan "bahasa templat" untuk mengawal HTML yang dihasilkan dalam keadaan apa.

2. Gaya - - Sama seperti tag dalam HTML. Walau bagaimanapun, ia mempunyai satu perbezaan import: Gaya yang terkandung akan dihadkan kepada komponen anda. Ini kerana CSS yang ditulis di sini akan diberi awalan secara automatik supaya ia hanya digunakan pada komponen anda dan mana-mana HTML yang dijana oleh Bahagian Komponen Templat. Ini agak berguna: Ia membolehkan kami menulis CSS terpencil untuk setiap komponen tanpa memikirkannya. Mengasingkan CSS kami bermakna lebih sedikit interaksi yang tidak dijangka.

Perlu diingat kedua-dua Gaya dan Templat mempunyai banyak pilihan boleh dikonfigurasikan, tetapi untuk penggunaan kami, lalainya cukup baik.

Memperkenalkan Props

Sekarang, mari perkenalkan Bahagian Komponen penting ketiga: Props

Dalam bahagian sebelumnya, kami kebanyakannya mengambil berat tentang menentukan komponen. Ingat bahawa komponen ditakrifkan sekali, tetapi boleh digunakan berkali-kali. Tujuan Props adalah untuk membolehkan lebih fleksibiliti dalam langkah kedua itu: Bahagian Komponen Props mentakrifkan sifat yang boleh disesuaikan tentang komponen setiap kali ia digunakan semula.

Props kepada kami!

Pada masa ini, bingkai gambar kami tidak mempunyai cara untuk digunakan semula untuk foto atau kapsyen yang berbeza. Kita tidak boleh selama-lamanya dikejar oleh kuda nil! ???

Kami mahu akhirnya dapat melakukan sesuatu seperti ini:

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

Kemudian, ia akan kelihatan seperti teg HTML "sebenar" -- iaitu, boleh dikonfigurasikan melalui atribut. Mari "kupas lapisan" dan periksa bagaimana ini boleh dicapai menggunakan Props.

Langkah 3: Menambah Props

Untuk membolehkan komponen boleh "menerima" prop apabila ia digunakan semula, kita mesti menentukan Props. Takrif props adalah seperti takrifan sebelumnya, kecuali takrifan itu tidak mempunyai kandungan dan hanyalah teg pembuka dengan atribut, diikuti dengan teg penutup. Lihat yang berikut:

<Props
    image
    caption
    photographer
></Props>

Nota: Kesilapan biasa ialah terlupa memasukkan Props. Setiap atribut yang anda jangkakan komponen anda terima mesti disenaraikan dalam Props agar tersedia untuk langkah seterusnya.

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.

Atas ialah kandungan terperinci Ketahui cara membuat komponen web bingkai gambar bergaya dengan prop (Belajar Modulo.js - Bahagian f. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!