web-dev-qa-db-fra.com

Est-ce qu'il y a de toute façon pour supprimer l'ombre ou forcer le menu Vuetify pour aligner complètement avec le côté gauche de l'écran?

J'essaie d'utiliser le menu VUETIFIE dans une navigation dans la barre latérale. Je voudrais que le menu soit aligner parfaitement sur le côté gauche de l'écran. Au lieu de cela, ce que je reçois, c'est que le menu consiste à insister pour être positionné 12px du bord de mon écran et de démolir mon alignement.

Existe-t-il un moyen de désactiver l'ombre ou de forcer l'alignement? La gauche: 12px est spécifiée directement sur le style de l'élément afin que CSS n'a aucun effet.

J'ai essayé cela mais pas de chance:

<v-menu offset-y Nudge-left="-12" flat>

https://codepen.io/ruttyj/pen/bevnmy?editors=101

Des idées?

MISE À JOUR: Fabriqué des progrès: https://codepen.io/anon/pen/wblmob

Cela atteint l'effet mais nécessite le remplacement du menu du menu du niveau mondial à 0PX! Important.

cssvue.jsvuetify.js
6
Jord

Vous pouvez utiliser la directive elevation pour supprimer l'ombre.

Il suffit d'ajouter elevation="0" à votre élément.

https://vuetiquementjs.com/fr/styles/elevation

3
Nyagolova

Pour enlever l'ombre, vous pouvez simplement remplacer les styles pour .v-menu__content. Dans certains CSS:

.v-menu__content {
    box-shadow: none;
}

L'alignement sur la gauche peut être effectué en réglant les styles via JavaScript.

Cela dit, je pense qu'il est plus facile de faire un menu de barre latérale à partir de zéro que d'essayer de transformer un composant qui n'est pas destiné à être une barre latérale en un. Les transitions seront éteintes et tellement sur.

1
A. Seiji

Cela a fonctionné pour moi avec un composant de tiroir V-Navigation Vuetify 2.0

<v-menu class="elevation-0" >

1
cseguinlz

Je viens d'avoir un problème similaire mais avec un activateur de menu inférieur à 12px En haut de la page.

En regardant la source du composant VMenu (via la mixage du menu), vous pouvez voir que 12px Est une distance minimale codée dure. La seule façon de voir pour contourner ce problème est de remplacer !important Nuérez le CSS uniquement pour ces cas spécifiques.

Calcul de gauche : left = Math.max(left, 12);
[.____] calcul supérieur : return top < 12 ? 12 : top;

J'ai créé un émission Vuetify pour couvrir le cas top.

0
Matt