Liaison de classes et de styles

Introduction#

La liaison de classes et de styles est un aspect essentiel de la manipulation de l'interface utilisateur dans Vue.js. Elle permet de modifier dynamiquement les classes et les styles des éléments HTML en fonction de l'état des données. Dans ce chapitre, nous explorerons les différentes techniques pour effectuer cette liaison et nous verrons comment les utiliser de manière efficace dans vos projets Vue.js.

Liaison de classes HTML#

La liaison de classes HTML se fait à l'aide de la directive v-bind:class. Cette directive permet de lier des classes à un élément de manière dynamique en fonction de l'état des données. Voici un exemple :

<script setup>
import { ref } from 'vue';

// Déclaration des états réactifs
const isActive = ref(true);
const hasError = ref(false);
</script>

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

Dans cet exemple, la classe active sera appliquée si la propriété isActive est vraie, et la classe text-danger sera appliquée si la propriété hasError est vraie.

Il est également possible de lier plusieurs classes en utilisant la syntaxe d'objet :

<template>
  <div :class="{ active: isActive, 'text-danger': hasError, 'font-bold': isBold }"></div>
</template>

Dans cet exemple, les classes active, text-danger et font-bold seront appliquées en fonction de l'état des propriétés correspondantes.

Liaison de styles HTML#

La liaison de styles HTML se fait à l'aide de la directive v-bind:style. Cette directive permet de lier des styles à un élément de manière dynamique en utilisant des objets JavaScript. Voici un exemple :

<script setup>
import { ref } from 'vue';

// Déclaration des refs réactifs
const textColor = ref('red');
const fontSize = ref(16);
</script>

<template>
  <div :style="{ color: textColor, 'font-size': fontSize + 'px' }"></div>
</template>

Dans cet exemple, la couleur du texte sera déterminée par la valeur de la propriété textColor, et la taille de la police sera déterminée par la valeur de la propriété fontSize.

Il est également possible de lier plusieurs styles en utilisant un objet JavaScript :

<template>
  <div :style="{
    color: textColor,
    'font-size': fontSize + 'px',
    'font-weight': fontWeight
  }"></div>
</template>

Dans cet exemple, les styles color, font-size et font-weight seront appliqués en fonction des valeurs des propriétés correspondantes.

Liaison de classes et de styles avec des tableaux#

Il est possible de lier des classes et des styles en utilisant des tableaux. Cela permet d'appliquer une liste de classes ou de styles à un élément. Voici un exemple :

<script setup>
import { ref } from 'vue';

// Déclaration des refs réactifs
const activeClass = ref('active');
const errorClass = ref('text-danger');
</script>

<template>
  <div :class="[activeClass, errorClass]"></div>
</template>

Dans cet exemple, les classes active et text-danger seront appliquées à l'élément.

Il est également possible de conditionner l'application des classes ou des styles à l'aide d'expressions ternaires :

<template>
  <div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>

Dans cet exemple, la classe activeClass sera appliquée uniquement si la propriété isActive est vraie.

Liaison de classes et de styles avec les composants#

La liaison de classes et de styles peut également être utilisée avec les composants. Lorsque vous utilisez l'attribut de classe ou la directive :class sur un composant avec un élément racine unique, les classes seront ajoutées à l'élément racine du composant et fusionnées avec les classes existantes. Voici un exemple :

<template>
  <MyComponent class="extra-class"></MyComponent>
</template>

Dans cet exemple, la classe extra-class sera ajoutée à l'élément racine du composant MyComponent.

Il est également possible de lier des classes à un composant en utilisant la directive :class avec un objet :

<template>
  <MyComponent :class="{ active: isActive }"></MyComponent>
</template>

Dans cet exemple, la classe active sera appliquée à l'élément racine du composant lorsque la propriété isActive est vraie.

Bonnes pratiques et astuces#

• Utilisez des propriétés calculées pour générer des objets de classes et de styles de manière dynamique.
• Utilisez des objets de styles directement pour rendre votre code plus propre et plus lisible.
• Utilisez des tableaux pour appliquer plusieurs classes ou styles à un élément.

Exemple pratique#

Voici un exemple concret d'utilisation de la liaison de classes et de styles dans un formulaire :

<script setup>
import { ref } from 'vue';

// Déclaration des refs réactifs pour les champs et la validation
const name = ref('');
const email = ref('');
const isNameValid = ref(true);
const isEmailValid = ref(false);
</script>

<template>
  <form>
    <div :class="{ 'is-valid': isNameValid, 'is-invalid': !isNameValid }">
      <input type="text" v-model="name" required />
    </div>

    <div :class="{ 'is-valid': isEmailValid, 'is-invalid': !isEmailValid }">
      <input type="email" v-model="email" required />
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

Dans cet exemple, les classes is-valid et is-invalid seront appliquées aux div qui entourent les champs de saisie en fonction de la validité des données.