Vuetify - 如何在表单上标记文本左侧和文本字段右侧

Posted 2023-02-23

【中文标题】Vuetify - 如何在表单上标记文本左侧和文本字段右侧

【英文标题】：Vuetify - How to do label text left and text field right on form

【发布时间】：2019-10-07 16:18:31

【问题描述】：

我想在 vuetify 中左标签右文本字段。

在 vuetify 主页使用中，标签和文本字段形式不是我的要求。

<v-text-field
    v-model="firstname"
    label="First name">
</v-text-field>

我想要 vuetify 表单上的左标签和右文本字段。

【参考方案1】：

使用 v-subheader 怎么样？由于没有这样的道具，您可以将文本字段标签设置在文本字段容器之外并与左侧对齐。

  <v-layout row>
    <v-flex xs1>
      <v-subheader>Label here</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
  </v-layout>

Codepen 链接here.

【讨论】：

感谢您对示例的关注和 codepen 链接。这是我的要求。很好。但是有一些水平对齐吗？您建议的代码 - 标签和文本字段最好水平对齐。

不，遗憾的是我没有找到任何可以将标签和文本字段设置为水平对齐的属性。此后我建议您采用上述方法。

【参考方案2】：

因为我没有足够的声誉，所以我不能发表评论。您可以通过在 v-subheader 中添加 class="my-4" 来进行水平对齐。数字越大标签越低

我在下面使用了 Riddhi 示例：

<v-layout row>
    <v-flex xs1>
      <v-subheader class="my-4">Label</v-subheader>
    </v-flex>
    <v-flex xs2>
      <v-text-field
      ></v-text-field>
    </v-flex>
 </v-layout>

【参考方案3】：

vuetify 版本 2.5.8

<v-row dense>
  <v-col cols="12" md="2">
    <v-list-item-content>Label</v-list-item-content>
  </v-col>
  <v-col cols="12" md="10">
    <v-text-field dense clearable></v-text-field>
  </v-col>
</v-row>