diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelper.cs new file mode 100644 index 0000000000..86e3b908ea --- /dev/null +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelper.cs @@ -0,0 +1,22 @@ +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab +{ + [HtmlTargetElement("abp-tab-link", TagStructure = TagStructure.WithoutEndTag)] + public class AbpTabLinkTagHelper : AbpTagHelper + { + public string Name { get; set; } + + public string Title { get; set; } + + public string ParentDropdownName { get; set; } + + public string Href { get; set; } + + public AbpTabLinkTagHelper(AbpTabLinkTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelperService.cs new file mode 100644 index 0000000000..9e94c51ea9 --- /dev/null +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Tab/AbpTabLinkTagHelperService.cs @@ -0,0 +1,46 @@ +using System.Collections.Generic; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab +{ + public class AbpTabLinkTagHelperService : AbpTagHelperService + { + public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) + { + SetPlaceholderForNameIfNotProvided(); + + var tabHeader = GetTabHeaderItem(context, output); + + var tabHeaderItems = GetValueFromContext>(context, TabItems); + + tabHeaderItems.Add(new TabItem(tabHeader, "", false, TagHelper.Name, TagHelper.ParentDropdownName, false)); + + output.SuppressOutput(); + } + + protected virtual string GetTabHeaderItem(TagHelperContext context, TagHelperOutput output) + { + var id = TagHelper.Name + "-tab"; + var href = TagHelper.Href; + var title = TagHelper.Title; + + if (!string.IsNullOrWhiteSpace(TagHelper.ParentDropdownName)) + { + return "" + title + ""; + } + + return "
  • " + + title + + "
  • "; + } + + protected virtual void SetPlaceholderForNameIfNotProvided() + { + if (string.IsNullOrWhiteSpace(TagHelper.Name)) + { + TagHelper.Name = TabItemNamePlaceHolder; + } + } + } +} \ No newline at end of file diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml index 26eae106e0..c2c17a389d 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml @@ -22,6 +22,7 @@ Content_Home + Content_Profile @@ -38,10 +39,11 @@
     <abp-tabs name="TabId">
    -    <abp-tab name="nav-home" title="Home">
    +    <abp-tab title="Home">
             Content_Home
         </abp-tab>   
    -    <abp-tab name="nav-profile" title="profile">
    +    <abp-tab-link title="Link" name="LinkId" href="#"/>
    +    <abp-tab title="profile">
             Content_Profile
         </abp-tab>
         <abp-tab-dropdown title="Contact" name="ContactDropdown">
    @@ -108,14 +110,14 @@
         
    -<abp-tabs name="TabId"   tab-style="Pill" >
    -    <abp-tab name="nav-home" active="true" title="Home">
    +<abp-tabs tab-style="Pill" >
    +    <abp-tab active="true" title="Home">
             Content_Home
         </abp-tab>   
    -    <abp-tab name="nav-profile" title="profile">
    +    <abp-tab title="profile">
             Content_Profile
         </abp-tab>
    -    <abp-tab name="nav-contact" title="Contact">
    +    <abp-tab title="Contact">
             Content_Contact
         </abp-tab>
     </abp-tabs>
    @@ -142,13 +144,13 @@
         
     <abp-tabs name="TabId"  tab-style="Pill" vertical-header-size="_2" >
    -    <abp-tab name="nav-home" active="true" title="Home">
    +    <abp-tab active="true" title="Home">
             Content_Home
         </abp-tab>   
    -    <abp-tab name="nav-profile" title="profile">
    +    <abp-tab title="profile">
             Content_Profile
         </abp-tab>
    -    <abp-tab name="nav-contact" title="Contact">
    +    <abp-tab title="Contact">
             Content_Contact
         </abp-tab>
     </abp-tabs>