fix(form,design): 支持行内表单

Tencent · Jun 24, 2024 · 77f13fa · 77f13fa
1 parent 654961b
commit 77f13fa
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
@@ -1,5 +1,11 @@
 <template>
-  <component class="tmagic-design-form" ref="form" :is="uiComponent" v-bind="uiProps">
+  <component
+    class="tmagic-design-form"
+    :class="{ 'tmagic-design-form-inline': inline }"
+    ref="form"
+    :is="uiComponent"
+    v-bind="uiProps"
+  >
     <slot></slot>
   </component>
 </template>

diff --git a/packages/form/src/theme/container.scss b/packages/form/src/theme/container.scss
@@ -0,0 +1,5 @@
+.tmagic-design-form-inline {
+  .m-form-container {
+    display: inline-flex;
+  }
+}
diff --git a/packages/form/src/theme/index.scss b/packages/form/src/theme/index.scss
@@ -1,3 +1,4 @@
+@use "./container.scss";
 @use "./form-dialog.scss";
 @use "./form-drawer.scss";
 @use "./form.scss";