docs(Field): add label-align demo (#11121)

packages/vant/src/field/README.md

@@ -241,6 +241,21 @@ Use `input-align` prop to align the input value.
 </van-cell-group>
 ```
 
+### Label Align
+
+Use `label-align` prop to align the input value.
+
+```html
+<van-cell-group inset>
+  <van-field
+    v-model="value"
+    label="Tel"
+    placeholder="Please input tel number"
+    input-align="top"
+  />
+</van-cell-group>
+```
+
 ## API
 
 ### Props

packages/vant/src/field/README.zh-CN.md

@@ -260,6 +260,21 @@ export default {
 </van-cell-group>
 ```
 
+### 输入框文本位置
+
+通过 `label-align` 属性可以设置输入框文本的位置，可选值为 `center`、`right`、`top`。
+
+```html
+<van-cell-group inset>
+  <van-field
+    v-model="value"
+    label="手机号"
+    placeholder="请输入手机号"
+    input-align="top"
+  />
+</van-cell-group>
+```
+
 ## API
 
 ### Props

packages/vant/src/field/demo/LabelAlign.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
+import { ref } from 'vue';
+import { useTranslate } from '../../../docs/site';
+
+const t = useTranslate({
+  'zh-CN': {
+    text: '手机号',
+    labelAlign: '输入框文本位置',
+    alignPlaceHolder: '请输入手机号',
+  },
+  'en-US': {
+    text: 'Tel',
+    labelAlign: 'Label Align',
+    alignPlaceHolder: 'Please input tel number',
+  },
+});
+
+const value = ref('');
+</script>
+
+<template>
+  <demo-block :title="t('labelAlign')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('alignPlaceHolder')"
+        label-align="top"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

packages/vant/src/field/demo/index.vue

@@ -9,6 +9,7 @@ import FormatValue from './FormatValue.vue';
 import Autosize from './Autosize.vue';
 import ShowWordLimit from './ShowWordLimit.vue';
 import InputAlign from './InputAlign.vue';
+import LabelAlign from './LabelAlign.vue';
 </script>
 
 <template>
@@ -22,4 +23,5 @@ import InputAlign from './InputAlign.vue';
   <autosize />
   <show-word-limit />
   <input-align />
+  <label-align />
 </template>

packages/vant/src/field/index.less

@@ -44,6 +44,7 @@
       display: flex;
       width: 100%;
       text-align: left;
+      margin-bottom: var(--van-padding-base);
     }
 
     &--required {

packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap

@@ -417,4 +417,27 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-cell-group van-cell-group--inset">
+    <div class="van-cell van-field van-field--label-top">
+      <div class="van-cell__title van-field__label van-field__label--top">
+        <label id="van-field-label"
+               for="van-field-input"
+        >
+          Tel
+        </label>
+      </div>
+      <div class="van-cell__value van-field__value">
+        <div class="van-field__body">
+          <input type="text"
+                 id="van-field-input"
+                 class="van-field__control"
+                 placeholder="Please input tel number"
+                 aria-labelledby="van-field-label"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;