Merge branch 'main' into alex/table/ScrollModeVirtual#5085

ArgoZhang · ArgoZhang · commit b5d859c461a5 · 2025-01-11T13:28:19.000+08:00
diff --git a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.cs
@@ -108,7 +108,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
         if (Module != null)
         {
-            await Module.InvokeVoidAsync("init");
+            await Module.InvokeVoidAsync("scrollToAnchor");
         }
     }
 
diff --git a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js
@@ -1,4 +1,4 @@
-﻿export function init() {
+﻿export function scrollToAnchor() {
     const hash = decodeURI(location.hash)
     if (hash) {
         const anchor = hash.split('-')[0]
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@@ -98,7 +98,6 @@
     }
 
     .main {
-        height: 100%;
         width: calc(100% - var(--bb-sidebar-width));
     }
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Affixs.razor b/src/BootstrapBlazor.Server/Components/Samples/Affixs.razor
@@ -0,0 +1,31 @@
+﻿@page "/affix"
+
+<h3>@Localizer["AffixTitle"]</h3>
+
+<h4>@Localizer["AffixIntro"]</h4>
+
+<DemoBlock Title="@Localizer["AffixNormalTitle"]" Introduction="@Localizer["AffixNormalIntro"]" Name="Normal">
+    <div style="overflow: auto; height: 200px;">
+        <div style="height: 50px;">标题栏 Header</div>
+        <Affix>
+            <div style="line-height: 50px;">固定行 Affix</div>
+        </Affix>
+        <div style="height: 300px;">
+            <p>向下滚动查看效果</p>
+            <div>Scroll down to see the affix effect</div>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["AffixPositionTitle"]" Introduction="@Localizer["AffixPositionIntro"]" Name="Position">
+    <div style="overflow: auto; height: 200px;">
+        <div style="height: 50px;">标题栏 Header</div>
+        <div style="height: 300px;">
+            <p>上下滚动查看效果</p>
+            <div>Scroll up and down to see the effect</div>
+        </div>
+        <Affix Position="AffixPosition.Bottom" Offset="10">
+            <div>底部固定行 Affix</div>
+        </Affix>
+    </div>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Affixs.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Affixs.razor.cs
@@ -0,0 +1,16 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Affixs 组件
+/// </summary>
+public partial class Affixs
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Affixs>? Localizer { get; set; }
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -316,6 +316,7 @@ void AddForm(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["Cascader"],
                     Url = "cascader"
                 },
@@ -404,6 +405,7 @@ void AddForm(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["MultiSelect"],
                     Url = "multi-select"
                 },
@@ -429,22 +431,26 @@ void AddForm(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Match = NavLinkMatch.All,
                     Text = Localizer["Select"],
                     Url = "select"
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["SelectObject"],
                     Url = "select-object"
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["SelectTable"],
                     Url = "select-table"
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["SelectTree"],
                     Url = "select-tree"
                 },
@@ -502,6 +508,12 @@ void AddData(DemoMenuItem item)
                     Url = "ajax"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Affix"],
+                    Url = "affix"
+                },
+                new()
                 {
                     Text = Localizer["Avatar"],
                     Url = "avatar"
@@ -668,7 +680,6 @@ void AddData(DemoMenuItem item)
                 },
                 new()
                 {
-                    IsNew = true,
                     Text = Localizer["Player"],
                     Url = "player"
                 },
@@ -694,6 +705,7 @@ void AddData(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsNew = true,
                     Text = Localizer["RDKit"],
                     Url = "rdkit"
                 },
@@ -709,6 +721,7 @@ void AddData(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsNew = true,
                     Text = Localizer["SmilesDrawer"],
                     Url = "smiles-drawer"
                 },
@@ -945,6 +958,7 @@ void AddTable(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsUpdate = true,
                     Text = Localizer["TableLookup"],
                     Url = "table/lookup"
                 },
@@ -1503,7 +1517,6 @@ void AddServices(DemoMenuItem item)
                 },
                 new()
                 {
-                    IsNew = true,
                     Text = Localizer["WebSerial"],
                     Url = "web-serial"
                 },
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4786,7 +4786,8 @@
     "WinBox": "WinBox",
     "Player": "Player",
     "RDKit": "RDKit",
