web-dev-qa-db-fra.com

Changer la taille de la police dans Vuetify en fonction de la fenêtre?

J'ai un titre:

<v-card-text style="font-size:5em">
    Some Heading Here
</v-card-text>

Je voudrais définir la taille de la police sur 3em lorsque la vue est XS. À l'heure actuelle, je l'ai dupliqué comme suit:

<v-card-text hidden-xs-only style="font-size:5em">
    Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
    Some Heading Here
</v-card-text>

Cependant, je voudrais éviter cette duplication et résoudre le problème avec CSS seul, mais sans avoir à écrire mon propre @media requêtes dans le fichier .vue local. Est-ce possible?

Alternativement, je suis d'accord avec l'utilisation de classes prédéfinies au lieu de spécifier directement la taille de la police ou même différents éléments, par exemple quelque chose comme <h3> quand c'est XS mais <h2> sur d'autres fenêtres.

cssvue.jsviewportvuetify.js
12
ierdna

Moi aussi, j'ai essayé de résoudre cette énigme, car il semble dégoûtant d'atteindre en javascript pour gérer les changements de style simples pour différentes tailles d'appareils.

Il s'avère que la génération de règles css personnalisées pour différents points d'arrêt est assez facile car Vuetify utilise Stylus et attribue les points d'arrêt à une variable Stylus. Naturellement, cette variable est disponible dans vos composants et fichiers de style personnalisés vue (à condition que vous disposiez de la configuration de préprocesseur appropriée pour compiler le stylet).

Voici quelques ressources qui m'ont aidé à mieux comprendre les choses:

  1. Configuration du pré-processeur:

  2. Modification des variables du stylet - Vuetify:

  3. Requêtes Stylus @media - http://stylus-lang.com/docs/media.html

Comme vous le verrez, l'objet stylet $ display-breakpoints est votre nouveau meilleur ami!

Faites le résumé, et voici ce que vous obtenez dans un composant de fichier unique Vue:

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-card-title class="custom-selector headline">
          Welcome to the Vuetify + Nuxt.js template
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  // ...
}
</script>

<style lang="styl">
.custom-selector
  font-size 3em
  @media $display-breakpoints.xs-only
    font-size 2em
  @media $display-breakpoints.lg-and-up
    font-size 5em
</style>

Remarquez dans le code ci-dessus, nous changeons la taille de la police du <v-card-title> en le ciblant dans nos requêtes multimédias Stylus et en utilisant l'objet $ display-breakpoints pour identifier le point d'arrêt souhaité.

Je pense que l'avantage de ne pas avoir un cadre d'interface utilisateur qui génère chaque option à chaque point d'arrêt est un fichier beaucoup plus petit à charger. Il semble que Vuetify + Stylus soit une approche plus légère qui rend l'écriture de requêtes @media personnalisées l'approche la plus simple et la plus efficace.

6
CICSolutions

Vous pouvez appliquer une classe basée sur la fenêtre

:class="{'subheading': $vuetify.breakpoint.xs}"
11
Igor Kokotko

Vous pouvez utiliser l'objet Breakpoint, fourni et suivi par Vuetify lui-même. Citant les docs :

Vuetify convertit les points d'arrêt disponibles en un objet accessible à partir de votre application. Cela vous permettra d'attribuer/d'appliquer des propriétés et des attributs spécifiques en fonction de la taille de la fenêtre.

Une manière possible (et plutôt directe) est mentionnée dans la même docpage - en utilisant la propriété calculée pour calculer la taille de la police:

computed: {
  fontSize() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return '3em';
      default: return '5em';
    }
  }
}

... et utilisez-le directement dans votre modèle. Bien sûr, vous pouvez faire la même chose avec le nom de classe dynamique à la place - appliqué sur $vuetify.breakpoint.xsOnly, par exemple.

9
raina77ow