From 137a1b9cb733ef52df367e0617a9bbf55d92a3c7 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Fri, 7 Oct 2022 10:26:27 +0800
Subject: [PATCH] docs(Field): add label-align demo (#11121)

---
 packages/vant/src/field/README.md             | 15 ++++++++
 packages/vant/src/field/README.zh-CN.md       | 15 ++++++++
 packages/vant/src/field/demo/LabelAlign.vue   | 34 +++++++++++++++++++
 packages/vant/src/field/demo/index.vue        |  2 ++
 packages/vant/src/field/index.less            |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      | 23 +++++++++++++
 6 files changed, 90 insertions(+)
 create mode 100644 packages/vant/src/field/demo/LabelAlign.vue

diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md
index 2054e8aa8..ad56a0962 100644
--- a/packages/vant/src/field/README.md
+++ b/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
diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md
index bda44be3d..b25db2b7e 100644
--- a/packages/vant/src/field/README.zh-CN.md
+++ b/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
diff --git a/packages/vant/src/field/demo/LabelAlign.vue b/packages/vant/src/field/demo/LabelAlign.vue
new file mode 100644
index 000000000..3bde085c6
--- /dev/null
+++ b/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>
diff --git a/packages/vant/src/field/demo/index.vue b/packages/vant/src/field/demo/index.vue
index da39081d9..2b9f20ece 100644
--- a/packages/vant/src/field/demo/index.vue
+++ b/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>
diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less
index eead6bb4d..ec4955457 100644
--- a/packages/vant/src/field/index.less
+++ b/packages/vant/src/field/index.less
@@ -44,6 +44,7 @@
       display: flex;
       width: 100%;
       text-align: left;
+      margin-bottom: var(--van-padding-base);
     }
 
     &--required {
diff --git a/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap
index 82c78fdfe..a9e01b344 100644
--- a/packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap
+++ b/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>
 `;