Merge pull request #16255 from masoodkhoshgard/dev

Add Tag-Helper support Bootstrap Floating Labels

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelper.cs

@@ -46,6 +46,10 @@ public class AbpInputTagHelper : AbpTagHelper<AbpInputTagHelper, AbpInputTagHelp
 
     public bool SuppressLabel { get; set; }
 
+    [HtmlAttributeName("floating-label")]
+
+    public bool FloatingLabel { get; set; }
+
     public CheckBoxHiddenInputRenderMode? CheckBoxHiddenInputRenderMode { get; set; }
 
     public AbpInputTagHelper(AbpInputTagHelperService tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelperService.cs

@@ -54,6 +54,10 @@ public class AbpInputTagHelperService : AbpTagHelperService<AbpInputTagHelper>
             output.TagMode = TagMode.StartTagAndEndTag;
             output.TagName = "div";
             LeaveOnlyGroupAttributes(context, output);
+            if (TagHelper.FloatingLabel && !isCheckBox)
+            {
+                output.Attributes.AddClass("form-floating");
+            }
             output.Attributes.AddClass(isCheckBox ? "mb-2" : "mb-3");
             if (isCheckBox)
             {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs

@@ -44,6 +44,10 @@ public class AbpSelectTagHelper : AbpTagHelper<AbpSelectTagHelper, AbpSelectTagH
 
     public string Placeholder { get; set; }
 
+    [HtmlAttributeName("floating-label")]
+
+    public bool FloatingLabel { get; set; }
+
     public AbpSelectTagHelper(AbpSelectTagHelperService tagHelperService)
         : base(tagHelperService)
     {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs

@@ -56,6 +56,10 @@ public class AbpSelectTagHelperService : AbpTagHelperService<AbpSelectTagHelper>
         {
             output.TagName = "div";
             LeaveOnlyGroupAttributes(context, output);
+            if (TagHelper.FloatingLabel)
+            {
+                output.Attributes.AddClass("form-floating");
+            }
             output.Attributes.AddClass("mb-3");
             output.TagMode = TagMode.StartTagAndEndTag;
             output.Content.SetHtmlContent(innerHtml);

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/FormElementsDemo/Default.cshtml

@@ -100,6 +100,14 @@ public class FormElementsDemoModel
     <abp-input asp-for="@Model.MyDetailsModel.Description" label="Description" />
 </abp-component-demo-section>
 
+<abp-component-demo-section title="Floating Labels" view-path="@FormElementsDemoViewComponent.ViewPath">
+    <abp-input asp-for="@Model.MyDetailsModel.EmailAddress" label="Email Address" placeholder="name@example.com" floating-label="true" />
+    <abp-select asp-for="@Model.MyDetailsModel.City" asp-items="@Model.CityList" label="City" floating-label="true" />
+    <abp-select asp-for="@Model.MyDetailsModel.Cities" asp-items="@Model.CityList" label="Cities" floating-label="true" />
+    <abp-input asp-for="@Model.MyDetailsModel.Description" label="Description" floating-label="true" />
+</abp-component-demo-section>
+
+
 <abp-component-demo-section title="Sizing" view-path="@FormElementsDemoViewComponent.ViewPath">
     <abp-input asp-for="@Model.MyInformMeModel.Name" size="Large" />
     <abp-input asp-for="@Model.MyInformMeModel.Name" size="Small" />