u

code/g3soft-libs/docs/examples/form/layout.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// layout：horizontal 标签在左（默认，可配 labelAlign / labelWidth）；vertical 标签在上
+import { reactive } from 'vue'
+import { G3Form, G3FormItem, G3Input, G3Space } from '@g3soft/ui'
+
+const model = reactive({ name: '示例', desc: '' })
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="24" style="display: flex">
+    <!-- 横向：labelAlign="right" + 120px 定宽，右侧控件对齐 -->
+    <G3Form
+      :model="model"
+      layout="horizontal"
+      label-align="right"
+      :label-width="120"
+      style="max-width: 420px"
+    >
+      <G3FormItem name="name" label="项目名称">
+        <G3Input v-model="model.name" />
+      </G3FormItem>
+      <G3FormItem name="desc" label="项目描述" extra="最多 50 字">
+        <G3Input v-model="model.desc" />
+      </G3FormItem>
+    </G3Form>
+
+    <!-- 纵向：label 在上，适合狭窄容器 -->
+    <G3Form :model="model" layout="vertical" style="max-width: 420px">
+      <G3FormItem name="name" label="项目名称">
+        <G3Input v-model="model.name" />
+      </G3FormItem>
+      <G3FormItem name="desc" label="项目描述">
+        <G3Input v-model="model.desc" type="textarea" :rows="3" />
+      </G3FormItem>
+    </G3Form>
+  </G3Space>
+</template>