R4A.10 - Compléments Web (vuejs)

   TD n°1 : Vuetify

Imprimer
Détails
Catégorie : R4A.10 - Compléments web (vuejs)
Affichages : 47

L'archive des sources (répertoire src) pour les démonstrations est téléchargeable [ ici ].

 1°/ Objectifs de Vuetify

2°/ Utilisation de Vuetify dans un projet vuejs

2.1°/ Création d'un projet vide

2.2°/ Ajout de plugins (pinia, vue-router, ...)

import vuetify from './vuetify'

export function registerPlugins (app) {
  app.use(vuetify)
}


import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // définir les routes
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
})

export default router

import vuetify from './vuetify'
import { createPinia } from 'pinia'
import router from '@/router/index.js'

export function registerPlugins (app) {
  app.use(vuetify)
  app.use(createPinia())
  app.use(router)
}

 

3°/ Principes fondamentaux de Vuetify

3.1°/ les composants vuetify.

Exemple, avec un bouton vuetify :

<template>
  <div>
    <v-btn>Clic</v-btn>
  </div>
</template>

 

Exemple, bouton rouge, marges de 40 pixels et padding de 8 pixels :

<template>
  <div>
    <v-btn
      class="ma-10 pa-2"
      color="red"
    >
      Clic
    </v-btn>
  </div>
</template>

 

3.2°/ La grille de positionnement

Exemple, 1 seule ligne et 2 colonnes, par défaut de rapport de taille 1/5, et de rapport 1/2 pour les supports md et au-delà :

<v-container>
  <v-row>
    <v-col cols="2" md="4">
      <v-btn block> Bouton 1 </v-btn>
    </v-col>
    <v-col cols="10" md="8">
      <v-btn block> Bouton 2 </v-btn>
    </v-col>
  </v-row>
<v-container>

Démonstration n°1 :

 

4°/ exemples

4.1°/ customiser un bouton

Démonstration n°2 :

Remarques :

 

4.2°/ Dialog & Cards

<template>
  <v-dialog v-model="show">
    ...
    <v-btn @click="show=false"> Close </v-btn>
    ...
  </v-dialog>
  <v-btn @click="show=true"> Open <v-btn>
</template>
<script setup>
...
const show = ref(false)
</script>
  ... définition de la fenêtre de dialogue
</v-dialog>

Démonstration n°3 :

 

4.3°/ Table de données

Exemple basique, avec un tableau de nom/prénom, seule la colonne nom peut être triée :

<template>
  <v-data-table
    :headers="titres"
    :items="infos"
    ...
  >
</template>
<script setup>
...
const  titres = ref([
      {text: 'Nom', value: 'lastName'},
      {text: 'Prenom', value: 'firstName'}
    ])
const infos = ref( [
      {id:0, lastName:'Dupond', firstName:'jean'},
      {id:1, lastName:'Durand', firstName:'alcyonne', sortable: false},
    ])
</script>

 

Exemple :

<template>
  <v-text-field
    v-model="mysearch"
    label="chercher"
  ></v-text-field>
  <v-data-table
    :headers="titres"
    :items="infos"
    :search="mysearch"
  ></v-data-table>
</template>
<script setup>
...
const mysearch = ref("")
</script>

Démonstration n°4 :

Remarques :

 

4.4°/ Groupes d'éléments

Pour les groupes de boutons :

Pour les groupes de chips :

Pour les groupes d'items :

Pour les listes d'items :

Pour un emplacement multi-contenu :

Pour un multi-contenu avec pagination :

 

Démonstration n°5 :

  

4.5°/ Barre de navigation, Suivre des routes & divers bonus

 

 

 

Démonstration n°6 :

Remarques :