javascript - How to align Vuetify snackbar component vertically to the center? - Stack Overflow

admin管理员组

文章数量:1401184

I need to align the Vuetify ponent vertically and horizontally

Versions

vue 2.6.10 vuetify 2.1.10

This is the current code of the ponent Snackbar

<v-snackbar
    class="no-shadow"
    v-model="snackbarShow"
    :color="snackbarType"
    :timeout="snackbarTimeout"
>
  <v-icon class="mr-3">{{ snackbarIcon }}</v-icon>
  <div>{{ snackbarText }}</div>
  <v-btn text icon color="white" @click="snackbarShow = false">
    <v-icon color="white">mdi-close-circle</v-icon>
  </v-btn>
</v-snackbar>

I need to align the Vuetify ponent vertically and horizontally

Versions

vue 2.6.10 vuetify 2.1.10

This is the current code of the ponent Snackbar

<v-snackbar
    class="no-shadow"
    v-model="snackbarShow"
    :color="snackbarType"
    :timeout="snackbarTimeout"
>
  <v-icon class="mr-3">{{ snackbarIcon }}</v-icon>
  <div>{{ snackbarText }}</div>
  <v-btn text icon color="white" @click="snackbarShow = false">
    <v-icon color="white">mdi-close-circle</v-icon>
  </v-btn>
</v-snackbar>

• javascript
• vue.js
• vue-ponent
• vuetify.js

Share Improve this question Follow asked Oct 2, 2020 at 16:45 Jorge GaticaJorge Gatica 10911 gold badge44 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

v2

<v-snackbar centered />

v3

<v-snackbar v-model="snackbar" timeout="5000" location="center">

The reason a snackbar is difficult to align vertically is basically because it is not designed to do this. Vuetify is just one implementation of Google's Material Design specification. Personally, I love Vuetify and use it a lot, but remember it's just a ponent library, so their documentation primarily focuses on how to use the ponents, with no guidance on which ponent to use or when you should or shouldn't use a particular ponent. That's why I always reference material.io for that information, to make sure I'm not just piecing together material ponents in a way that breaks material design rules.

As you can see here: https://material.io/ponents/snackbars snackbars are specifically supposed to be at the bottom of the screen.

To get the style you're after, the UI ponent you want in the Vuetify library is v-dialog. https://vuetifyjs./en/ponents/dialogs/ At its heart, it just centers a ponent (usually a card) horizontally and vertically, while providing an easy way to bind its visibility to a prop and even gives you a hide-overlay prop. So using that ponent, you could get the style you're after, pretty much 'out of the box.' Just make sure that placing a ponent in the dead center of the UI doesn't make for a bad UX. Material.io has some excellent guidance in picking the right ponent for the right task: https://material.io/ponents/dialogs#usage

本文标签： javascriptHow to align Vuetify snackbar component vertically to the centerStack Overflow