Recommandation de la bibliothèque de composants Vue : analyse approfondie de Buefy

Buefy est une bibliothèque de composants d'interface utilisateur open source basée sur Vue.js et Bulma CSS pour créer rapidement des applications Web belles et faciles à entretenir. En raison du cycle de vie et de la nature des composants de Vue.js, Buefy est en mesure de fournir des composants clairement hiérarchiques afin que les utilisateurs puissent organiser et utiliser leur code plus clairement.

Buefy est déjà livré avec de nombreux composants riches en fonctionnalités, notamment des formulaires, des barres d'onglets, des boîtes modales, des curseurs, des sélecteurs de date, des carrousels, des barres de progression, des boîtes de dialogue et des menus, ainsi que des outils et plug-ins auxiliaires.

Dans cet article, nous examinerons en profondeur les principaux composants de Buefy et comment les utiliser, et fournirons des exemples de code exploitables pour vous aider à mieux comprendre cette bibliothèque de composants utile.

Installation

Avant de commencer à utiliser Buefy, vous devez l'installer dans votre application Vue.js. Vous pouvez l'installer via le gestionnaire de packages npm comme suit :

npm install buefy

Une fois que vous avez installé Buefy avec succès, vous devez l'introduire dans votre application Vue.js. Vous pouvez l'introduire directement dans un composant Vue.js, ou l'introduire dans une instance globale de Vue.js pour le rendre disponible dans toute votre application. Voici l'exemple de code pour référencer Buefy dans un composant Vue.js :

<template>
  <div>
    <b-button>Click me</b-button>
  </div>
</template>

<script>
import Buefy from 'buefy';
import Vue from 'vue';

Vue.use(Buefy);
</script>

Ici, nous avons créé un composant bouton simple en utilisant Buefy et l'avons référencé dans l'instance Vue.js via la méthode Vue.use().

Utilisation

Maintenant que Buefy est installé et référencé avec succès, examinons de plus près ses principaux composants et comment les utiliser.

Formulaire

Les composants de formulaire dans Buefy sont très puissants, notamment les composants de saisie, de sélection, de case à cocher, de bouton radio et de commutateur. Voici un exemple de formulaire de base utilisant Buefy :

<template>
  <div>
    <b-field label="Username">
      <b-input placeholder="Enter your username"></b-input>
    </b-field>
    <b-field label="Password">
      <b-input type="password" placeholder="Enter your password"></b-input>
    </b-field>
    <b-field label="Gender">
      <b-radio-group>
        <b-radio name="gender">Male</b-radio>
        <b-radio name="gender">Female</b-radio>
      </b-radio-group>
    </b-field>
    <b-field label="Favorite Colors">
      <b-checkbox-group>
        <b-checkbox name="color">Red</b-checkbox>
        <b-checkbox name="color">Green</b-checkbox>
        <b-checkbox name="color">Blue</b-checkbox>
      </b-checkbox-group>
    </b-field>
    <b-field>
      <b-switch></b-switch>
      <span>Remember me?</span>
    </b-field>
    <b-field>
      <b-button type="is-primary">Submit</b-button>
    </b-field>
  </div>
</template>

<script>
import { BField, BInput, BRadioGroup, BRadio, BCheckboxGroup, BCheckbox, BSwitch, BButton } from 'buefy';
export default {
  components: {
    BField,
    BInput,
    BRadioGroup,
    BRadio,
    BCheckboxGroup,
    BCheckbox,
    BSwitch,
    BButton,
  },
};
</script>

Ce formulaire comprend des composants tels que des composants de saisie, un mot de passe, des cases radio et à sélection multiple, des commutateurs et des boutons de soumission. Chaque composant est inclus dans les champs de formulaire de Buefy pour nous aider à créer et gérer plus facilement les entrées de formulaire.

Barre d'onglets

La barre d'onglets est un élément d'interface utilisateur courant qui peut être utilisé pour regrouper le contenu d'une page ou regrouper les liens de navigation. La barre d'onglets de Buefy est très simple à utiliser, il suffit d'ajouter les onglets appropriés. Voici un exemple de barre d'onglets de base utilisant Buefy :

<template>
  <div>
    <b-tabs>
      <b-tab-item label="Home">
        Welcome to the homepage
      </b-tab-item>
      <b-tab-item label="Profile">
        Here is your profile information
      </b-tab-item>
      <b-tab-item label="Messages">
        You have 15 new messages
      </b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
import { BTabs, BTabItem } from 'buefy';
export default {
  components: {
    BTabs,
    BTabItem,
  },
};
</script>

Cette barre d'onglets contient trois onglets intitulés "Accueil", "Profil" et "Messages". Chaque balise a un contenu correspondant qui sera affiché en fonction de la balise sélectionnée.

