Text Area
Text Area Label
diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs
index 163d8d534a..dbc343ccc9 100644
--- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs
+++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs
@@ -11,6 +11,7 @@ public partial class ComponentsDemo
{
private DrawerLocation _drawerLocation = DrawerLocation.Right;
private string? ActiveTabId { get; set; }
+ private string? ActiveAnchorTabId { get; set; } = "a-tab-1";
private NimbleDialog
? _dialog;
private string? DialogClosedReason { get; set; }
private NimbleDrawer? _drawer;
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor
new file mode 100644
index 0000000000..14c1dc2361
--- /dev/null
+++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor
@@ -0,0 +1,6 @@
+@namespace NimbleBlazor
+
+ @ChildContent
+
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs
new file mode 100644
index 0000000000..0263107f61
--- /dev/null
+++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs
@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+///
+/// A link styled as a tab
+///
+public partial class NimbleAnchorTab : ComponentBase
+{
+ ///
+ /// The child content of the element.
+ ///
+ [Parameter]
+ public RenderFragment? ChildContent { get; set; }
+
+ ///
+ /// Whether the tab is disabled (not selectable)
+ ///
+ [Parameter]
+ public bool? Disabled { get; set; }
+
+ ///
+ /// Any additional attributes that did not match known properties.
+ ///
+ [Parameter(CaptureUnmatchedValues = true)]
+ public IDictionary? AdditionalAttributes { get; set; }
+}
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor
new file mode 100644
index 0000000000..1e284b4227
--- /dev/null
+++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor
@@ -0,0 +1,6 @@
+@namespace NimbleBlazor
+
+ @ChildContent
+
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs
new file mode 100644
index 0000000000..99345c032d
--- /dev/null
+++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs
@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+///
+/// A sequence of links styled as tabs.
+///
+public partial class NimbleAnchorTabs : ComponentBase
+{
+ ///
+ /// The child content of the element.
+ ///
+ [Parameter]
+ public RenderFragment? ChildContent { get; set; }
+
+ ///
+ /// The id of the contained NimbleAnchorTab that is marked as active.
+ ///
+ [Parameter]
+ public string? ActiveId { get; set; }
+
+ ///
+ /// Any additional attributes that did not match known properties.
+ ///
+ [Parameter(CaptureUnmatchedValues = true)]
+ public IDictionary? AdditionalAttributes { get; set; }
+}
diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs
new file mode 100644
index 0000000000..b30e0da5bc
--- /dev/null
+++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs
@@ -0,0 +1,69 @@
+using System.Linq;
+using AngleSharp.Dom;
+using Bunit;
+using Xunit;
+
+namespace NimbleBlazor.Tests.Unit.Components;
+
+///
+/// Tests for
+///
+public class NimbleAnchorTabsTests
+{
+ [Fact]
+ public void NimbleAnchorTabsRendered_HasTabsMarkup()
+ {
+ var context = new TestContext();
+ context.JSInterop.Mode = JSRuntimeMode.Loose;
+ var expectedMarkup = "nimble-anchor-tabs";
+ var tabs = context.RenderComponent();
+
+ Assert.Contains(expectedMarkup, tabs.Markup);
+ }
+
+ [Fact]
+ public void NimbleAnchorTabsWithChildContent_HasChildMarkup()
+ {
+ var tabs = RenderTabsWithContent();
+ var expectedChildrenNames = new[] { "nimble-anchor-tab", "nimble-anchor-tab", "nimble-tabs-toolbar" };
+
+ var actualChildNodeNames = tabs.Nodes.First().ChildNodes.OfType().Select(node => node.LocalName).ToArray();
+ Assert.Equal(expectedChildrenNames, actualChildNodeNames);
+ }
+
+ [Fact]
+ public void NimbleAnchorTabsWithChildContent_HasActiveIdMarkup()
+ {
+ var tabs = RenderTabsWithContent();
+
+ Assert.Contains("activeid", tabs.Markup);
+ }
+
+ [Fact]
+ public void NimbleAnchorTabsWithChildContent_HasDisabledMarkup()
+ {
+ var tabs = RenderTabsWithContent();
+
+ Assert.Contains("disabled", tabs.Markup);
+ }
+
+ private IRenderedComponent RenderTabsWithContent()
+ {
+ var context = new TestContext();
+ context.JSInterop.Mode = JSRuntimeMode.Loose;
+ return context.RenderComponent(AddChildContentToTabs);
+ }
+
+ private void AddChildContentToTabs(ComponentParameterCollectionBuilder parameters)
+ {
+ parameters.Add(x => x.ActiveId, "tab1");
+ parameters.AddChildContent();
+ parameters.AddChildContent(SetTabDisabled);
+ parameters.AddChildContent();
+ }
+
+ private void SetTabDisabled(ComponentParameterCollectionBuilder parameters)
+ {
+ parameters.Add(x => x.Disabled, true);
+ }
+}