fix: add required

jdf2e · Nov 21, 2024 · 41da784 · 41da784
1 parent cba87ec
commit 41da784
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
@@ -21,10 +21,14 @@
   &-label-required {
     color: $form-item-required-color;
     margin-right: $form-item-required-margin-right;
+    display: block;
+    position: absolute;
+    left: -0.8em;
   }
   .nut-form-item-labeltxt {
     font-size: 12px;
     height: 10px;
+    position: relative;
   }
   &-body {
     flex: 1;

diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
@@ -220,12 +220,14 @@ export class FormItem extends React.Component<
 
     const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <Text className="nut-form-item-label-required">*</Text>
+      <Text className="nut-form-item-label-required required">*</Text>
     )
     const renderLabel = (
       <>
-        {starPosition === 'left' ? renderStar : null}
-        <Text className="nut-form-item-labeltxt">{label}</Text>
+        <Text className="nut-form-item-labeltxt">
+          {starPosition === 'left' ? renderStar : null}
+          {label}
+        </Text>
         {starPosition === 'right' ? renderStar : null}
       </>
     )

diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
@@ -219,12 +219,14 @@ export class FormItem extends React.Component<
 
     const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <div className="nut-form-item-label-required">*</div>
+      <div className="nut-form-item-label-required required">*</div>
     )
     const renderLabel = (
       <>
-        {starPosition === 'left' ? renderStar : null}
-        <span className="nut-form-item-labeltxt">{label}</span>
+        <span className="nut-form-item-labeltxt">
+          {starPosition === 'left' ? renderStar : null}
+          {label}
+        </span>
         {starPosition === 'right' ? renderStar : null}
       </>
     )