Resolved #505

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

@@ -27,6 +27,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
         protected const string TabItemNamePlaceHolder = "{_Tab_Tag_Name_Placeholder_}";
         protected const string AbpFormContentPlaceHolder = "{_AbpFormContentPlaceHolder_}";
         protected const string AbpTabItemActivePlaceholder = "{_Tab_Active_Placeholder_}";
+        protected const string AbpTabDropdownItemsActivePlaceholder = "{_Tab_DropDown_Items_Placeholder_}";
         protected const string AbpTabItemShowActivePlaceholder = "{_Tab_Show_Active_Placeholder_}";
         protected const string AbpBreadcrumbItemActivePlaceholder = "{_Breadcrumb_Active_Placeholder_}";
         protected const string AbpCarouselItemActivePlaceholder = "{_CarouselItem_Active_Placeholder_}";

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

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    [HtmlTargetElement("abp-tab-dropdown")]
+    public class AbpTabDropdownTagHelper : AbpTagHelper<AbpTabDropdownTagHelper, AbpTabDropdownTagHelperService>
+    {
+        public string Name { get; set; }
+
+        public string Title { get; set; }
+
+        public AbpTabDropdownTagHelper(AbpTabDropdownTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

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

@@ -0,0 +1,43 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public class AbpTabDropdownTagHelperService : AbpTagHelperService<AbpTabDropdownTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            if (string.IsNullOrWhiteSpace(TagHelper.Name))
+            {
+                throw new Exception("Name of tab dropdown tag can not bu null or empty.");
+            }
+
+            await output.GetChildContentAsync();
+            var tabHeader = GetTabHeaderItem(context, output);
+
+            var tabHeaderItems = GetValueFromContext<List<TabItem>>(context, TabItems);
+
+            tabHeaderItems.Add(new TabItem(tabHeader, "", false, TagHelper.Name, "", true));
+
+            output.SuppressOutput();
+        }
+
+        protected virtual string GetTabHeaderItem(TagHelperContext context, TagHelperOutput output)
+        {
+            var id = TagHelper.Name + "-tab";
+            var link = TagHelper.Name;
+            var title = TagHelper.Title;
+
+            return "<li class=\"nav-item dropdown\">" +
+                   "<a class=\"nav-link dropdown-toggle\" id=\"" + id + "\" data-toggle=\"dropdown\" href=\"#" + link + "\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">" +
+                   title +
+                   "</a>" +
+                   "<div class=\"dropdown-menu\">" +
+                   AbpTabDropdownItemsActivePlaceholder +
+                   "</div>" +
+                   "</li>";
+        }
+    }
+}

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

@@ -11,6 +11,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 
         public bool? Active { get; set; }
 
+        public string ParentDropdownName { get; set; }
+
         public AbpTabTagHelper(AbpTabTagHelperService tagHelperService)
             : base(tagHelperService)
         {

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

@@ -18,7 +18,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 
             var active = TagHelper.Active ?? false;
 
-            tabHeaderItems.Add(new TabItem(tabHeader, tabContent,active));
+            tabHeaderItems.Add(new TabItem(tabHeader, tabContent, active, TagHelper.Name, TagHelper.ParentDropdownName, false));
 
             output.SuppressOutput();
         }
@@ -30,9 +30,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
             var control = TagHelper.Name;
             var title = TagHelper.Title;
 
-            return "<a class=\"nav-item nav-link" + AbpTabItemActivePlaceholder + "\" id=\"" + id + "\" data-toggle=\"" + TabItemsDataTogglePlaceHolder + "\" href=\"#" + link + "\" role=\"tab\" aria-controls=\"" + control + "\" aria-selected=\"" + AbpTabItemSelectedPlaceholder + "\">" +
+            if (!string.IsNullOrWhiteSpace(TagHelper.ParentDropdownName))
+            {
+                return "<a class=\"dropdown-item\" id=\"" + id + "\" href=\"#" + link + "\" data-toggle=\"tab\"  role=\"tab\" aria-controls=\"" + control + "\" aria-selected=\"false\">" + title + "</a>";
+            }
+
+            return "<li class=\"nav-item\"><a class=\"nav-link" + AbpTabItemActivePlaceholder + "\" id=\"" + id + "\" data-toggle=\"" + TabItemsDataTogglePlaceHolder + "\" href=\"#" + link + "\" role=\"tab\" aria-controls=\"" + control + "\" aria-selected=\"" + AbpTabItemSelectedPlaceholder + "\">" +
                    title +
