Apprenez à créer un composant Web de cadre photo stylisé avec des accessoires (Apprendre Modulo.js - Partie f

? Content de te revoir! Vous n'avez pas vu la première partie ? Pas de soucis, vous pouvez commencer par le début, ou simplement vous lancer ici !

Présentation : le composant PictureFrame

Notre tâche dans ce tutoriel sera de créer un composant de cadre photo, pour styliser les photographies sur une application Web. La dernière fois, nous avons terminé avec un extrait un peu comme celui ci-dessous. Cependant, dans ce didacticiel, nous avons modifié le "Modèle" pour afficher à la place un "cadre photo" rose/saumon représentant un hippopotame avec une légende en dessous. Pour commencer ce didacticiel, copiez et collez ce qui suit dans un nouveau fichier et ouvrez-le dans votre navigateur :

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

Présentation de la deuxième partie

Dans ce didacticiel, nous ajouterons un Style aux composants HTML bruts, ainsi qu'une discussion sur le premier concept de base du framework Modulo : les composants, avant de jeter un coup d'œil à un autre composant important. : Accessoires.

Tout d’abord, vous remarquerez peut-être quelque chose de compliqué dans le code ci-dessus. Tout le style est intégré dans un attribut style= ! Lors du codage CSS, placer tous nos styles dans des attributs style= en ligne est souvent difficile à maintenir. Modulo prend en charge le composant "Style" pour nous permettre d'écrire du code CSS plus naturellement. Qu'est-ce qu'un composant ? Eh bien, nous y reviendrons également. Tout d’abord, soyons élégants !

Étape 1 : Création d'un composant de style

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

Beaucoup mieux ! Cela ressemblera et se comportera un peu comme une balise "Style" en HTML, vous permettant de créer des classes et des sélecteurs à votre guise.

Étape 2 : Styliser le composant hôte lui-même

Souvent, vous souhaiterez styliser le composant Web lui-même (dans ce cas, la balise ). Nous pouvons utiliser le sélecteur spécial :host pour cela :

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

Présentation des composants

Le concept central de Modulo est celui des composants. Toutes les définitions de composants se composent d'un certain nombre de composants. Ainsi, une définition de composant n’est en réalité qu’un ensemble de définitions de composants. "Sous le capot" de votre composant, chaque composant aura un rôle différent pour contribuer à la fonctionnalité de votre composant.

Nous avons déjà appris les deux composants les plus élémentaires :

1. Modèle - - Les modèles sont l'endroit où vous placez tout code HTML arbitraire que vous souhaitez que votre composant contienne. Pour l'instant, nous inclurons simplement du HTML inchangé. Dans le prochain didacticiel, nous apprendrons comment utiliser le « langage de modèles » pour contrôler quel code HTML est produit dans quelles circonstances.

2. Style -

   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.

   Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!