我需要垂直和水平对齐Vuetify组件
版本
版本2.6.10验证版本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>
2条答案
按热度按时间qv7cva1a1#
第2版
第3版
watbbzwu2#
snackbar很难垂直对齐的原因基本上是因为它不是设计来做这个的。Vuetify只是Google的Material Design规范的一个实现。就我个人而言，我喜欢Vuetify，也经常使用它，但要记住它只是一个组件库，所以他们的文档主要集中在***如何***使用组件上。没有关于***使用哪个组件***或何时***应该***或***不应该***使用某个特定组件的指导。这就是为什么我总是参考material.io来获取这些信息，以确保我不是在以一种违反***材料设计***规则的方式拼凑***材料组件***。
如您所见：https://material.io/components/snackbars snackbar被特别假定在屏幕的底部。
要获得您想要的样式，您需要在Vuetify库中使用的UI组件是
v-dialog。https://vuetifyjs.com/en/components/dialogs/在其核心，它只是将组件居中（通常是一张卡片），同时提供了一种简单的方式将其可见性绑定到一个 prop ，甚至给你一个hide-overlayprop 。所以使用该组件，你可以得到你想要的风格，只需确保将组件放置在UI的正中央不会导致糟糕的UX。Material.io在为正确的任务选择正确的组件方面提供了一些很好的指导：https://material.io/components/dialogs#usage