From 81dda09197ffd421a2c2f041987f2e800010f736 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Mon, 23 Jan 2023 20:55:54 +0800
Subject: [PATCH] docs(Checkbox): add label-position demo (#11509)

---
 packages/vant/src/checkbox/README.md          |  8 +++++
 packages/vant/src/checkbox/README.zh-CN.md    |  8 +++++
 packages/vant/src/checkbox/demo/index.vue     |  9 ++++++
 .../test/__snapshots__/demo.spec.ts.snap      | 15 +++++++++
 packages/vant/src/radio/README.md             | 11 +++++++
 packages/vant/src/radio/README.zh-CN.md       | 11 +++++++
 packages/vant/src/radio/demo/index.vue        | 12 ++++++-
 .../test/__snapshots__/demo.spec.ts.snap      | 32 +++++++++++++++++++
 8 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/packages/vant/src/checkbox/README.md b/packages/vant/src/checkbox/README.md
index 46361f904..f70a579a5 100644
--- a/packages/vant/src/checkbox/README.md
+++ b/packages/vant/src/checkbox/README.md
@@ -98,6 +98,14 @@ export default {
 };
 ```
 
+### Left Label
+
+Set `label-position` prop to `'left'` to adjust the label position to the left of the Checkbox.
+
+```html
+<van-checkbox v-model="checked" label-position="left">Checkbox</van-checkbox>
+```
+
 ### Disable Label Click
 
 ```html
diff --git a/packages/vant/src/checkbox/README.zh-CN.md b/packages/vant/src/checkbox/README.zh-CN.md
index 57532f4fd..3cf356c8c 100644
--- a/packages/vant/src/checkbox/README.zh-CN.md
+++ b/packages/vant/src/checkbox/README.zh-CN.md
@@ -106,6 +106,14 @@ export default {
 };
 ```
 
+### 左侧文本
+
+将 `label-position` 属性设置为 `'left'`，可以将文本位置调整到复选框左侧。
+
+```html
+<van-checkbox v-model="checked" label-position="left">复选框</van-checkbox>
+```
+
 ### 禁用文本点击
 
 设置 `label-disabled` 属性后，点击图标以外的内容不会触发复选框切换。
diff --git a/packages/vant/src/checkbox/demo/index.vue b/packages/vant/src/checkbox/demo/index.vue
index 33b72081f..c8da877bd 100644
--- a/packages/vant/src/checkbox/demo/index.vue
+++ b/packages/vant/src/checkbox/demo/index.vue
@@ -17,6 +17,7 @@ const t = useTranslate({
     customIconSize: '自定义大小',
     customColor: '自定义颜色',
     customShape: '自定义形状',
+    leftLabel: '左侧文本',
     title3: '复选框组',
     title4: '限制最大可选数',
     title5: '搭配单元格组件使用',
@@ -32,6 +33,7 @@ const t = useTranslate({
     customIconSize: 'Custom Icon Size',
     customColor: 'Custom Color',
     customShape: 'Custom Shape',
+    leftLabel: 'Left Label',
     title3: 'Checkbox Group',
     title4: 'Maximum amount of checked options',
     title5: 'Inside a Cell',
@@ -50,6 +52,7 @@ const state = reactive({
   checkboxShape: true,
   checkboxLabel: true,
   checkboxIcon: true,
+  leftLabel: false,
   list: ['a', 'b'],
   result: ['a', 'b'],
   result2: [],
@@ -118,6 +121,12 @@ const toggleAll = () => {
     </van-checkbox>
   </demo-block>
 
+  <demo-block :title="t('leftLabel')">
+    <van-checkbox v-model="state.leftLabel" label-position="left">
+      {{ t('leftLabel') }}
+    </van-checkbox>
+  </demo-block>
+
   <demo-block :title="t('disableLabel')">
     <van-checkbox v-model="state.checkboxLabel" label-disabled>
       {{ t('checkbox') }}
diff --git a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
index 2a2fc8bf5..b27a6b5ff 100644
--- a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
@@ -105,6 +105,21 @@ exports[`should render demo and match snapshot 1`] = `
     </span>
   </div>
 </div>
+<div>
+  <div role="checkbox"
+       class="van-checkbox"
+       tabindex="0"
+       aria-checked="false"
+  >
+    <span class="van-checkbox__label van-checkbox__label--left">
+      Left Label
+    </span>
+    <div class="van-checkbox__icon van-checkbox__icon--round">
+      <i class="van-badge__wrapper van-icon van-icon-success">
+      </i>
+    </div>
+  </div>
+</div>
 <div>
   <div role="checkbox"
        class="van-checkbox van-checkbox--label-disabled"
diff --git a/packages/vant/src/radio/README.md b/packages/vant/src/radio/README.md
index 02a8a05ab..315063b50 100644
--- a/packages/vant/src/radio/README.md
+++ b/packages/vant/src/radio/README.md
@@ -130,6 +130,17 @@ export default {
 };
 ```
 
+### Left Label
+
+Set `label-position` prop to `'left'` to adjust the label position to the left of the Radio.
+
+```html
+<van-radio-group v-model="checked">
+  <van-radio name="1" label-position="left">Radio 1</van-radio>
+  <van-radio name="2" label-position="left">Radio 2</van-radio>
+</van-radio-group>
+```
+
 ### Disable Label Click
 
 ```html
diff --git a/packages/vant/src/radio/README.zh-CN.md b/packages/vant/src/radio/README.zh-CN.md
index 1116c7de2..6098d97cb 100644
--- a/packages/vant/src/radio/README.zh-CN.md
+++ b/packages/vant/src/radio/README.zh-CN.md
@@ -140,6 +140,17 @@ export default {
 };
 ```
 
+### 左侧文本
+
+将 `label-position` 属性设置为 `'left'`，可以将文本位置调整到单选框左侧。
+
+```html
+<van-radio-group v-model="checked">
+  <van-radio name="1" label-position="left">单选框 1</van-radio>
+  <van-radio name="2" label-position="left">单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 禁用文本点击
 
 设置 `label-disabled` 属性后，点击图标以外的内容不会触发单选框切换。
diff --git a/packages/vant/src/radio/demo/index.vue b/packages/vant/src/radio/demo/index.vue
index b6474865d..ea031a375 100644
--- a/packages/vant/src/radio/demo/index.vue
+++ b/packages/vant/src/radio/demo/index.vue
@@ -13,6 +13,7 @@ const t = useTranslate({
     text2: '选中且禁用',
     withCell: '搭配单元格组件使用',
     horizontal: '水平排列',
+    leftLabel: '左侧文本',
     customIcon: '自定义图标',
     customColor: '自定义颜色',
     customShape: '自定义形状',
@@ -24,7 +25,8 @@ const t = useTranslate({
     text1: 'Disabled',
     text2: 'Disabled and checked',
     withCell: 'Inside a Cell',
-    horizontal: 'Hrizontal',
+    horizontal: 'Horizontal',
+    leftLabel: 'Left Label',
     customIcon: 'Custom Icon',
     customColor: 'Custom Color',
     customShape: 'Custom Shape',
@@ -42,6 +44,7 @@ const radioLabel = ref('1');
 const radioShape = ref('1');
 const radioIconSize = ref('1');
 const radioHorizontal = ref('1');
+const radioLeftLabel = ref('1');
 const activeIcon = cdnURL('user-active.png');
 const inactiveIcon = cdnURL('user-inactive.png');
 </script>
@@ -114,6 +117,13 @@ const inactiveIcon = cdnURL('user-inactive.png');
     </van-radio-group>
   </demo-block>
 
+  <demo-block :title="t('leftLabel')">
+    <van-radio-group v-model="radioLeftLabel" class="demo-radio-group">
+      <van-radio name="1" label-position="left">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2" label-position="left">{{ t('radio') }} 2</van-radio>
+    </van-radio-group>
+  </demo-block>
+
   <demo-block :title="t('disableLabel')">
     <van-radio-group v-model="radioLabel" class="demo-radio-group">
       <van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
diff --git a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
index 364eda161..235631b50 100644
--- a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
@@ -227,6 +227,38 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-radio-group demo-radio-group"
+       role="radiogroup"
+  >
+    <div role="radio"
+         class="van-radio"
+         tabindex="0"
+         aria-checked="true"
+    >
+      <span class="van-radio__label van-radio__label--left">
+        Radio 1
+      </span>
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+    </div>
+    <div role="radio"
+         class="van-radio"
+         tabindex="0"
+         aria-checked="false"
+    >
+      <span class="van-radio__label van-radio__label--left">
+        Radio 2
+      </span>
+      <div class="van-radio__icon van-radio__icon--round">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div class="van-radio-group demo-radio-group"
        role="radiogroup"