feat(TabItem): add ShowFullScreen parameter (#3359)

* refactor: 增加 TargetId 参数用于指定全屏组件 Id

* feat: 增加全屏样式移除脚本防止 ESC 导致样式残留

* feat: 增加 ShowFullScreen 参数

* doc: 增加示例

* chore: bump version 8.4.8-beta04

* refactor: 重构代码增加 Id 生成条件

* doc: 示例增加全屏按钮

* test: 增加单元测试

* test: 增加单元测试

* refactor: 调整代码位置

src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor

@@ -30,15 +30,15 @@
 
 <div class="tabs-coms">
  <Tab IsBorderCard="true" IsLazyLoadTabItem="true" @ref="Tab">
- <TabItem Text="Example" Icon="fa-solid fa-desktop">
+ <TabItem Text="Example" Icon="fa-solid fa-desktop" ShowFullScreen="true">
  <CascadingValue Value="@RazorFileName" Name="RazorFileName">
  @Body
  </CascadingValue>
  </TabItem>
- <TabItem Text="Razor" Icon="fa-brands fa-html5">
+ <TabItem Text="Razor" Icon="fa-brands fa-html5" ShowFullScreen="true">
  <Pre @key="@RazorFileName" CodeFile="@RazorFileName" class="code-razor"></Pre>
  </TabItem>
- <TabItem Text="C#" Icon="fa-regular fa-file-code">
+ <TabItem Text="C#" Icon="fa-regular fa-file-code" ShowFullScreen="true">
  <Pre @key="@CSharpFileName" CodeFile="@CSharpFileName" class="code-cs"></Pre>
  </TabItem>
  <TabItem Text="@Video" Icon="fa-regular fa-file-video">

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
  <PropertyGroup>
- <Version>8.4.8-beta03</Version>
+ <Version>8.4.8-beta04</Version>
  </PropertyGroup>
 
  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -43,6 +43,10 @@ else
  <i class="@GetIconClassString(item.Icon)"></i>
  }
  <span class="tabs-item-text">@item.Text</span>
+ @if(item.ShowFullScreen)
+ {
+ <FullScreenButton TargetId="@GetIdByTabItem(item)"></FullScreenButton>
+ }
  @if (ShowClose && item.Closable)
  {
  <span class="tabs-item-close" @onclick:stopPropagation @onclick:preventDefault @onclick="() => RemoveTab(item)">
@@ -95,7 +99,7 @@ else
  {
  foreach (var item in Items)
  {
- <div @key="@item" class="@GetContentClassString(item)">
+ <div @key="@item" class="@GetContentClassString(item)" id="@GetIdByTabItem(item)">
  @RenderTabItem(item)
  </div>
  }

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -812,6 +812,8 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
  }
  }
 
+ private string? GetIdByTabItem(TabItem item) => item.ShowFullScreen ? ComponentIdGenerator.Generate(item) : null;
+
  /// <summary>
  /// <inheritdoc/>
  /// </summary>

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -11,11 +11,16 @@
  --bb-tabs-header-vertical-min-width: #{$bb-tabs-header-vertical-min-width};
  display: flex;
  flex-flow: column;
-}
-
-.tabs,
-.tabs-body-content {
  height: 100%;
+
+ .tabs-body-content {
+ background-color: var(--bs-body-bg);
+
+ &.bb-fs-open {
+ padding: var(--bb-tabs-body-padding);
+ overflow: auto;
+ }
+ }
 }
 
 .tabs-header {

src/BootstrapBlazor/Components/Tab/TabItem.cs

@@ -52,6 +52,12 @@ public class TabItem : ComponentBase
  [Parameter]
  public string? Icon { get; set; }
 
+ /// <summary>
+ /// 获得/设置 图标字符串
+ /// </summary>
+ [Parameter]
+ public bool ShowFullScreen { get; set; }
+
  /// <summary>
  /// 获得/设置 组件内容
  /// </summary>

src/BootstrapBlazor/wwwroot/modules/fullscreen.js

@@ -22,7 +22,6 @@ export function init(id) {
  else {
  fs.enter()
  }
- fs.toggleElement.classList.toggle('bb-fs-open')
  }
 
  fs.enter = () => {
@@ -40,6 +39,7 @@ export function init(id) {
  fs.toggleElement.classList.remove('bb-fs-open')
  }
  else {
+ fs.toggleElement.classList.add('bb-fs-open')
  requestAnimationFrame(fullscreenCheck);
  }
  }

test/UnitTest/Components/FullScreenTest.cs

@@ -113,6 +113,24 @@ public async Task ToggleById_Ok()
  await cut.InvokeAsync(() => fs.Instance.TestById("test-id"));
  }
 
+ [Fact]
+ public async Task Toggle_Ok()
+ {
+ var cut = Context.RenderComponent<BootstrapBlazorRoot>(builder =>
+ {
+ builder.Add(s => s.ChildContent, new RenderFragment(builder =>
+ {
+ builder.OpenElement(0, "div");
+ builder.AddAttribute(1, "id", "test-id");
+ builder.CloseElement();
+ builder.OpenComponent<FullScreenServiceTest>(0);
+ builder.CloseComponent();
+ }));
+ });
+ var fs = cut.FindComponent<FullScreenServiceTest>();
+ await cut.InvokeAsync(fs.Instance.Toggle);
+ }
+
  private class FullScreenServiceTest : ComponentBase
  {
  [Inject]
@@ -127,5 +145,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
  public Task Test(ElementReference ele) => FullScreenService.ToggleByElement(ele);
 
  public Task TestById(string id) => FullScreenService.ToggleById(id);
+
+ public Task Toggle() => FullScreenService.Toggle();
  }
 }

test/UnitTest/Components/TabTest.cs

@@ -748,4 +748,24 @@ public void Drag_Ok()
  cut.InvokeAsync(() => cut.Instance.DragItemCallback(10, 1));
  Assert.False(dragged);
  }
+
+ [Fact]
+ public async Task FullScreen_Ok()
+ {
+ var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
+ {
+ pb.AddChildContent<Tab>(pb =>
+ {
+ pb.AddChildContent<TabItem>(pb =>
+ {
+ pb.Add(a => a.ShowFullScreen, true);
+ pb.Add(a => a.Text, "Text1");
+ pb.Add(a => a.ChildContent, builder => builder.AddContent(0, "Test1"));
+ });
+ });
+ });
+
+ var button = cut.Find(".btn-fs");
+ await cut.InvokeAsync(() => button.Click());
+ }
 }