feat(Affix): add Affix component

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>

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([email protected]) 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; }
+}

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"
                 },

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"
   }
 }

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> 值设置到顶端或者底端距离偏移量"
   }
 }

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",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.7-beta04</Version>
+    <Version>9.2.7-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Affix/Affix.razor

@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
+    @ChildContent
+</div>

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([email protected]) 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();
+}

src/BootstrapBlazor/Components/Affix/Affix.razor.scss

@@ -0,0 +1,3 @@
+.bb-affix {
+    background-color: var(--bs-body-bg);
+}

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([email protected]) 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
+}

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";

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([email protected]) 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);
+    }
+}