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:
56
Oqtane.Client/Modules/Controls/TabStrip.razor
Normal file
56
Oqtane.Client/Modules/Controls/TabStrip.razor
Normal 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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user