mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-02-04 05:35:44 +00:00
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:
27
Radzen.Blazor.Tests/TocTests.cs
Normal file
27
Radzen.Blazor.Tests/TocTests.cs
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user