-    "SmilesDrawer": "SmilesDrawer"
+    "SmilesDrawer": "SmilesDrawer",
+    "Affix": "Affix"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6868,5 +6869,14 @@
     "SmilesDrawerNormalIntro": "Set the molecular formula through <code>Smiles</code> and draw the component",
     "SmilesDrawerSizeTitle": "Size",
     "SmilesDrawerSizeIntro": "Set the width and height of the molecular formula by setting the <code>Width</code> and <code>Height</code> values"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Affixs": {
+    "AffixTitle": "Affix",
+    "AffixIntro": "Fix the element to a specific visible area",
+    "AffixNormalTitle": "Basic usage",
+    "AffixNormalIntro": "Affix is fixed at the top of the page by default",
+    "AffixPositionTitle": "Position",
+    "AffixPositionIntro": "Use the parameter <code>Position</code> to control whether the top or bottom is fixed",
+    "AffixOffsetDesc": "The parameter <code>Position</code> controls whether the top or bottom is fixed, and the <code>Offset</code> value sets the offset to the top or bottom"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4786,7 +4786,8 @@
     "WinBox": "窗口 WinBox",
     "Player": "播放器 Player",
     "RDKit": "分子式组件 RDKit",
-    "SmilesDrawer": "分子式组件 SmilesDrawer"
+    "SmilesDrawer": "分子式组件 SmilesDrawer",
+    "Affix": "固钉组件 Affix"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6868,5 +6869,13 @@
     "SmilesDrawerNormalIntro": "通过 <code>Smiles</code> 设置分子式，组件画图",
     "SmilesDrawerSizeTitle": "尺寸",
     "SmilesDrawerSizeIntro": "通过设置 <code>Width</code> <code>Height</code> 值设置分子式宽高"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Affixs": {
+    "AffixTitle": "Affix 固钉组件",
+    "AffixIntro": "将页面元素钉在可视范围",
+    "AffixNormalTitle": "基础用法",
+    "AffixNormalIntro": "固钉默认固定在页面顶部",
+    "AffixPositionTitle": "位置与距离",
+    "AffixPositionIntro": "通过参数 <code>Position</code> 控制固定顶端还是底端，通过 <code>Offset</code> 值设置到顶端或者底端距离偏移量"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -222,7 +222,8 @@
     "win-box": "WinBoxes",
     "player": "Players",
     "rdkit": "Rdkits",
-    "smiles-drawer": "SmilesDrawers"
+    "smiles-drawer": "SmilesDrawers",
+    "affix": "Affixs"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
     <Version>9.2.7-beta05</Version>
