tab tag helper first tab active by default

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpTagHelperService.cs

@@ -22,6 +22,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
         protected const string TabItemsVerticalPillPlaceHolder = "{{vertical_pill}}";
         protected const string TabItemNamePlaceHolder = "{{Tag_Name}}";
         protected const string AbpFormContentPlaceHolder = "{_AbpFormContentPlaceHolder_}";
+        protected const string AbpTabItemActivePlaceholder = "{_Tab_Active_Placeholder_}";
+        protected const string AbpTabItemShowActivePlaceholder = "{_Tab_Show_Active_Placeholder_}";
+        protected const string AbpTabItemSelectedPlaceholder = "{_Tab_Selected_Placeholder_}";
 
         public TTagHelper TagHelper { get; internal set; }
 

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabItemTagHelper.cs → src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabTagHelper.cs

@@ -3,8 +3,8 @@ using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 {
-    [HtmlTargetElement("abp-tab-item")]
+    [HtmlTargetElement("abp-tab")]
-    public class AbpTabItemTagHelper : AbpTagHelper<AbpTabItemTagHelper, AbpTabItemTagHelperService>
+    public class AbpTabTagHelper : AbpTagHelper<AbpTabTagHelper, AbpTabTagHelperService>
     {
         public string Name { get; set; }
 
@@ -12,7 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 
         public bool? Active { get; set; }
 
-        public AbpTabItemTagHelper(AbpTabItemTagHelperService tagHelperService)
+        public AbpTabTagHelper(AbpTabTagHelperService tagHelperService)
             : base(tagHelperService)
         {
 

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabItemTagHelperService.cs → src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabTagHelperService.cs

@@ -6,45 +6,43 @@ using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 {
-    public class AbpTabItemTagHelperService : AbpTagHelperService<AbpTabItemTagHelper>
+    public class AbpTabTagHelperService : AbpTagHelperService<AbpTabTagHelper>
     {
         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
         {
             SetPlaceholderForNameIfNotProvided();
 
             var innerContent = await output.GetChildContentAsync();
-            var tabHeader = GetTabHeaderItem();
+            var tabHeader = GetTabHeaderItem(context, output);
             var tabContent = GetTabContentItem(innerContent.GetContent());
-            
+
             var tabHeaderItems = GetValueFromContext<List<TabItem>>(context, TabItems);
 
-            tabHeaderItems.Add(new TabItem(tabHeader,tabContent));
+            var active = TagHelper.Active ?? false;
+
+            tabHeaderItems.Add(new TabItem(tabHeader, tabContent,active));
 
             output.SuppressOutput();
         }
-        
+
-        protected virtual string GetTabHeaderItem()
+        protected virtual string GetTabHeaderItem(TagHelperContext context, TagHelperOutput output)
         {
             var id = TagHelper.Name + "-tab";
             var link = TagHelper.Name;
             var control = TagHelper.Name;
-            var selected = TagHelper.Active ?? false;
-            var active = selected?" active":"";
             var title = TagHelper.Title;
 
-            return "<a class=\"nav-item nav-link"+ active + "\" id=\""+ id + "\" data-toggle=\""+ TabItemsDataTogglePlaceHolder+ "\" href=\"#"+ link + "\" role=\"tab\" aria-controls=\""+ control + "\" aria-selected=\""+ selected + "\">" +
+            return "<a class=\"nav-item nav-link" + AbpTabItemActivePlaceholder + "\" id=\"" + id + "\" data-toggle=\"" + TabItemsDataTogglePlaceHolder + "\" href=\"#" + link + "\" role=\"tab\" aria-controls=\"" + control + "\" aria-selected=\"" + AbpTabItemSelectedPlaceholder + "\">" +
                    title +
                    "</a>";
         }
-        
+
         protected virtual string GetTabContentItem(string content)
         {
             var headerId = TagHelper.Name + "-tab";
             var id = TagHelper.Name;
-            var selected = TagHelper.Active ?? false;
-            var showActive = selected?" show active":"";
 
-            return "<div class=\"tab-pane fade"+ showActive + "\" id=\""+ id + "\" role=\"tabpanel\" aria-labelledby=\""+ headerId + "\">" +
+            return "<div class=\"tab-pane fade" + AbpTabItemShowActivePlaceholder + "\" id=\"" + id + "\" role=\"tabpanel\" aria-labelledby=\"" + headerId + "\">" +
                    content +
                    "</div>";
         }

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabsTagHelperService.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Razor.TagHelpers;
@@ -34,9 +35,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
             }
 
         }
-
+        
-
-
         protected virtual string CombineHeadersAndContents(TagHelperContext context, TagHelperOutput output, string headers, string contents)
         {
             var combined = new StringBuilder();
@@ -56,15 +55,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
             return combined.ToString();
         }
 
-
-
-        protected virtual string MakeVerticalTab(TagHelperContext context, TagHelperOutput output, string headers, string contents)
-        {
-
-
-            return "";
-        }
-
         protected virtual string SurroundHeaders(TagHelperContext context, TagHelperOutput output, string headers)
         {
             var id = TagHelper.Name;
@@ -105,8 +95,33 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
             output.Attributes.AddClass("row");
         }
 
+        protected virtual void SetActiveTab(List<TabItem> items)
+        {
+            if (!items.Any(it => it.Active) && items.Count > 0)
+            {
+                items.FirstOrDefault().Active = true;
+            }
+
+            foreach (var tabItem in items)
+            {
+                if (tabItem.Active)
+                {
+                    tabItem.Content = tabItem.Content.Replace(AbpTabItemShowActivePlaceholder, " show active");
+                    tabItem.Header = tabItem.Header.Replace(AbpTabItemActivePlaceholder, " active").Replace(AbpTabItemSelectedPlaceholder, "true");
+                }
+                else
+                {
+                    tabItem.Content = tabItem.Content.Replace(AbpTabItemShowActivePlaceholder, "");
+                    tabItem.Header = tabItem.Header.Replace(AbpTabItemActivePlaceholder, "").Replace(AbpTabItemSelectedPlaceholder, "false");
+                }
+            }
+
+        }
+
         protected virtual string GetHeaders(TagHelperContext context, TagHelperOutput output, List<TabItem> items)
         {
+            SetActiveTab(items);
+
             var headersBuilder = new StringBuilder();
 
             for (var index = 0; index < items.Count; index++)

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/TabItem.cs

@@ -2,14 +2,17 @@
 {
     public class TabItem
     {
-        public TabItem(string header, string content)
+        public TabItem(string header, string content, bool active)
         {
             Header = header;
             Content = content;
+            Active = active;
         }
 
         public string Header { get; set; }
 
         public string Content { get; set; }
+
+        public bool Active { get; set; }
     }
 }

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml

@@ -13,29 +13,29 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs>
-            <abp-tab-item active="true" title="Home">
+            <abp-tab title="Home">
                 Content_Home
-            </abp-tab-item>   
+            </abp-tab>   
-            <abp-tab-item title="profile">
+            <abp-tab title="profile">
                 Content_Profile
-            </abp-tab-item>
+            </abp-tab>
-            <abp-tab-item title="Contact">
+            <abp-tab title="Contact">
                 Content_Contact
-            </abp-tab-item>
+            </abp-tab>
         </abp-tabs>
     </div>
     <div class="code-area">
         <pre>
 &lt;abp-tabs name=&quot;TabId&quot;&gt;
-    &lt;abp-tab-item name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
+    &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
         Content_Home
-    &lt;/abp-tab-item&gt;   
+    &lt;/abp-tab&gt;   
-    &lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
+    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
         Content_Profile
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
-    &lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
+    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
         Content_Contact
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
 </pre>
     </div>
@@ -46,29 +46,29 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs name="TabId">
-            <abp-tab-item name="nav-home" active="true" title="Home">
+            <abp-tab name="nav-home" title="Home">
                 Content_Home
-            </abp-tab-item>   
+            </abp-tab>   
-            <abp-tab-item name="nav-profile" title="profile">
+            <abp-tab name="nav-profile" active="true" title="profile">
                 Content_Profile
-            </abp-tab-item>
+            </abp-tab>
-            <abp-tab-item name="nav-contact" title="Contact">
+            <abp-tab name="nav-contact" title="Contact">
                 Content_Contact
-            </abp-tab-item>
+            </abp-tab>
         </abp-tabs>
     </div>
     <div class="code-area">
         <pre>
 &lt;abp-tabs name=&quot;TabId&quot;&gt;
-    &lt;abp-tab-item name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
+    &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
         Content_Home
-    &lt;/abp-tab-item&gt;   
+    &lt;/abp-tab&gt;   
-    &lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
+    &lt;abp-tab name=&quot;nav-profile&quot; active=&quot;true&quot; title=&quot;profile&quot;&gt;
         Content_Profile
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
-    &lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
+    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
         Content_Contact
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
 </pre>
     </div>
@@ -79,29 +79,29 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs tab-style="Pill">
-            <abp-tab-item active="true" title="Home">
+            <abp-tab active="true" title="Home">
                 Content_Home
-            </abp-tab-item>   
+            </abp-tab>   
-            <abp-tab-item title="profile">
+            <abp-tab title="profile">
                 Content_Profile
-            </abp-tab-item>
+            </abp-tab>
-            <abp-tab-item title="Contact">
+            <abp-tab title="Contact">
                 Content_Contact
-            </abp-tab-item>
+            </abp-tab>
         </abp-tabs>
     </div>
     <div class="code-area">
         <pre>
 &lt;abp-tabs name=&quot;TabId&quot;   tab-style=&quot;Pill&quot; &gt;
-    &lt;abp-tab-item name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
+    &lt;abp-tab name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
         Content_Home
-    &lt;/abp-tab-item&gt;   
+    &lt;/abp-tab&gt;   
-    &lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
+    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
         Content_Profile
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
-    &lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
+    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
         Content_Contact
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
 </pre>
     </div>
@@ -112,29 +112,29 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-tabs tab-style="PillVertical" vertical-header-size="_2">
-            <abp-tab-item active="true" title="Home">
+            <abp-tab active="true" title="Home">
                 Content_Home
-            </abp-tab-item>   
+            </abp-tab>   
-            <abp-tab-item title="profile">
+            <abp-tab title="profile">
                 Content_Profile
-            </abp-tab-item>
+            </abp-tab>
-            <abp-tab-item title="Contact">
+            <abp-tab title="Contact">
                 Content_Contact
-            </abp-tab-item>
+            </abp-tab>
         </abp-tabs>
     </div>
     <div class="code-area">
         <pre>
 &lt;abp-tabs name=&quot;TabId&quot;  tab-style=&quot;Pill&quot; vertical-header-size=&quot;_2&quot; &gt;
-    &lt;abp-tab-item name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
+    &lt;abp-tab name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
         Content_Home
-    &lt;/abp-tab-item&gt;   
+    &lt;/abp-tab&gt;   
-    &lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
+    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
         Content_Profile
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
-    &lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
+    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
         Content_Contact
-    &lt;/abp-tab-item&gt;
+    &lt;/abp-tab&gt;
 &lt;/abp-tabs&gt;
 </pre>
     </div>