Components based on Bootstrap4 for Sections and TabStrip to increase productivity and promote uniformity in Module UIs (#333)

* upgrade to .NET Core 3.2 Preview 3 and fixes for issues created by #314

* Components based on Bootstrap4 for Sections and  TabStrip to increase productivity and promote uniformity in Module UIs
This commit is contained in:
Shaun Walker
2020-04-03 15:04:25 -04:00
committed by GitHub
parent c38dff5e7c
commit d8b15e7a4e
7 changed files with 177 additions and 139 deletions

View File

@ -0,0 +1,56 @@
@namespace Oqtane.Modules.Controls
@inherits ModuleBase
<CascadingValue Value="this">
<div class="container-fluid">
<div class="form-group">
<ul class="nav nav-tabs" role="tablist">
@foreach (TabPanel tabPanel in _tabPanels)
{
<li class="nav-item">
@if (tabPanel.Name == ActiveTab)
{
<a class="nav-link active" data-toggle="tab" href="#@tabPanel.Name" role="tab">
@DisplayHeading(tabPanel.Name, tabPanel.Heading)
</a>
}
else
{
<a class="nav-link" data-toggle="tab" href="#@tabPanel.Name" role="tab">
@DisplayHeading(tabPanel.Name, tabPanel.Heading)
</a>
}
</li>
}
</ul>
<div class="tab-content">
<br />
@ChildContent
</div>
</div>
</div>
</CascadingValue>
@code {
private List<TabPanel> _tabPanels = new List<TabPanel>();
[Parameter]
public RenderFragment ChildContent { get; set; } // contains the TabPanels
[Parameter]
public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified
internal void AddTabPanel(TabPanel tabPanel)
{
_tabPanels.Add(tabPanel);
if (string.IsNullOrEmpty(ActiveTab))
{
ActiveTab = tabPanel.Name;
}
}
private string DisplayHeading(string Name, string Heading)
{
return (string.IsNullOrEmpty(Heading)) ? Name : Heading;
}
}