Add customizable RadzenTreeItem css classes (#1856)

- Add ContentCssClass to RadzenTreeItem - Add IconCssClass to RadzenTreeItem - Add LabelCssClass to RadzenTreeItem - Add ItemContentCssClass to RadzenTree - Add ItemIconCssClass to RadzenTree - Add ItemLabelCssClass to RadzenTree
radzenhq · Dec 16, 2024 · 11a037a · 11a037a
1 parent 0743bb5
commit 11a037a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/Radzen.Blazor/RadzenTree.razor.cs b/Radzen.Blazor/RadzenTree.razor.cs
@@ -194,7 +194,26 @@ protected override string GetComponentCssClass()
         /// Gets or sets the checked values. Use with <c>@bind-CheckedValues</c> to sync it with a property.
         /// </summary>
         [Parameter]
-        public IEnumerable<object> CheckedValues { get; set; } = Enumerable.Empty<object>();
+        public IEnumerable<object> CheckedValues { get; set; } = Enumerable.Empty<object>();
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the item content.
+        /// </summary>
+        [Parameter]
+        public string ItemContentCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the item icon.
+        /// </summary>
+        [Parameter]
+        public string ItemIconCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the item label.
+        /// </summary>
+        [Parameter]
+
+        public string ItemLabelCssClass { get; set; }
 
         internal List<RadzenTreeItem> items = new List<RadzenTreeItem>();
 
@@ -260,7 +279,7 @@ RenderFragment RenderChildren(IEnumerable children, int depth)
                 {
                     if (text == null)
                     {
-                        text = level.Text ?? 
+                        text = level.Text ??
                             (!string.IsNullOrEmpty(level.TextProperty) ? Getter<string>(data, level.TextProperty) : null) ??
                             (o => "");
                     }

diff --git a/Radzen.Blazor/RadzenTreeItem.razor b/Radzen.Blazor/RadzenTreeItem.razor
@@ -15,10 +15,10 @@
         }
         @if (Template != null)
         {
-            <div class="rz-treenode-label" @onkeydown:stopPropagation>@Template(this)</div>
+            <div class="@LabelClassList" @onkeydown:stopPropagation>@Template(this)</div>
         } else
         {
-            <label for="@(GetHashCode())" class="rz-treenode-label">@Text</label>
+            <label for="@(GetHashCode())" class="@LabelClassList">@Text</label>
         }
     </div>
     @if (ChildContent != null && expanded)

diff --git a/Radzen.Blazor/RadzenTreeItem.razor.cs b/Radzen.Blazor/RadzenTreeItem.razor.cs
@@ -23,10 +23,17 @@ public partial class RadzenTreeItem : IDisposable
 
         ClassList ContentClassList => ClassList.Create("rz-treenode-content")
                                                .Add("rz-treenode-content-selected", selected)
-                                               .Add("rz-state-focused", Tree.IsFocused(this));
+                                               .Add("rz-state-focused", Tree.IsFocused(this))
+                                               .Add(Tree.ItemContentCssClass)
+                                               .Add(ContentCssClass);
         ClassList IconClassList => ClassList.Create("notranslate rz-tree-toggler rzi")
                                                .Add("rzi-caret-down", clientExpanded)
-                                               .Add("rzi-caret-right", !clientExpanded);
+                                               .Add("rzi-caret-right", !clientExpanded)
+                                               .Add(Tree.ItemIconCssClass)
+                                               .Add(IconCssClass);
+        private ClassList LabelClassList => ClassList.Create("rz-treenode-label")
+                                               .Add(Tree.ItemLabelCssClass)
+                                               .Add(LabelCssClass);
         /// <summary>
         /// Gets or sets the child content.
         /// </summary>
@@ -98,6 +105,24 @@ public partial class RadzenTreeItem : IDisposable
         [Parameter]
         public IEnumerable Data { get; set; }
 
+        /// <summary>
+        /// Gets or sets the CSS classes added to the content.
+        /// </summary>
+        [Parameter]
+        public string ContentCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the icon.
+        /// </summary>
+        [Parameter]
+        public string IconCssClass { get; set; }
+
+        /// <summary>
+        /// Gets or sets the CSS classes added to the label.
+        /// </summary>
+        [Parameter]
+        public string LabelCssClass { get; set; }
+
         internal List<RadzenTreeItem> items = new List<RadzenTreeItem>();
 
         internal void AddItem(RadzenTreeItem item)