diff --git a/src/BootstrapBlazor/Components/Affix/Affix.razor b/src/BootstrapBlazor/Components/Affix/Affix.razor
@@ -0,0 +1,6 @@
+﻿@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
+    @ChildContent
+</div>
diff --git a/src/BootstrapBlazor/Components/Affix/Affix.razor.cs b/src/BootstrapBlazor/Components/Affix/Affix.razor.cs
@@ -0,0 +1,47 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Affix 固钉组件
+/// </summary>
+public partial class Affix
+{
+    /// <summary>
+    /// 获得/设置 指定偏移量后触发
+    /// </summary>
+    [Parameter]
+    public float Offset { get; set; }
+
+    /// <summary>
+    /// 获得/设置 固定位置枚举 默认 <see cref="AffixPosition.Top"/>
+    /// </summary>
+    [Parameter]
+    public AffixPosition Position { get; set; }
+
+    /// <summary>
+    /// 获得/设置 z-index 值 默认 100
+    /// </summary>
+    [Parameter]
+    public int? ZIndex { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件内容
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public RenderFragment? ChildContent { get; set; }
+
+    private string? ClassString => CssBuilder.Default("bb-affix")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default("position: sticky;")
+        .AddClass($"z-index: {ZIndex};", ZIndex.HasValue)
+        .AddClass($"{Position.ToDescriptionString()}: {Offset}px;")
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+}
diff --git a/src/BootstrapBlazor/Components/Affix/Affix.razor.scss b/src/BootstrapBlazor/Components/Affix/Affix.razor.scss
@@ -0,0 +1,3 @@
+.bb-affix {
+    background-color: var(--bs-body-bg);
+}
diff --git a/src/BootstrapBlazor/Components/BaseComponents/IdComponentBase.cs b/src/BootstrapBlazor/Components/BaseComponents/IdComponentBase.cs
@@ -15,10 +15,10 @@ public abstract class IdComponentBase : BootstrapComponentBase
     /// </summary>
     [Parameter]
     [NotNull]
-    public virtual string? Id { get; set; }
+    public string? Id { get; set; }
 
     /// <summary>
-    /// 获得 IComponentIdGenerator 实例
+    /// 获得 <see cref="IComponentIdGenerator"/> 实例
     /// </summary>
     [Inject]
     [NotNull]
diff --git a/src/BootstrapBlazor/Enums/AffixPosition.cs b/src/BootstrapBlazor/Enums/AffixPosition.cs
@@ -0,0 +1,26 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// AffixPosition 枚举
+/// </summary>
+public enum AffixPosition
+{
+    /// <summary>
+    /// 固定在顶部
+    /// </summary>
+    [Description("top")]
+    Top,
+
+    /// <summary>
+    /// 固定在底部
+    /// </summary>
+    [Description("bottom")]
+    Bottom
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -1,6 +1,7 @@
 @import "bootstrapblazor-dark.scss";
 
 @import "root.scss";
+@import "../../Components/Affix/Affix.razor.scss";
 @import "../../Components/Alert/Alert.razor.scss";
 @import "../../Components/AnchorLink/AnchorLink.razor.scss";
 @import "../../Components/AutoComplete/AutoComplete.razor.scss";
diff --git a/test/UnitTest/Components/AffixTest.cs b/test/UnitTest/Components/AffixTest.cs
@@ -0,0 +1,25 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace UnitTest.Components;
+
+public class AffixTest : BootstrapBlazorTestBase
+{
+    [Fact]
+    public void Position_Ok()
+    {
+        var cut = Context.RenderComponent<Affix>(pb =>
+        {
+            pb.Add(a => a.Offset, 100);
+            pb.Add(a => a.ZIndex, 10);
+            pb.Add(a => a.Position, AffixPosition.Bottom);
+            pb.Add(a => a.ChildContent, pb => pb.AddMarkupContent(0, "<button>Test</button>"));
+        });
+        Assert.Contains("bb-affix", cut.Markup);
+        Assert.Contains("position: sticky;", cut.Markup);
+        Assert.Contains("z-index: 10;", cut.Markup);
+        Assert.Contains("bottom: 100px;", cut.Markup);
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)`
`108`	`108`	`}`
`109`	`109`	`if (Module != null)`
`110`	`110`	`{`
`111`		`- await Module.InvokeVoidAsync("init");`
	`111`	`+ await Module.InvokeVoidAsync("scrollToAnchor");`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export function init() {`
	`1`	`+export function scrollToAnchor() {`
`2`	`2`	`const hash = decodeURI(location.hash)`
`3`	`3`	`if (hash) {`
`4`	`4`	`const anchor = hash.split('-')[0]`
Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,6 @@`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`.main {`
`101`		`- height: 100%;`
`102`	`101`	`width: calc(100% - var(--bb-sidebar-width));`
`103`	`102`	`}`
`104`	`103`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<Project Sdk="Microsoft.NET.Sdk.Razor">`
	`1`	`+<Project Sdk="Microsoft.NET.Sdk.Razor">`
`2`	`2`
`3`	`3`	`<PropertyGroup>`
`4`	`4`	`<Version>9.2.7-beta05</Version>`