Tab Tag Helper

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

@@ -16,6 +16,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
         where TTagHelper : TagHelper
     {
         protected const string FormGroupContents = "FormGroupContents";
+        protected const string TabItems = "TabItems";
+        protected const string TabItemsDataTogglePlaceHolder = "{{data_toggle}}";
+        protected const string TabItemsVerticalPillPlaceHolder = "{{vertical_pill}}";
         protected const string AbpFormContentPlaceHolder = "{_AbpFormContentPlaceHolder_}";
 
         public TTagHelper TagHelper { get; internal set; }
@@ -82,14 +85,20 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
 
         protected virtual List<FormGroupItem> GetFormGroupContentsList(TagHelperContext context, out bool surpress)
         {
-            if (!context.Items.ContainsKey(FormGroupContents))
+            var items = GetValueFromContext<List<FormGroupItem>>(context, FormGroupContents);
+            surpress = items != null;
+
+            return items ?? new List<FormGroupItem>();
+        }
+
+        protected virtual T GetValueFromContext<T>(TagHelperContext context, string key)
+        {
+            if (!context.Items.ContainsKey(key))
             {
-                surpress = false;
-                return new List<FormGroupItem>();
+                return default;
             }
-
-            surpress = true;
-            return context.Items[FormGroupContents] as List<FormGroupItem>;
+            
+            return (T)context.Items[key];
         }
 
         protected virtual string GetIdAttributeAsString(TagHelperOutput inputTag)

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

@@ -0,0 +1,21 @@
+using System.Dynamic;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    [HtmlTargetElement("abp-tab-item")]
+    public class AbpTabItemTagHelper : AbpTagHelper<AbpTabItemTagHelper, AbpTabItemTagHelperService>
+    {
+        public string Name { get; set; }
+
+        public string Title { get; set; }
+
+        public bool? Active { get; set; }
+
+        public AbpTabItemTagHelper(AbpTabItemTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

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

@@ -0,0 +1,49 @@
+using System.Collections.Generic;
+using System.Runtime.InteropServices.ComTypes;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public class AbpTabItemTagHelperService : AbpTagHelperService<AbpTabItemTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            var innerContent = await output.GetChildContentAsync();
+            var tabHeader = GetTabHeaderItem();
+            var tabContent = GetTabContentItem(innerContent.GetContent());
+            
+            var tabHeaderItems = GetValueFromContext<List<TabItem>>(context, TabItems);
+
+            tabHeaderItems.Add(new TabItem(tabHeader,tabContent));
+
+            output.SuppressOutput();
+        }
+        
+        protected virtual string GetTabHeaderItem()
+        {
+            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 + "\">" +
+                   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 + "\">" +
+                   content +
+                   "</div>";
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public class AbpTabsTagHelper : AbpTagHelper<AbpTabsTagHelper, AbpTabsTagHelperService>
+    {
+        public string Name { get; set; }
+
+        public TabStyle TabStyle { get; set; } = TabStyle.Tab;
+
+        public ColumnSize VerticalHeaderSize { get; set; } = ColumnSize._3;
+
+        public AbpTabsTagHelper(AbpTabsTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

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

@@ -0,0 +1,163 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public class AbpTabsTagHelperService : AbpTagHelperService<AbpTabsTagHelper>
+    {
+        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            var items = InitilizeFormGroupContentsContext(context, output);
+
+            await output.GetChildContentAsync();
+
+            var headers = GetHeaders(context,output,items);
+            var contents = GetConents(context,output,items);
+
+            var surroundedHeaders = SurroundHeaders(context, output, headers);
+            var surroundedContents = SurroundContents(context, output, contents);
+
+            var finalContent = CombineHeadersAndContents(context, output, surroundedHeaders, surroundedContents);
+
+            output.TagName = "div";
+            output.Content.SetHtmlContent(finalContent);
+            if (TagHelper.TabStyle == TabStyle.PillVertical)
+            {
+                PlaceInsideRow(output);
+            }
+
+        }
+
+
+
+        protected virtual string CombineHeadersAndContents(TagHelperContext context, TagHelperOutput output, string headers, string contents)
+        {
+            var combined = new StringBuilder();
+
+            if (TagHelper.TabStyle == TabStyle.PillVertical)
+            {
+                var headerColumnSize = GetHeaderColumnSize();
+                var contentColumnSize = 12 - headerColumnSize;
+
+                headers = PlaceInsideColunm(headers, headerColumnSize);
+                contents = PlaceInsideColunm(contents, contentColumnSize);
+            }
+
+
+            combined.AppendLine(headers).AppendLine(contents);
+
+            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;
+            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 +
+                                   headers+
+                                   "   </div>" + Environment.NewLine +
+                                   "</nav>";
+
+            return surroundedHeaders;
+        }
+
+        protected virtual string SurroundContents(TagHelperContext context, TagHelperOutput output, string contents)
+        {
+            var id = TagHelper.Name + "Content";
+
+            var surroundedContents = "<div class=\"tab-content\" id=\""+ id + "\">" + Environment.NewLine +
+                                   contents+
+                                   "   </div>" ;
+
+            return surroundedContents;
+        }
+
+        protected virtual string PlaceInsideColunm(string contents, int columnSize)
+        {
+            var surroundedContents = "<div class=\"col-"+ columnSize + "\">" + Environment.NewLine +
+                                   contents+
+                                   "   </div>" ;
+
+            return surroundedContents;
+        }
+
+        protected virtual void PlaceInsideRow(TagHelperOutput output)
+        {
+            output.Attributes.AddClass("row");
+        }
+
+        protected virtual string GetHeaders(TagHelperContext context, TagHelperOutput output, List<TabItem> items)
+        {
+            var headersBuilder = new StringBuilder();
+
+            foreach (var tabItem in items)
+            {
+                headersBuilder.AppendLine(tabItem.Header);
+            }
+
+            var headers = SetDataToggle(headersBuilder.ToString());
+
+            return headers;
+        }
+
+        protected virtual string GetConents(TagHelperContext context, TagHelperOutput output, List<TabItem> items)
+        {
+            var contentsBuilder = new StringBuilder();
+
+            foreach (var tabItem in items)
+            {
+                contentsBuilder.AppendLine(tabItem.Content);
+            }
+
+            return contentsBuilder.ToString();
+        }
+
+        protected virtual List<TabItem> InitilizeFormGroupContentsContext(TagHelperContext context, TagHelperOutput output)
+        {
+            var items = new List<TabItem>();
+            context.Items[TabItems] = items;
+            return items;
+        }
+
+        protected virtual string GetDataToggleStyle()
+        {
+            return TagHelper.TabStyle == TabStyle.Tab ? "tab" : "pill";
+        }
+
+        protected virtual string SetDataToggle(string content)
+        {
+            return content.Replace(TabItemsDataTogglePlaceHolder, GetDataToggleStyle());
+        }
+
+        protected virtual string GetVerticalPillClassIfVertical()
+        {
+            return TagHelper.TabStyle == TabStyle.PillVertical ? " flex-column " : "";
+        }
+
+        protected virtual int GetHeaderColumnSize()
+        {
+            return
+                TagHelper.VerticalHeaderSize == ColumnSize.Undefined ||
+                TagHelper.VerticalHeaderSize == ColumnSize.Auto || TagHelper.VerticalHeaderSize == ColumnSize._
+                    ? (int)ColumnSize._3
+                    : (int)TagHelper.VerticalHeaderSize;
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public class TabItem
+    {
+        public TabItem(string header, string content)
+        {
+            Header = header;
+            Content = content;
+        }
+
+        public string Header { get; set; }
+
+        public string Content { get; set; }
+    }
+}

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

@@ -0,0 +1,9 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
+{
+    public enum TabStyle
+    {
+        Tab,
+        Pill,
+        PillVertical
+    }
+}

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

@@ -0,0 +1,68 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TabsModel
+@{
+    ViewData["Title"] = "Tabs";
+}
+
+<h2>Tabs</h2>
+
+<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>
+
+<h4># Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        
+
+        <abp-tabs name="TabId" tab-style="PillVertical" vertical-header-size="_1">
+
+            <abp-tab-item name="nav-home" active="true" title="Home">
+                ..asdasd.
+            </abp-tab-item>   
+            <abp-tab-item name="nav-profile" title="profile">
+                ..wqewda.
+            </abp-tab-item>
+            <abp-tab-item name="nav-contact" title="Contact">
+                ..dsadwa.
+            </abp-tab-item>
+
+        </abp-tabs>
+
+
+    </div>
+    <div class="code-area">
+        
+        <pre>
+    
+</pre>
+    </div>
+</div>
+
+
+@*<h4># Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+            <div>
+                <nav>
+                    <div class="nav nav-pills" id="nav-tab" role="tablist">
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+                        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+                    </div>
+                </nav>
+            </div>
+            <div>
+                <div class="tab-content" id="nav-tabContent">
+                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">..asdasd.</div>
+                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.wqewda..</div>
+                    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..dsadwa.</div>
+                </div>
+            </div>
+        </div>
+    <div class="code-area">
+        <pre>
+    
+</pre>
+    </div>
+</div>*@

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

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class TabsModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}

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

@@ -11,5 +11,6 @@
     <li><a asp-page="Components/Grids">Grids</a></li>
     <li><a asp-page="Components/Cards">Cards</a></li>
     <li><a asp-page="Components/DynamicForms">Dynamic Forms</a></li>
+    <li><a asp-page="Components/Tabs">Tabs</a></li>
 </ul>