我可以更改 Vuetify 的轮廓文本字段标签位置和行间隔吗？

Question

我正在使用 Vuetify 尝试接近 this 文本字段样式。我正在使用 outlined textfield 为它们提供的简单自定义样式，但我无法更改其标签位置。有什么办法可以改变标签位置和线条开始和结束的“间隔”？

我尝试在他们的文档中搜索并找到 this 会话，但在更改 $text-field-outlined-label-position-x 或 $text-field-outlined-label-position-y 时没有运气。

编辑：这是我能达到的最好的，这实际上是带有圆形边框的默认轮廓文本字段。

提前致谢！

Answer 1

1
投票

尝试

<v-text rounded=rounded-lg> <v-text/>

Answer 2

我自己想出来了。

我们可以更改 v-text-field 的 Vuetify 类上的边距来更改其位置。只需根据自己的余量进行更改即可，一切正常！

.v-text-field__slot {
    margin-left: 20px;
}

.v-input__slot > fieldset > legend {
    margin-left: 20px;
}

编辑：我的答案现在已经过时了。在 Vuetify 中有更好的方法来舍入内容