Tabs design changes

WaxComponents/WaxComponents.csproj

@@ -4,7 +4,7 @@
         <TargetFramework>net7.0</TargetFramework>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
-        <Version>0.1.0</Version>
+        <Version>0.1.1</Version>
         <Title>WaxComponents</Title>
         <Authors>lllggghhhaaa</Authors>
         <Description>Simple components for blazor, free and opensource</Description>

WaxComponents/WaxTab.razor

@@ -5,27 +5,4 @@
     <div class="waxTabContent">
         @_activeTab?.Content
     </div>
-</CascadingValue>
-
-@code {
-
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
-
-    [Parameter]
-    public string Style { get; set; } = String.Empty;
-
-    private WaxTabItem? _activeTab;
-
-    public void SetTab(WaxTabItem tab, bool initialization = false)
-    {
-        if (initialization && _activeTab is not null) return;
-
-        _activeTab?.ChangeActive(false);
-        tab.ChangeActive(true);
-
-        _activeTab = tab;
-        StateHasChanged();
-    }
-
-}
+</CascadingValue>

WaxComponents/WaxTab.razor.cs

@@ -0,0 +1,39 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WaxComponents;
+
+public partial class WaxTab
+{
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string Style { get; set; } = String.Empty;
+
+    private List<WaxTabItem> _tabs = new();
+
+    private WaxTabItem? _activeTab;
+
+    public void RegisterTab(WaxTabItem tab)
+    {
+        _tabs.Add(tab);
+
+        tab.SetAsLast();
+        if (_tabs.Count == 1)
+        {
+            tab.SetAsFirst();
+            SetTab(tab);
+        }
+        else
+            _tabs[^2].SetAsLast(true);
+    }
+
+    public void SetTab(WaxTabItem tab)
+    {
+        _activeTab?.ChangeActive(false);
+        tab.ChangeActive(true);
+
+        _activeTab = tab;
+        StateHasChanged();
+    }
+}

WaxComponents/WaxTab.razor.css

@@ -1,6 +1,7 @@
 .waxTab {
     overflow: hidden;
     margin-top: 10px;
+    margin-left: 4px;
 }
 
 .waxTabContent {

WaxComponents/WaxTabItem.razor

@@ -1,45 +1,4 @@
-<button class="waxTabItem" style="background-color: @_bgColor;@Style" onclick="@OnTabClicked">
+<button class="waxTabItem" style="border-top-right-radius:@_borderTopRight;border-top-left-radius:@_borderTopLeft;background-color: @_bgColor;@Style" onclick="@OnTabClicked">
     <WaxIcon>@Icon</WaxIcon>
     <p class="waxTabItemText" style="font-size:@FontSize;@Style">@Text</p>
-</button>
-
-@code {
-
-    [Parameter]
-    public RenderFragment? Text { get; set; }
-
-    [Parameter]
-    public RenderFragment? Icon { get; set; }
-
-    [Parameter]
-    public RenderFragment? Content { get; set; }
-
-    [CascadingParameter]
-    public WaxTab? Parent { get; set; }
-
-    [Parameter]
-    public string FontSize { get; set; } = "12px";
-
-    [Parameter]
-    public string Style { get; set; } = String.Empty;
-
-    private string _bgColor = "white";
-
-    private void OnTabClicked()
-    {
-        if (Parent is not null) Parent.SetTab(this);
-    }
-
-    protected override void OnInitialized()
-    {
-        if (Parent is not null) Parent.SetTab(this, true);
-
-        base.OnInitialized();
-    }
-
-    public void ChangeActive(bool active)
-    {
-        _bgColor = active ? "rgba(255, 20, 147, 0.2) !important" : "white";
-    }
-
-}
+</button>

WaxComponents/WaxTabItem.razor.cs

@@ -0,0 +1,45 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WaxComponents;
+
+public partial class WaxTabItem
+{
+    [Parameter]
+    public RenderFragment? Text { get; set; }
+
+    [Parameter]
+    public RenderFragment? Icon { get; set; }
+
+    [Parameter]
+    public RenderFragment? Content { get; set; }
+
+    [CascadingParameter]
+    public WaxTab? Parent { get; set; }
+
+    [Parameter]
+    public string FontSize { get; set; } = "12px";
+
+    [Parameter]
+    public string Style { get; set; } = String.Empty;
+
+    private string _bgColor = "white";
+    private string _borderTopRight = "0";
+    private string _borderTopLeft = "0";
+
+    protected override void OnInitialized()
+    {
+        if (Parent is not null) Parent.RegisterTab(this);
+
+        base.OnInitialized();
+    }
+
+    public void ChangeActive(bool active) => _bgColor = active ? "rgba(255, 20, 147, 0.2) !important" : "white";
+
+    public void SetAsFirst(bool remove = false) => _borderTopLeft = remove ? "0" : "5px";
+    public void SetAsLast(bool remove = false) => _borderTopRight = remove ? "0" : "5px";
+
+    private void OnTabClicked()
+    {
+        if (Parent is not null) Parent.SetTab(this);
+    }
+}

WaxComponents/WaxTabItem.razor.css

@@ -1,15 +1,14 @@
 .waxTabItem {
     display: flex;
     float: left;
-    margin-right: 1px;
+    margin-right: -1px;
     white-space: nowrap;
     padding: 2px 10px;
 
     transition: background-color .15s;
 
     border: 1px solid deeppink;
     border-bottom: none;
-    border-radius: 5px 5px 0 0;
 }
 
 .waxTabItem:hover {