Как выровнять компонент Vuetify snackbar вертикально по центру?

#javascript #vue.js #vue-component #vuetify.js

#javascript #vue.js #vue-компонент #vuetify.js

Вопрос:

Мне нужно выровнять компонент Vuetify по вертикали и горизонтали

Версии

vue 2.6.10 vuetify 2.1.10

Это текущий код компонента 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>

Ответ №1:

 <v-snackbar centered />

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

1. Наличие этого свойства centered выравнивает его только по горизонтали, но не по вертикали, то есть я остаюсь в центре, но внизу страницы

2.@JorgeGatica Positions the snackbar in the center of the screen, (x and y axis). vuetifyjs.com/en/api/v-snackbar/#props

3. Хотя верно, что centered должен, в паре с absolute , центрироваться по вертикали… У меня были проблемы, когда использование absolute вместе с centered не работало. Поэтому попробуйте удалить абсолютную опору, чтобы центрировать ее, если она все еще остается сверху / снизу.

4. Для версии v3: <v-snackbar v-model=»snackbar» timeout=»5000″ location=»center»>

Ответ №2:

Причина, по которой snackbar сложно выровнять по вертикали, в основном потому, что он не предназначен для этого. Vuetify — это всего лишь одна из реализаций спецификации Google Material Design. Лично я люблю Vuetify и часто использую его, но помните, что это всего лишь библиотека компонентов, поэтому их документация в основном посвящена использованию компонентов, без указаний на то, какой компонент использовать или когда вы должны или не должны использовать конкретный компонент. Вот почему я всегда ссылаюсь material.io для получения этой информации, чтобы убедиться, что я не просто собираю воедино материальные компоненты таким образом, который нарушает правила материального дизайна.

Как вы можете видеть здесь: https://material.io/components/snackbars закусочные специально должны находиться в нижней части экрана.

Чтобы получить нужный вам стиль, компонент пользовательского интерфейса, который вы хотите использовать в библиотеке Vuetify, является v-dialog . https://vuetifyjs.com/en/components/dialogs/По сути, он просто центрирует компонент (обычно карточку) по горизонтали и вертикали, предоставляя простой способ привязать его видимость к реквизиту и даже дает вам hide-overlay реквизит. Таким образом, используя этот компонент, вы можете получить нужный вам стиль практически «из коробки». Просто убедитесь, что размещение компонента в мертвой точке пользовательского интерфейса не приводит к ухудшению пользовательского интерфейса. Material.io содержит несколько отличных рекомендаций по выбору правильного компонента для правильной задачи: https://material.io/components/dialogs#usage