docs(form): add show-label demo (tusen-ai#858)

src/form/demos/enUS/index.demo-entry.md

@@ -15,6 +15,7 @@ left
 item-only
 async
 disabled
+show-label
 ```
 
 ## Props
@@ -63,6 +64,7 @@ disabled
 | rule-path | `string` | `undefined` | The path to get rule from wrapper form's rule object. If not set, use path of the form item instead. |
 | show-feedback | `boolean` | `true` | Whether to show feedback. |
 | show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show require mark. If not set, use `show-require-mark` from wrapper form. |
+| show-label | `boolean` | `true` | Whether to show label. If not set, use `show-label` from wrapper form. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |
 | validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | The validation status of the form item. If not set to `undefined`, it will take place of the result of rule-based validation. |
 

src/form/demos/enUS/show-label.demo.md

@@ -0,0 +1,55 @@
+# Show/hide Label
+
+`show-label`: When the value is `false`, the `label` element and placeholder for `n-form-item` will be hidden.
+
+`n-form-item` will use the `show-label` of the enclosing `n-form` if it is not set, or default to `true` if neither is set.
+
+```html
+<div :style="switchStyle">
+  <label>n-form：</label>
+  <n-switch v-model:value="formShowLabel" />
+</div>
+<div :style="switchStyle">
+  <label>n-form-item：</label>
+  <n-switch v-model:value="formItemShowLabel" />
+</div>
+
+<n-form :model="formValue" ref="formRef" :show-label="formShowLabel">
+  <n-form-item label="Name" path="user.name" :show-label="formItemShowLabel">
+    <n-input v-model:value="formValue.user.name" placeholder="Input Name" />
+  </n-form-item>
+  <n-form-item label="Age" path="user.age">
+    <n-input placeholder="Input Age" v-model:value="formValue.user.age" />
+  </n-form-item>
+  <n-form-item label="Phone" path="user.phone">
+    <n-input placeholder="Input Phone" v-model:value="formValue.phone" />
+  </n-form-item>
+</n-form>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const formRef = ref(null)
+    const formShowLabel = ref(true)
+    const formItemShowLabel = ref(true)
+    return {
+      formRef,
+      formValue: ref({
+        user: {
+          name: '',
+          age: ''
+        },
+        phone: ''
+      }),
+      formShowLabel,
+      formItemShowLabel,
+      switchStyle: {
+        marginBottom: '12px'
+      }
+    }
+  }
+})
+```

src/form/demos/zhCN/index.demo-entry.md

@@ -17,6 +17,7 @@ async
 disabled
 height-debug
 validator-debug
+show-label
 ```
 
 ## Props
@@ -64,6 +65,7 @@ validator-debug
 | rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替 |
 | show-feedback | `boolean` | `true` | 是否展示校验反馈 |
 | show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` |
+| show-label | `boolean` | `true` | 是否展示标签。如果没有被设定，使用外层 `n-form` 的 `show-label` |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
 | validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时，会覆盖规则验证的结果 |
 

src/form/demos/zhCN/show-label.demo.md

@@ -0,0 +1,55 @@
+# 显示/隐藏标签
+
+`show-label`: 当值为 `false` 时，会隐藏 `n-form-item` 的 `label` 元素和占位。
+
+`n-form-item` 若未被设定，则会使用外层 `n-form` 的 `show-label`, 若都未被设定，则默认为 `true`。
+
+```html
+<div :style="switchStyle">
+  <label>n-form：</label>
+  <n-switch v-model:value="formShowLabel" />
+</div>
+<div :style="switchStyle">
+  <label>n-form-item：</label>
+  <n-switch v-model:value="formItemShowLabel" />
+</div>
+
+<n-form :model="formValue" ref="formRef" :show-label="formShowLabel">
+  <n-form-item label="姓名" path="user.name" :show-label="formItemShowLabel">
+    <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+  </n-form-item>
+  <n-form-item label="年龄" path="user.age">
+    <n-input placeholder="输入年龄" v-model:value="formValue.user.age" />
+  </n-form-item>
+  <n-form-item label="电话号码" path="user.phone">
+    <n-input placeholder="电话号码" v-model:value="formValue.phone" />
+  </n-form-item>
+</n-form>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const formRef = ref(null)
+    const formShowLabel = ref(true)
+    const formItemShowLabel = ref(true)
+    return {
+      formRef,
+      formValue: ref({
+        user: {
+          name: '',
+          age: ''
+        },
+        phone: ''
+      }),
+      formShowLabel,
+      formItemShowLabel,
+      switchStyle: {
+        marginBottom: '12px'
+      }
+    }
+  }
+})
+```