如果我在 v-app-bar
中添加一个 v-autocomplete
它会出现在应用栏的顶部,那里的其他所有内容都居中。
<v-app-bar app color="primary" dark>
<v-icon class="mr-3">mdi-chart-line</v-icon>
<v-toolbar-title>Centered title</v-toolbar-title>
<v-autocomplete
filled
></v-autocomplete>
<v-spacer />
<v-btn to="/products" nuxt text>
Centered button
</v-btn>
</v-app-bar>
我是否缺少某些选项?或者我应该在自动完成周围包装一些其他元素?我尝试添加尽可能少的自定义 CSS,以便以后可以轻松更新。
看起来像这样:
最佳答案
这是因为此组件提供的详细信息。例如错误信息或提示。因此,如果您想要这些功能,您可以使用 height
属性增加应用栏的 height
。
如果您不需要它们,您可以将hide-details
添加到v-autocomplete
。
这将使组件适合应用栏,如果你想要更小的输入,你可以添加 dense
到它。变小或增加应用栏的高度
。
所以最终代码是:
<div id="app">
<v-app id="inspire">
<v-app-bar app color="primary" dark>
<v-icon class="mr-3">mdi-chart-line</v-icon>
<v-toolbar-title>Centered title</v-toolbar-title>
<v-autocomplete
filled dense hide-details
></v-autocomplete>
<v-spacer />
<v-btn to="/products" nuxt text>
Centered button
</v-btn>
</v-app-bar>
</v-app>
</div>
关于javascript - Vuetify 在应用栏中垂直居中自动完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61976850/