Skip to content

feat(Tab): reduce cascade parameters #5771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Apr 2, 2025
Merged

feat(Tab): reduce cascade parameters #5771

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a0d8d4d
refactor: 重构参数减少级联参数的使用
ArgoZhang Apr 2, 2025
6dca791
refactor: 减少级联参数
ArgoZhang Apr 2, 2025
28c2b7f
refactor: 使用代码完成渲染
ArgoZhang Apr 2, 2025
ecb2bdc
refactor: 调整 fix 元素
ArgoZhang Apr 2, 2025
424ddb9
refactor: 增加右键支持
ArgoZhang Apr 2, 2025
0afa3f8
refactor: 更新渲染逻辑
ArgoZhang Apr 2, 2025
a69cff4
refactor: 更新样式
ArgoZhang Apr 2, 2025
e67e054
refactor: 更新 LayoutId 获得逻辑
ArgoZhang Apr 2, 2025
8348871
refactor: 撤销样式
ArgoZhang Apr 2, 2025
49dfb98
test: 更新单元测试
ArgoZhang Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/Layout/Layout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ public partial class Layout : IHandlerException
/// Gets or sets the template of the toolbar button. Default is null.
/// </summary>
[Parameter]
public RenderFragment? ToolbarTemplate { get; set; }
public RenderFragment<Tab>? ToolbarTemplate { get; set; }

/// <summary>
/// Gets or sets whether show the full screen button. Default is true.
Expand Down
8 changes: 0 additions & 8 deletions src/BootstrapBlazor/Components/Layout/Layout.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,6 @@

.layout-main {
min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));

> .tabs,
> .bb-cm-zone > .tabs {
margin: -1rem;
border: none;
border-radius: unset;
min-height: calc(100% + 2rem);
}
}
}

Expand Down
215 changes: 83 additions & 132 deletions src/BootstrapBlazor/Components/Tab/Tab.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,9 @@
{
@Body
}
else if (ShowContextMenu)
{
<ContextMenuZone @ref="_contextMenuZone">
@RenderTab
<ContextMenu>
@if (BeforeContextMenuTemplate != null)
{
@BeforeContextMenuTemplate(this)
}
<ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
@if (ShowContextMenuFullScreen)
{
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
}
@if (ContextMenuTemplate != null)
{
@ContextMenuTemplate(this)
}
</ContextMenu>
</ContextMenuZone>
}
else
{
@RenderTab
}

@code {
RenderFragment RenderTab =>
@<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
@if (TabHeader != null)
{
TabHeader.Render(RenderTabHeader);
Expand Down Expand Up @@ -67,16 +36,16 @@ else
}
</CascadingValue>
</div>
</div>;
</div>
}

@code {
RenderFragment RenderTabHeader =>
@<div class="tabs-header">
<div class="@WrapClassString">
@if (BeforeNavigatorTemplate != null)
{
<CascadingValue Value="this" IsFixed="true">
@BeforeNavigatorTemplate
</CascadingValue>
@BeforeNavigatorTemplate(this)
}
@if (ShowNavigatorButtons)
{
Expand All @@ -94,111 +63,93 @@ else
@ChildContent
</CascadingValue>
<RenderTemplate>
@if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
{
if (ClickTabToNavigation)
{
Navigator.NavigateTo(DefaultUrl);
}
else
{
AddTabItem(DefaultUrl);
}
}
@if (FirstRender)
{
if (!Items.Any(t => t.IsActive))
{
Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
}
}
@foreach (var item in Items)
{
@if (item.HeaderTemplate != null)
{
<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
@item.HeaderTemplate(item)
</div>
}
else if (item.IsDisabled)
{
@RenderDisabledHeaderItem(item)
}
else
{
@RenderHeaderItem(item)
}
}
@if (IsCard || IsBorderCard)
{
<div class="tabs-item-fix"></div>
}
@RenderTabList()
</RenderTemplate>
@if (!IsCard && !IsBorderCard && ShowActiveBar)
{
<div class="tabs-active-bar"></div>
}
</div>
</div>
<CascadingValue Value="this" IsFixed="true">
@if (ButtonTemplate != null)
{
@ButtonTemplate
}
@if (ShowToolbar)
{
<div class="tabs-nav-toolbar">
@if (ShowRefreshToolbarButton)
{
<TabToolbarButton class="tabs-nav-toolbar-refresh"
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
}
@if (ShowFullscreenToolbarButton)
{
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
<FullScreenButton TargetId="@Id"
Icon="@FullscreenToolbarButtonIcon"
TooltipText="@FullscreenToolbarTooltipText"
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
</div>
}
@if (ToolbarTemplate != null)
{
@ToolbarTemplate
}
</div>
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar right">
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
<i class="@NextIcon"></i>
</div>
</Tooltip>
</div>
}
@if (ShouldShowExtendButtons())
{
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
</Tooltip>
</div>
<div class="dropdown-menu dropdown-menu-end shadow">
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
</div>
}
@if (AfterNavigatorTemplate != null)
{
@AfterNavigatorTemplate
}
</CascadingValue>
@if (ButtonTemplate != null)
{
@ButtonTemplate(this)
}
@if (ShowToolbar)
{
<div class="tabs-nav-toolbar">
@if (ShowRefreshToolbarButton)
{
<TabToolbarButton class="tabs-nav-toolbar-refresh"
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
}
@if (ShowFullscreenToolbarButton)
{
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
<FullScreenButton TargetId="@Id"
Icon="@FullscreenToolbarButtonIcon"
TooltipText="@FullscreenToolbarTooltipText"
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
</div>
}
@if (ToolbarTemplate != null)
{
@ToolbarTemplate(this)
}
</div>
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar right">
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
<i class="@NextIcon"></i>
</div>
</Tooltip>
</div>
}
@if (ShouldShowExtendButtons())
{
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
</Tooltip>
</div>
<div class="dropdown-menu dropdown-menu-end shadow">
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
</div>
}
@if (AfterNavigatorTemplate != null)
{
@AfterNavigatorTemplate(this)
}
</div>
</div>;

RenderFragment RenderContextMenu =>
@<ContextMenu>
@if (BeforeContextMenuTemplate != null)
{
@BeforeContextMenuTemplate(this)
}
<ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
@if (ShowContextMenuFullScreen)
{
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
}
@if (ContextMenuTemplate != null)
{
@ContextMenuTemplate(this)
}
</ContextMenu>;

RenderFragment<TabItem> RenderTabItem => item =>
@<CascadingValue Value="item" IsFixed="true">
Expand Down
Loading
Loading