RadzenTocItem: take in attributes to pass on to the list item element (#2360)

Co-authored-by: AI\jvermeyl <joris.vermeylen@uzgent.be>
This commit is contained in:
joriverm
2025-11-18 12:56:36 +01:00
committed by GitHub
parent 98d6729d4b
commit 59b1440990
3 changed files with 60 additions and 6 deletions

View File

@@ -0,0 +1,27 @@
using Bunit;
using System.Collections.Generic;
using Xunit;
namespace Radzen.Blazor.Tests
{
public class TocTests
{
[Fact]
public void TocItem_Renders_With_Attributes()
{
using var ctx = new TestContext();
var component = ctx.RenderComponent<RadzenTocItem>(parameters =>
{
parameters.Add(p => p.Attributes, new Dictionary<string, object>
{
{ "data-enhance-nav", "false" },
{ "aria-label", "Table of Contents Item" }
});
});
Assert.Contains("data-enhance-nav=\"false\"", component.Markup);
Assert.Contains("aria-label=\"Table of Contents Item\"", component.Markup);
}
}
}

View File

@@ -1,4 +1,4 @@
<li class=@Class role="presentation">
<li class=@GetCssClass() @attributes=@Attributes role="presentation">
<div class=@WrapperClass>
<a href=@Selector class=@LinkClass @onclick:preventDefault @onclick=@OnClickAsync>@if (Template is null) {@Text} else {@Template}</a>
</div>

View File

@@ -1,7 +1,9 @@
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Radzen.Blazor.Rendering;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
namespace Radzen.Blazor;
#nullable enable
@@ -11,6 +13,15 @@ namespace Radzen.Blazor;
/// </summary>
public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
{
/// <summary>
/// Gets or sets a dictionary of additional HTML attributes that will be applied to the component's root element.
/// Any attributes not explicitly defined as parameters will be captured here and rendered on the element.
/// Use this to add data-* attributes, ARIA attributes, or any custom HTML attributes.
/// </summary>
/// <value>The unmatched attributes dictionary.</value>
[Parameter(CaptureUnmatchedValues = true)]
public IReadOnlyDictionary<string, object> Attributes { get; set; } = new ReadOnlyDictionary<string, object>(new Dictionary<string, object>());
/// <summary>
/// Gets or sets the child content.
/// </summary>
@@ -43,10 +54,26 @@ public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
private bool selected;
private string Class => ClassList.Create("rz-toc-item")
/// <summary>
/// Gets the final CSS class rendered by the component. Combines it with a <c>class</c> custom attribute.
/// </summary>
protected string GetCssClass()
{
if (Attributes != null && Attributes.TryGetValue("class", out var @class) && !string.IsNullOrEmpty(Convert.ToString(@class)))
{
return $"{GetComponentCssClass()} {@class}";
}
return GetComponentCssClass();
}
/// <summary>
/// Gets the component CSS class.
/// </summary>
protected string GetComponentCssClass() => ClassList.Create("rz-toc-item")
.Add("rz-toc-item-selected", selected)
.ToString();
private string WrapperClass => ClassList.Create("rz-toc-item-wrapper")
.Add(Level switch
{
@@ -59,7 +86,7 @@ public partial class RadzenTocItem : ComponentBase, IAsyncDisposable
private string LinkClass => ClassList.Create("rz-toc-link")
.ToString();
internal void Activate()
{
selected = true;