-                   "</a>";
+                   "</a></li>";
         }
 
         protected virtual string GetTabContentItem(string content)

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

@@ -61,11 +61,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
             var navClass = TagHelper.TabStyle == TabStyle.Tab ? " nav-tabs" : " nav-pills";
             var verticalClass = GetVerticalPillClassIfVertical();
 
-            var surroundedHeaders = "<nav>" + Environment.NewLine +
-                                   "   <div class=\"nav" + verticalClass + navClass + "\" id=\"" + id + "\" role=\"tablist\">" + Environment.NewLine +
+            var surroundedHeaders = "<ul class=\"nav" + verticalClass + navClass + "\" id=\"" + id + "\" role=\"tablist\">" + Environment.NewLine +
                                    headers +
-                                   "   </div>" + Environment.NewLine +
-                                   "</nav>";
+                                   "</ul>";
 
             return surroundedHeaders;
         }
@@ -99,7 +97,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
         {
             if (!items.Any(it => it.Active) && items.Count > 0)
             {
-                items.FirstOrDefault().Active = true;
+                var firstItem = items.FirstOrDefault(i => !i.IsDropdown);
+                if (firstItem != null)
+                {
+                    firstItem.Active = true;
+                }
             }
 
             foreach (var tabItem in items)
@@ -126,9 +128,20 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 
             for (var index = 0; index < items.Count; index++)
             {
-                var header = items[index].Header;
+                var item = items[index];
+                var header = "";
+                if (item.IsDropdown)
+                {
+                    var childHeaders = items.Where(i => i.ParentId == item.Id).Select(c => SetTabItemNameIfNotProvided(c.Header, items.IndexOf(c)));
+                    var childHeadersAsString = string.Join(Environment.NewLine, childHeaders.ToArray());
+                    header = item.Header.Replace(AbpTabDropdownItemsActivePlaceholder, childHeadersAsString);
+                }
+                else if (string.IsNullOrWhiteSpace(item.ParentId))
+                {
+                    header = item.Header;
 
-                header = SetTabItemNameIfNotProvided(header, index);
+                    header = SetTabItemNameIfNotProvided(header, index);
+                }
 
                 headersBuilder.AppendLine(header);
             }
@@ -144,6 +157,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
 
             for (var index = 0; index < items.Count; index++)
             {
+                if (items[index].IsDropdown)
+                {
+                    continue;
+                }
+
                 var content = items[index].Content;
 
                 content = SetTabItemNameIfNotProvided(content, index);

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

@@ -2,11 +2,14 @@
 {
     public class TabItem
     {
-        public TabItem(string header, string content, bool active)
+        public TabItem(string header, string content, bool active, string id, string parentId, bool isDropdown)
         {
             Header = header;
             Content = content;
             Active = active;
+            Id = id;
+            ParentId = parentId;
+            IsDropdown = isDropdown;
         }
 
         public string Header { get; set; }
@@ -14,5 +17,11 @@
         public string Content { get; set; }
 
         public bool Active { get; set; }
+
+        public bool IsDropdown { get; set; }
+
+        public string Id { get; set; }
+
+        public string ParentId { get; set; }
     }
 }

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

@@ -25,9 +25,14 @@
             <abp-tab title="profile">
                 Content_Profile
             </abp-tab>
-            <abp-tab title="Contact">
-                Content_Contact
-            </abp-tab>
+            <abp-tab-dropdown title="Contact" name="ContactDropdown">
+                <abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown">
+                    Content_1_Content
+                </abp-tab>
+                <abp-tab title="Contact 2" parent-dropdown-name="ContactDropdown">
+                    Content_2_Content
+                </abp-tab>
+            </abp-tab-dropdown>
         </abp-tabs>
     </div>
     <div class="code-area">
@@ -39,9 +44,14 @@
     &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
         Content_Profile
     &lt;/abp-tab&gt;
-    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
-        Content_Contact
-    &lt;/abp-tab&gt;
+    &lt;abp-tab-dropdown title=&quot;Contact&quot; name=&quot;ContactDropdown&quot;&gt;
+        &lt;abp-tab title=&quot;Contact 1&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
+            Content_1_Content
+        &lt;/abp-tab&gt;
+        &lt;abp-tab title=&quot;Contact 2&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
+            Content_2_Content
+        &lt;/abp-tab&gt;
+    &lt;/abp-tab-dropdown&gt;
 &lt;/abp-tabs&gt;
 </pre>
     </div>