diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index ed26d38f41d..db79fa13e73 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.5.1 + 9.5.2 diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss index 1784445d252..1d5b9895cfe 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss @@ -49,6 +49,13 @@ .layout-main { min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height)); + + > .tabs { + margin: -1rem; + border: none; + border-radius: unset; + min-height: calc(100% + 2rem); + } } } @@ -184,6 +191,42 @@ transition: transform .3s linear; } } + + > .tabs { + height: 100%; + display: flex; + justify-content: flex-end; + flex: 1; + width: 1%; + min-width: 0; + margin-bottom: -2px; + } + + > .tabs.tabs-chrome { + .tabs-header { + --bb-tabs-item-height: 47px; + --bb-tabs-header-color: #fff; + --bb-tabs-chrome-item-height: 43px; + --bs-border-color: var(--bb-layout-headerbar-background); + --bb-tabs-header-bg-color: var(--bb-layout-headerbar-background); + + .tabs-item-close:hover { + background-color: transparent; + } + + .tabs-item-wrap:not(.active) .tabs-item { + color: var(--bb-tabs-header-color); + } + + .tabs-nav-toolbar .btn { + --bs-btn-color: var(--bb-tabs-header-color); + } + + .nav-link-bar { + --bs-body-color: var(--bb-tabs-header-color); + } + } + } } &:not(.has-footer) { @@ -229,7 +272,7 @@ &.is-fixed-tab { .layout-menu, - .tabs { + .layout-main > .tabs { height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height)); .tabs-body { diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index d18439f1a19..6b4a79f2d12 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -65,7 +65,7 @@ else @RenderTabList() - @if (!IsCard && !IsBorderCard && ShowActiveBar) + @if (!IsCard && !IsBorderCard && ShowActiveBar && TabStyle == TabStyle.Default) {
} diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index d47ba62b02d..ab6cf12e9d7 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -481,11 +481,6 @@ protected override void OnInitialized() base.OnInitialized(); ErrorLogger?.Register(this); - - if (Layout is { ShowTabInHeader: true }) - { - Layout.RegisterTab(this); - } } /// @@ -499,6 +494,15 @@ protected override void OnParametersSet() IsBorderCard = true; } + if (Layout is { ShowTabInHeader: true }) + { + Layout.RegisterTab(this); + } + else + { + TabHeader = null; + } + CloseOtherTabsText ??= Localizer[nameof(CloseOtherTabsText)]; CloseAllTabsText ??= Localizer[nameof(CloseAllTabsText)]; CloseCurrentTabText ??= Localizer[nameof(CloseCurrentTabText)]; diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 141d1142cae..fa61633db1d 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -494,7 +494,7 @@ .tabs-chrome > .tabs-header, .tabs-capsule > .tabs-header { - --bb-tabs-header-height: 36px; + --bb-tabs-chrome-item-height: 36px; --bb-tabs-header-bg-color: var(--bs-border-color); --bb-tabs-item-body-border-radius: 14.5px; --bb-tabs-item-body-padding: 4px 10px; @@ -637,7 +637,7 @@ border: none !important; border-top-left-radius: 10px; border-top-right-radius: 10px; - height: var(--bb-tabs-header-height) !important; + height: var(--bb-tabs-chrome-item-height) !important; .tabs-item-body { margin-bottom: var(--bb-tabs-item-body-margin-bottom);