Boîtes modales

Les boîtes modales peuvent être utilisées pour afficher certaines invites, des informations de confirmation ou mettre en évidence certains contenus. Les modaux de Buefy sont très flexibles et personnalisables pour répondre à différents besoins. Voici un exemple modal de base utilisant Buefy :

<template>
  <div>
    <b-button @click="showModal = true">Show Modal</b-button>
    <b-modal :active.sync="showModal">
      <p>Are you sure you want to delete this item?</p>
      <b-button type="is-danger" @click="deleteItem">Yes, delete it</b-button>
      <b-button @click="showModal = false">Cancel</b-button>
    </b-modal>
  </div>
</template>

<script>
import { BButton, BModal } from 'buefy';
export default {
  components: {
    BButton,
    BModal,
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    deleteItem() {
      console.log('Item deleted!');
      this.showModal = false;
    },
  },
};
</script>

Ce modal contient un bouton "Afficher le modal" qui, une fois cliqué, affichera le modal. Le modal contient du texte, ainsi qu'un bouton "Oui, supprimez-le" et un bouton "Annuler". Lorsque l'utilisateur clique sur le bouton "Oui, supprimez-le", la méthode deleteItem() sera exécutée et la boîte modale sera fermée.

Curseur

Un curseur est un composant d'interface utilisateur utile si vous devez ajuster des valeurs numériques dans votre application. Les curseurs dans Buefy fournissent plusieurs options et événements personnalisés afin que vous puissiez utiliser les contrôleurs de formulaire de curseur. Voici un exemple de curseur de base utilisant Buefy :

<template>
  <div>
    <b-slider v-model="sliderValue" min="0" max="100"></b-slider>
    <p>{{ sliderValue }}</p>
  </div>
</template>

<script>
import { BSlider } from 'buefy';
export default {
  components: {
    BSlider,
  },
  data() {
    return {
      sliderValue: 50,
    };
  },
};
</script>

Ce curseur permet à l'utilisateur d'ajuster la valeur entre 0 et 100. La position du curseur se déplacera en fonction du glissement de l'utilisateur et la sélection actuelle sera affichée en dessous de la valeur.

Date Picker

Un sélecteur de date est un composant d'interface utilisateur très utile si vous devez permettre aux utilisateurs de sélectionner une date ou une plage de dates. Les sélecteurs de dates dans Buefy incluent des vues radio, plage et calendrier, ainsi que des options telles que le catalogue personnalisé et le jour de début de la semaine. Voici un exemple de sélecteur de date de base utilisant Buefy :

<template>
  <div>
    <b-datepicker v-model="selectedDate"></b-datepicker>
    <p>Date selected: {{ selectedDate }}</p>
  </div>
</template>

<script>
import { BDatepicker } from 'buefy';
export default {
  components: {
    BDatepicker,
  },
  data() {
    return {
      selectedDate: null,
    };
  },
};
</script>

Ce sélecteur de date permet à l'utilisateur de sélectionner une date et la date sélectionnée sera affichée ci-dessous.

Barre de progression

La barre de progression peut être utilisée pour afficher la progression ou l'état d'une opération dans une application. Les barres de progression de Buefy sont dotées d'une variété de styles et d'options de personnalisation pour vous aider à mieux contrôler leur apparence et leur comportement. Voici un exemple de barre de progression de base utilisant Buefy :

<template>
  <div>
    <b-progress :value="progressValue" :max="maxValue" type="is-primary"></b-progress>
    <p>Progress: {{ progressValue }}%</p>
    <b-button @click="increaseProgress">Increase Progress</b-button>
  </div>
</template>

<script>
import { BProgress, BButton } from 'buefy';
export default {
  components: {
    BProgress,
    BButton,
  },
  data() {
    return {
      progressValue: 25,
      maxValue: 100,
    };
  },
  methods: {
    increaseProgress() {
      if (this.progressValue < this.maxValue) {
        this.progressValue += 25;
      } else {
        this.progressValue = 0;
      }
    },
  },
};
</script>

Cette barre de progression affichera la progression actuelle et un bouton "Augmenter la progression" qui augmentera la valeur de progression et recommencera lorsqu'elle atteindra la valeur maximale.

Conclusion

Dans cet article, nous avons approfondi les principaux composants de Buefy et comment les utiliser, et avons fourni des exemples de code exploitables pour vous aider à mieux comprendre cette bibliothèque de composants utiles. Buefy est un framework d'interface utilisateur facile à utiliser et hautement personnalisable que les développeurs débutants et expérimentés peuvent utiliser pour créer de superbes applications Web. Par conséquent, si vous développez des applications Web à l'aide de Vue.js, Buefy sera un outil très utile.

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!