pull/279/head
Halil İbrahim Kalkan 7 years ago
commit 4e1b9950fd

@ -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)

@ -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)
{
}
}
}

@ -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>";
}
}
}

@ -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)
{
}
}
}

@ -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;
}
}
}

@ -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; }
}
}

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

File diff suppressed because it is too large Load Diff

@ -0,0 +1,114 @@
@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># Tab Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs name="TabId">
<abp-tab-item name="nav-home" active="true" title="Home">
Content_Home
</abp-tab-item>
<abp-tab-item name="nav-profile" title="profile">
Content_Profile
</abp-tab-item>
<abp-tab-item name="nav-contact" title="Contact">
Content_Contact
</abp-tab-item>
</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;
Content_Home
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
Content_Profile
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
Content_Contact
&lt;/abp-tab-item&gt;
&lt;/abp-tabs&gt;
</pre>
</div>
</div>
<h4># Pill Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs name="PillId" tab-style="Pill">
<abp-tab-item name="nav-home-pill" active="true" title="Home">
Content_Home
</abp-tab-item>
<abp-tab-item name="nav-profile-pill" title="profile">
Content_Profile
</abp-tab-item>
<abp-tab-item name="nav-contact-pill" title="Contact">
Content_Contact
</abp-tab-item>
</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;
Content_Home
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
Content_Profile
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
Content_Contact
&lt;/abp-tab-item&gt;
&lt;/abp-tabs&gt;
</pre>
</div>
</div>
<h4># Vertical Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs name="PillVerticalId" tab-style="PillVertical" vertical-header-size="_2">
<abp-tab-item name="nav-home-pill-vertical" active="true" title="Home">
Content_Home
</abp-tab-item>
<abp-tab-item name="nav-profile-pill-vertical" title="profile">
Content_Profile
</abp-tab-item>
<abp-tab-item name="nav-contact-pill-vertical" title="Contact">
Content_Contact
</abp-tab-item>
</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;
Content_Home
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
Content_Profile
&lt;/abp-tab-item&gt;
&lt;abp-tab-item name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
Content_Contact
&lt;/abp-tab-item&gt;
&lt;/abp-tabs&gt;
</pre>
</div>
</div>

@ -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()
{
}
}
}

@ -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>

Loading…
Cancel
Save