Style dynamique dans Vue.js

Lorsque j’ai commencé à utiliser Vue.js comme framework frontal, j’ai immédiatement apprécié la facilité avec laquelle je peux configurer et gérer mes composants. L’utilisation de composants à fichier unique me permet de me concentrer sur tous les aspects concernant la façon dont je les construis : j’ai simplement besoin de mettre 3 balises dans un fichier .vue et je peux commencer à façonner à la fois l’aspect visuel et toute la logique derrière le composant lui-même. En parlant de style, la première chose que la doc officielle vous dit est de savoir comment styler un composant : insérez simplement une balise de style (généralement à la fin du fichier) et le tour est joué.

Mais lorsque vous avancez et commencez à créer des interfaces complexes, vous devez immédiatement effectuer un style qui va au-delà de la simple composition de classes CSS. Ainsi, au cours de mon parcours, j’ai découvert plusieurs façons d’effectuer un style dynamique, et cet article vise à être une brève référence pour les personnes qui ont d’abord ce besoin.
Afin de vous montrer les différentes techniques, je vais utiliser un composant bouton super simple qui doit utiliser une valeur de couleur d’arrière-plan spécifique si une prop booléenne est vraie (d’accord, c’est peut-être trop simple, mais vous comprendrez donc rapidement les concepts) .
Commençons par le code du composant :

<template>
  <button class="my-button">
    {{ text }}
  </button>  
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    },
    isWarning: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
}
</style>

et nous appelons le composant comme ceci :

<my-button text="Attention!" :is-warning="true"/>

1 style de reliure

C’est la solution la plus simple, utilisez simplement la liaison de style Vue.js et modifiez la propriété CSS background-color :

<template>
  <button 
    class="my-button"
    :style="{'background-color': isWarning ? '#FC4': '#CCC'}"
  >
    {{ text }}
  </button>  
</template>

Reliure à 2 classes

Avec la liaison de classe, nous ajoutons une classe spécifique uniquement si la prop isWarning est vrai :

<template>
  <button 
    :class="['my-button', {'warning': isWarning}]"
  >
    {{ text }}
  </button>  
</template>

et ci-dessous dans la balise de style :

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  &.warning {
    background-color: #FC4;
  }
}
</style>

3 Classe calculée

Avec cette technique, on définit simplement un classes la valeur calculée qui renvoie une chaîne de noms de classe CSS basée sur la propriété du composant isWarning valeur:

computed: {
  classes () {
    if (this.isWarning) {
      return 'my-button warning';
    }

    return 'my-button';
  }
}

puis nous utilisons la liaison de classe que nous avons utilisée ci-dessus, en ne passant que la valeur calculée :

<template>
  <button :class="classes">
    {{ text }}
  </button>
</template> 

4 Style calculé avec variable CSS

Ahh, c’est la technique que j’aime le plus. C’est une variante de la précédente mais nous utilisons une liaison de style et une variable CSS afin de changer la couleur de fond.
Commençons par utiliser une variable CSS pour background-color biens:

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: var(--button-bg-color)
}
</style>

puis nous ajoutons une valeur calculée qui définit la valeur finale de notre --button-bg-color variable:

computed: {
  cssVars () {
    return {
      '--button-bg-color': this.isWarning ? '#FC4' : '#CCC'
    }
  }
}

et enfin, nous ajoutons une liaison de style à la balise button :

<template>
  <button 
    class="my-button"
    :style="cssVars"
  >
    {{ text }}
  </button>
</template>

5 composants stylisés

Styled-components est une célèbre bibliothèque CSS-in-JS utilisée notamment par les développeurs React… et vous pouvez également l’utiliser avec Vue.js. Vous pouvez trouver le package ici, veuillez noter qu’il n’est compatible qu’avec Vue 2.x.

Installez le package (en utilisant fils comme gestionnaire de packages) :

yarn add vue-styled-components

En raison de la simplicité du composant, nous le définissons à l’intérieur du composant parent à l’intérieur du script étiqueter. Tout d’abord, nous devons importer la bibliothèque :

import styled from 'vue-styled-components';

puis nous définissons le composant (un bouton stylisé) et sa propriété isWarning:

const btnProps = {
  isWarning: Boolean
}
const MyButton = styled('button', btnProps)`
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};
`;

Noter la background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};, ici, nous disons à la bibliothèque de modifier la propriété CSS en fonction de la prop isWarning valeur.

La dernière étape consiste à enregistrer le composant nouvellement créé et à l’utiliser dans le modèle :

....
  components: {
    MyButton
  }
...

<my-button :is-warning="true">
  Attention!
</my-button>

Outre la bibliothèque styled-components, il existe également d’autres bibliothèques CSS-in-JS utilisables pour Vue.js, par exemple Emotion via le package vue-emotion.

C’est tout, j’espère que cet article vous sera utile. Si vous connaissez d’autres techniques n’hésitez pas à m’écrire et je mettrai à jour l’article !

Merci d’avoir lu!