Vuetify v-dialog - Largeur dynamique

Parlez-vous de cette partie?:

<v-dialog
    v-model="dialog"
    width="500"
>

Si c'est le cas, pourquoi ne pas supprimer la partie width = "500" et partir sans? J'ai testé et ça s'étire dynamiquement. Cette option n'est pas obligatoire et rien ne casse si vous la supprimez.

Si j'ai mal compris quelque chose, n'hésitez pas à ajouter plus de détails.

Je pense que vous recherchez la propriété plein écran (booléen) ou, selon les besoins, la propriété max-width (Number) .

En définissant l'un de ceux-ci, vous contrôlez la largeur du dialogue en V en fonction de l'élément environnant. La largeur de l'élément environnant peut être ajustée via css, par ex. flexbox.

Définir la largeur sur "non défini" semble fonctionner, je n'ai pas encore découvert d'effets secondaires négatifs.

.v-dialog {
    width: unset;
}

ou CSS

<v-dialog v-model="dialog" width="unset">
    <YourDialogContent></YourDialogContent>
</v-dialog>

p>

Écrivez des règles CSS personnalisées et ne définissez pas d'accessoires width ou max-width . par exemple:

J'utilise une classe personnalisée afin de ne pas appliquer de règles à tous les v-dialog:

.v-dialog--custom {
  width: 100%;
}

/* Desktop */
@media screen and (min-width: 768px) {
  .v-dialog--custom {
    width: 50%;
  }
}

Et créer vos règles personnalisées:

<v-dialog v-model="dialog" content-class="v-dialog--custom">
   <!-- dialog content -->
</v-dialog>

Vous pouvez voir ceci sur codepen: https://codepen.io/hans-felix/pen/BajByxx

Pour le bureau

Je voudrais donc que la boîte de dialogue s’élargisse autant que nécessaire , pour tenir compte du tableau, puis se raccourcisse à nouveau en cliquant sur l’un des 3 premiers onglets.

Pour le bureau, nous pouvons définir facilement la largeur dynamique pour v-dialog en fonction du contenu de la boîte de dialogue, en définissant manuellement width = "auto" (avec plus d'espace).

<template>
  <v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

Pour mobile

En raison de l'espace limité, les boîtes de dialogue plein écran peuvent être plus appropriées pour les appareils mobiles que les boîtes de dialogue utilisées sur appareils avec des écrans plus grands. Mais vous devez définir la boîte de dialogue en plein écran uniquement sur les appareils mobiles. Nous pouvons facilement définir un plein écran dynamique en utilisant Vuetify points d'arrêt comme:

<template>
  <v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

Version finale

Nous pouvons combiner les deux logiques en une seule comme:

<template>
  <v-dialog width="auto ">
    ...
  </v-dialog>
</template>

Démo de travail | Code Pen

Sur le bureau strong >

• Si nous ouvrons la boîte de dialogue à l'aide du bouton cliquez-moi, nous pouvons voir que la boîte de dialogue a une petite largeur car le contenu des onglets 1 et 2 est très petit. Mais si nous cliquons sur l'onglet 3, qui a une grande table de données, vous pouvez voir que la largeur et la hauteur de la boîte de dialogue augmentent automatiquement. Vous pouvez basculer entre les onglets et le voir à nouveau.

Sur mobile

• Si vous ouvrez cette démo sur mobile, vous pouvez voir que la boîte de dialogue s'ouvre en plein écran par défaut et que la largeur est constante.