Add BodyClass and BodyStyle parameters to BitPivotItem (#8536)

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor

@@ -20,8 +20,8 @@
         <div role="tabpanel"
              aria-hidden="false"
              aria-labelledby="@GetAriaLabelledby"
-             style="@GetSelectedItemStyle() @Styles?.ContentView"
-             class="bit-pvt-cct@((_selectedItem?.IsEnabled??false) ? "" : " disabled") @Classes?.ContentView">
+             style="@GetSelectedItemStyle()"
+             class="bit-pvt-cct @GetSelectedItemClass()">
             @(_selectedItem?.Body ?? _selectedItem?.ChildContent)
         </div>
     }

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs

@@ -204,12 +204,31 @@ private void SelectItemByKey(string? key)
 
     private string GetSelectedItemStyle()
     {
-        return _selectedItem?.Visibility switch
-        {
-            BitVisibility.Collapsed => "visibility:hidden",
-            BitVisibility.Hidden => "display:none",
-            _ => string.Empty
-        };
+        List<string?> list =
+        [
+            _selectedItem?.Visibility switch
+            {
+                BitVisibility.Collapsed => "visibility:hidden",
+                BitVisibility.Hidden => "display:none",
+                _ => string.Empty
+            },
+            Styles?.Body,
+            _selectedItem?.BodyStyle
+        ];
+
+        return string.Join(';', list.Where(s => s.HasValue()));
+    }
+
+    private string GetSelectedItemClass()
+    {
+        List<string?> list =
+        [
+            (_selectedItem?.IsEnabled is false) ? "disabled" : string.Empty,
+            Classes?.Body,
+            _selectedItem?.BodyClass
+        ];
+
+        return string.Join(' ', list.Where(s => s.HasValue()));
     }
 
     private string GetAriaLabelledby => $"Pivot-{UniqueId}-Tab-{_allItems.FindIndex(i => i == _selectedItem)}";

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotClassStyles.cs

@@ -13,9 +13,9 @@ public class BitPivotClassStyles
     public string? Header { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the content view of the BitPivot.
+    /// Custom CSS classes/styles for the items body of the BitPivot.
     /// </summary>
-    public string? ContentView { get; set; }
+    public string? Body { get; set; }
 
     /// <summary>
     /// Custom CSS classes/styles for the header item of the BitPivot.

src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivotItem.razor.cs

@@ -12,6 +12,16 @@ public partial class BitPivotItem : BitComponentBase, IDisposable
     /// </summary>
     [Parameter] public RenderFragment? Body { get; set; }
 
+    /// <summary>
+    /// The custom css class of the content of the pivot item.
+    /// </summary>
+    [Parameter] public string? BodyClass { get; set; }
+
+    /// <summary>
+    /// The custom css style of the content of the pivot item.
+    /// </summary>
+    [Parameter] public string? BodyStyle { get; set; }
+
     /// <summary>
     /// The content of the pivot item, It can be Any custom tag or a text.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor

@@ -562,7 +562,7 @@
                     </BitPivotItem>
                 </BitPivot>
                 <br />
-                <BitPivot Classes="@(new() { ContentView = "custom-content-view", SelectedItem = "custom-selected-item", Header = "custom-header" })">
+                <BitPivot Classes="@(new() { Body = "custom-body", SelectedItem = "custom-selected-item", Header = "custom-header" })">
                     <BitPivotItem HeaderText="File">
                         <div style="margin-top:10px">
                             <h1>Pivot #1</h1>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs

@@ -121,6 +121,20 @@ public partial class BitPivotDemo
                     Description = "The content of the pivot item, It can be Any custom tag or a text (alias of ChildContent).",
                 },
                 new()
+                {
+                    Name = "BodyClass",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "The custom css class of the content of the pivot item.",
+                },
+                new()
+                {
+                    Name = "BodyStyle",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "The custom css style of the content of the pivot item.",
+                },
+                new()
                 {
                     Name = "ChildContent",
                     Type = "RenderFragment?",
@@ -186,10 +200,10 @@ public partial class BitPivotDemo
                },
                new()
                {
-                   Name = "ContentView",
+                   Name = "Body",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the content view of the BitPivot."
+                   Description = "Custom CSS classes/styles for the items body of the BitPivot."
                },
                new()
                {
@@ -900,7 +914,7 @@ private void TogglePivotItemVisibility()
         border: 1px solid gray;
     }
 
-    .custom-content-view {
+    .custom-body {
         margin-top: 1rem;
         background-color: deepskyblue;
     }
@@ -970,7 +984,7 @@ private void TogglePivotItemVisibility()
     </BitPivotItem>
 </BitPivot>
 
-<BitPivot Classes=""@(new() { ContentView = ""custom-content-view"", SelectedItem = ""custom-selected-item"", Header = ""custom-header"" })"">
+<BitPivot Classes=""@(new() { Body = ""custom-body"", SelectedItem = ""custom-selected-item"", Header = ""custom-header"" })"">
     <BitPivotItem HeaderText=""File"">
         <div style=""margin-top:10px"">
             <h1>Pivot #1</h1>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.scss

@@ -24,7 +24,7 @@
         border: 1px solid gray;
     }
 
-    .custom-content-view {
+    .custom-body {
         margin-top: 1rem;
         background-color: deepskyblue;
     }