Écrit par Dubem Izuorah
Avez-vous déjà passé des heures à peaufiner la même mise en page Web sur plusieurs pages ou eu du mal à adapter votre interface utilisateur à l'évolution des données sans se casser ? Ces défis courants peuvent ralentir votre processus de développement et conduire à un code frustrant et sujet aux erreurs.
En créant des mises en page au moment de l'exécution basées sur des données, vous pouvez créer des applications flexibles, maintenables et évolutives qui s'adaptent sans effort aux changements. Cette approche, appelée Mise en page dynamique, élimine le besoin de modifications HTML répétitives, permettant à votre interface utilisateur de rester synchronisée de manière transparente avec vos données.
Dans cet article, nous explorerons comment les mises en page dynamiques peuvent transformer votre flux de travail de développement et élever vos projets.
Les mises en page dynamiques sont particulièrement utiles lorsque le contenu change fréquemment ou lors de l'affichage d'interfaces utilisateur réactives qui tirent des API, d'autres sources de données ou répondent aux interactions des utilisateurs.
Les mises en page dynamiques brillent dans divers scénarios du monde réel, tels que :
En générant ces éléments de manière dynamique, vous garantissez la cohérence, simplifiez les ajustements et maintenez une base de code propre.
Acquérons une expérience pratique des mises en page dynamiques en créant une barre de navigation dynamique. Pour référence, voici le dépôt Github de ce tutoriel.
Imaginez que vous développez une plateforme de paiement et que vous deviez créer un composant de barre de navigation propre et extensible, comme indiqué dans les captures d'écran ci-dessous :
Barre de navigation lorsqu'un utilisateur est connecté
Barre de navigation sans utilisateur connecté
Pour nous concentrer sur les mises en page dynamiques, nous n'entrerons pas ici dans les détails de la configuration de l'environnement. Vous pouvez trouver les exemples de code complets dans notre référentiel GitHub.
Technologies utilisées :
Un composant Navbar statique implique de nombreuses balises et propriétés HTML, ce qui rend le code difficile à lire et à maintenir.
La mise à jour d'une telle mise en page est sujette aux erreurs, en particulier avec des éléments répétitifs partageant les mêmes propriétés ou le même style.
Bien qu'une approche statique soit utile pour la rédaction de mises en page, les mises en page dynamiques sont préférables pour la maintenabilité et la collaboration.
Exemple de barre de navigation statique :
? App.vue
<template>
<nav class="w-screen border-b py-4">
<div class="container mx-auto flex items-center gap-10">
<!-- Logo -->
<NuxtLink href="/" class="flex items-center">
<img src="https://logo.clearbit.com/google.com" class="w-10 h-10 object-contain" />
</NuxtLink>
<!-- Dashboard or Home Link -->
<NuxtLink v-if="user" href="/dashboard" class="flex items-center">
<PhGauge size="24" />
<span class="ml-2">Dashboard</span>
</NuxtLink>
<NuxtLink v-else href="/home" class="flex items-center">
<PhHouseSimple size="24" />
<span class="ml-2">Home</span>
</NuxtLink>
<!-- Spacer -->
<div class="ml-auto"></div>
<!-- Add Funds Button (Visible only when user is authenticated) -->
<button v-if="user" class="flex items-center">
<span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
</button>
<!-- User Avatar (Visible only when user is authenticated) -->
<div v-if="user" class="flex items-center">
<Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />
<span class="ml-2">Dubem Izuorah</span>
</div>
<!-- Auth Button -->
<button class="flex items-center" @click="user = !user">
<span>{{ user ? 'Logout' : 'Login' }}</span>
</button>
</div>
</nav>
<main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";
// Simulate user authentication status
const user = ref(true);
</script>
Alors que les mises en page statiques peuvent suffire pour des interfaces simples, les mises en page dynamiques offrent une maintenabilité et une évolutivité supérieures.
To create a dynamic navbar, we’ll want to define our layout data and generate UI components based on this data.
Instead of hard-coding each menu item, we can create a list of menu items in our script with properties like title, image, to, icon, render, and class. This allows us to dynamically generate the navbar based on the data.
? App.vue
<script setup lang="jsx">
// Import necessary components
import { ref, computed } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";
// Simulate user authentication status
const user = ref(true);
// Define menu items
const items = computed(() => [
{
key: "logo",
image: "https://logo.clearbit.com/google.com",
href: "/"
},
{
icon: user.value ? PhGauge : PhHouseSimple,
key: "dashboard",
title: user.value ? "Dashboard" : "Home",
to: user.value ? "/dashboard" : "/home",
},
{
key: "spacer",
class: "ml-auto",
},
{
key: "add-funds",
render: () => <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
},
{
key: "user",
render: () => <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />,
title: "Dubem Izuorah",
hide: !user.value
},
{
key: "auth",
title: user.value ? "Logout" : "Login",
onClick: () => user.value = !user.value
},
]);
// Filter out hidden items
const menuItems = computed(() => items.value.filter(item => !item.hide));
</script>
Key Takeaways:
Create an Avatar component used within the dynamic navbar.
? Avatar.vue
<template>
<div class="rounded-full w-10 h-10 bg-gray-100 overflow-hidden">
<img class="w-full h-full object-cover" :src="src" />
</div>
</template>
<script setup>
const props = defineProps({
src: {
type: String,
required: true,
},
})
</script>
This component creates a reusable avatar element that can display different images based on the ‘src’ prop passed to it. This makes it flexible and easy to use throughout your application for displaying user avatars or profile pictures.
Use the defined data to render the navbar dynamically.
? App.vue
<template>
<nav class="w-screen border-b py-4">
<div class="container mx-auto flex items-center gap-10">
<component
v-for="item in menuItems"
:key="item.key"
:is="item.to ? NuxtLink : 'button'"
v-bind="item"
@click="item.onClick"
class="flex items-center"
>
<img v-if="item.image" :src="item.image" class="w-10 h-10 object-contain" />
<component v-if="item.render" :is="item.render" />
<component v-if="item.icon" :is="item.icon" :size="24" />
<span v-if="item.title" class="ml-2">{{ item.title }}</span>
</component>
</div>
</nav>
<main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>
<script setup lang="jsx">
// The script remains the same as above
</script>
Key Takeaways:
By following this approach, you create a dynamic and flexible horizontal navbar that’s easy to extend or modify. This method not only saves time and effort but also ensures your codebase remains clean and maintainable.
Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness. Unlike Vue’s typical template-based approach, JSX allows you to embed HTML-like elements directly inside JavaScript logic. This is particularly useful in dynamic layouts where you need to generate or manipulate UI elements based on dynamic data.
Instead of separating logic and markup across different sections of the component (template and script), JSX enables you to manage both in one cohesive block of code.
In our solution, JSX helps simplify how we dynamically render components like the Avatar or conditional elements such as the “Add Funds” button.
For example, instead of hardcoding these elements into a template, we can dynamically generate them using a render function in JavaScript.
This allows us to update components like the navbar with real-time data, such as user authentication status, without duplicating code or scattering logic across the template and script sections.
By using JSX, we maintain cleaner, more maintainable code, while still leveraging Vue’s reactivity and flexibility.
Now that we understand dynamic layouts, it’s time to put your knowledge into practice. Here are some suggested next steps:
En suivant ces étapes, vous êtes sur la bonne voie pour maîtriser les mises en page dynamiques. Pour une expérience encore plus fluide dans la création d'interfaces dynamiques, consultez notre cours sur les interfaces faciles avec Vuetify, la bibliothèque de composants populaire pour les développeurs Vue.js.
En adoptant des mises en page dynamiques, vous pouvez rationaliser votre processus de développement, améliorer la flexibilité de votre application et maintenir une base de code plus propre et plus maintenable. Commencez dès aujourd'hui à intégrer des mises en page dynamiques dans vos projets et découvrez l'impact transformateur sur votre flux de travail et la qualité de vos applications.
Publié à l'origine sur https://www.vuemastery.com le 5 septembre 2024.
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!
Comment obtenir le numéro de série d'un disque dur physique sous Windows
Avantages et inconvénients des serveurs de sites Web étrangers gratuits
Le rôle de la fonction int() en python
Quelles sont les méthodes d'appel de la réflexion Java
le wifi n'affiche aucune adresse IP attribuée
fichier nh
solution hors de portée
La mémoire ne peut pas être une solution écrite
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
