PSC.Blazor.Components.Tabs
1.0.6
dotnet add package PSC.Blazor.Components.Tabs --version 1.0.6
NuGet\Install-Package PSC.Blazor.Components.Tabs -Version 1.0.6
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PSC.Blazor.Components.Tabs" Version="1.0.6" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="PSC.Blazor.Components.Tabs" Version="1.0.6" />
<PackageReference Include="PSC.Blazor.Components.Tabs" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add PSC.Blazor.Components.Tabs --version 1.0.6
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: PSC.Blazor.Components.Tabs, 1.0.6"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package PSC.Blazor.Components.Tabs@1.0.6
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=PSC.Blazor.Components.Tabs&version=1.0.6
#tool nuget:?package=PSC.Blazor.Components.Tabs&version=1.0.6
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Blazor Tabs Component
This is a Tabs component for Blazor Web Assembly and Blazor Server. The full explanation of the source code is on PureSourceCode.com. Please leave your comment or question and use my forum. Please subscribe my YouTube channel.
Anatomy of Tabs
Tabs container attributes
When you add the Tabs in your page, the first thing is the main container for tabs is Tabs. Tabs has 4 attributes:
| Attribute | Description |
|---|---|
| TextFilling1 | This text is displayed on the left hand side of the tabs |
| TextFilling2 | This text is displayed on the right hand side of the tabs |
Tabs container events
Also, Tabs has the following events that you can use.
| Event | Description |
|---|---|
| OnTabChanged | When the use click on a new tab, this event is raised. So, you can attach a function to read the new tab object |
Tab attributes
| Attribute | Description |
|---|---|
| Text | The text to display in the tab |
| Value | The value associate to a tab (useful if you have to filter your data) |
| Enabled | Is this tab enabled? If not the user can't click on it. By default is True |
How to use
First, add the NuGet package in your project. The name of the package is PSC.Blazor.Components.Tabs and the only dependency it has is Microsoft.AspNetCore.Components.Web (>= 5.0.10).
After that, in your wwwroot\index.html or in the hosts file, you have to add a theme (CSS) for your segment control. Obviously, you can create your own theme. So, use this code:
<link href="_content/PSC.Blazor.Components.Tabs/themes/{theme-name}.css" rel="stylesheet" />
Example
@page "/test"
<Tabs TextFilling1="@text1" TextFilling2="@text2" OnTabChanged="OnTabChanged">
<Tab Text="Tab 1" Value="Tab1">
<h2>Content Tab 1</h2>
<p>
This is the content for the Tab 1. It is enabled.
</p>
</Tab>
<Tab Text="Tab 2" Value="Tab2">
<h2>Content Tab 2</h2>
<p>
This is the content for the Tab 2. It is enabled.
</p>
</Tab>
<Tab Text="Tab 3" Value="Tab3">
<h2>Content Tab 3</h2>
<p>
This is the content for the Tab 3. It is enabled.
</p>
</Tab>
<Tab Text="Tab 4" Enabled="@IsEnabled" Value="Tab4">
<h2>Content Tab 4</h2>
<p>
This is the content for the Tab 4. It is disabled if <i>IsEnabled = false</i>
</p>
</Tab>
</Tabs>
@code {
public string text1 = "Text on the left";
public string text2 = "Text on the right";
public bool IsEnabled = false;
public async Task OnTabChanged(Tab tab)
{
text1 = $"Tab value: {tab.Value}";
text2 = $"Tab text: {tab.Text}";
}
}
Themes
Blue
Green
Red
Light colors
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net5.0
- Microsoft.AspNetCore.Components.Web (>= 5.0.10)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
## [1.0.5] - 20/10/2021
### Added
- Add color themes
- Amend Package properties