!206 feat(#I1KCLO): 增加滚动条组件

* feat: 演示网站侧边栏使用滚动条组件
* refactor: 滚动条组件增加高度宽度设置
* refactor: 增加对iPhone 手机的判断
* refactor: 增加对 mac 系统的支持
* fix: 修复 tab 下方火柴棍遮挡 Footer 问题
* feat: 增加 mac 系统判断
* feat: 自动隐藏默认值更改为 true
* doc: 更新文档增加属性说明
* feat: 增加 wasm 模式下对滚动条组件的引用
* doc: 增加第三方滚动条组件
* feat: 增加宽度高度参数
* feat: 增加 Scroll 组件

dist/404.html

@@ -16,6 +16,8 @@
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
@@ -60,6 +62,9 @@
     <script src="_content/BootstrapBlazor/lib/jquery/jquery.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
     <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
     <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
     <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>

src/BootstrapBlazor.Docs/wwwroot/docs/scroll/scroll.1.html

@@ -0,0 +1,4 @@
+<Scroll Height="200" IsAutoHide="true">
+    <div style="height: 600px;">Top</div>
+    <div>Bottom</div>
+</Scroll>

src/BootstrapBlazor.Docs/wwwroot/docs/scroll/scroll.2.html

@@ -0,0 +1,4 @@
+<Scroll Height="200" IsAutoHide="true" Delay="1000">
+    <div style="height: 600px;">Top</div>
+    <div>Bottom</div>
+</Scroll>

src/BootstrapBlazor.Server/Pages/_Host.cshtml

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
@@ -48,6 +49,7 @@
     <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
     <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
     <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
     <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>

src/BootstrapBlazor.Shared/Pages/Scrolls.razor

@@ -0,0 +1,23 @@
+@page "/scrolls"
+
+<h3>Scroll 滚动条</h3>
+
+<h4>给高度或者宽度超标的组件增加滚动条</h4>
+
+<p>由于滚动条组件内部屏蔽了系统的滚动条，设置了 <code>overflow: hidden</code> 所以自身或者其父元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 <code>height</code> 或者直接设置 <code>Scroll</code> 组件的高度 <code>Height</code> 属性</p>
+
+<Block Title="普通用法" Introduction="给组件增加滚动条，通过设置 <code>Height</code> 高度值为 400 使内部子元素高度为 1000 时出现滚动条" CodeFile="scroll.1.html">
+    <Scroll Height="200" IsAutoHide="false">
+        <div style="height: 600px;">Top</div>
+        <div>Bottom</div>
+    </Scroll>
+</Block>
+
+<Block Title="自动隐藏" Introduction="鼠标 <code>hover</code> 状态下自动显示滚动条，移开鼠标后滚动条自动隐藏" CodeFile="scroll.2.html">
+    <Scroll Height="200" IsAutoHide="true" Delay="1000">
+        <div style="height: 600px;">Top</div>
+        <div>Bottom</div>
+    </Scroll>
+</Block>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Scrolls.razor.cs

@@ -0,0 +1,55 @@
+using BootstrapBlazor.Shared.Common;
+using System.Collections.Generic;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public sealed partial class Scrolls
+    {
+        /// <summary>
+        /// 获得属性方法
+        /// </summary>
+        /// <returns></returns>
+        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "ChildContent",
+                Description = "子组件",
+                Type = "RenderFragment",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "Height",
+                Description = "组件高度",
+                Type = "int",
+                ValueList = " — ",
+                DefaultValue = "0"
+            },
+            new AttributeItem() {
+                Name = "Width",
+                Description = "组件宽度",
+                Type = "int",
+                ValueList = " — ",
+                DefaultValue = "0"
+            },
+            new AttributeItem() {
+                Name = "IsAutoHide",
+                Description = "是否自动隐藏",
+                Type = "true",
+                ValueList = "true|false",
+                DefaultValue = "true"
+            },
+            new AttributeItem() {
+                Name = "Delay",
+                Description = "自动隐藏延时时间",
+                Type = "int",
+                ValueList = "—",
+                DefaultValue = "1000"
+            }
+        };
+    }
+}

src/BootstrapBlazor.Shared/Shared/MainLayout.razor

@@ -3,7 +3,9 @@
 
 <section class="section">
     <div class="sidebar">
-        <NavMenu />
+        <Scroll>
+            <NavMenu />
+        </Scroll>
     </div>
 
     <div class="main">

src/BootstrapBlazor.Shared/Shared/NavMenu.razor

@@ -126,6 +126,9 @@
             <li class="nav-item">
                 <NavLink class="nav-link" href="rates" Match="NavLinkMatch.All"><span>评分</span><span>Rate</span></NavLink>
             </li>
+            <li class="nav-item">
+                <NavLink class="nav-link" href="scrolls" Match="NavLinkMatch.All"><span>滚动条</span><span>Scroll</span></NavLink>
+            </li>
             <li class="nav-item">
                 <NavLink class="nav-link" href="selects" Match="NavLinkMatch.All"><span>选择器</span><span>Select</span></NavLink>
             </li>

src/BootstrapBlazor.Shared/wwwroot/css/site.css

@@ -561,16 +561,6 @@ section {
             display: block;
         }
 
-        .sidebar .sidebar-content {
-            overflow: auto;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 250px;
-        }
-
     .header-img span {
         display: none;
     }

src/BootstrapBlazor.WebAssembly.ClientHost/wwwroot/index.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
     <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
@@ -63,6 +64,7 @@
     <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/summernote/summernote-lite.min.js"></script>
     <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
     <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
     <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
     <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>

src/BootstrapBlazor/Components/Scroll/Scroll.razor

@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits ScrollBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString" data-hide="@AutoHideString" data-delay="@Delay" @ref="ScrollElement">
+    @ChildContent
+</div>

src/BootstrapBlazor/Components/Scroll/ScrollBase.cs

@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Components
+{
+    /// <summary>
+    /// Scroll 组件基类
+    /// </summary>
+    public abstract class ScrollBase : BootstrapComponentBase
+    {
+        /// <summary>
+        /// Scroll 组件 DOM 实例
+        /// </summary>
+        protected ElementReference ScrollElement { get; set; }
+
+        /// <summary>
+        /// 获得 组件样式
+        /// </summary>
+        protected string? ClassString => CssBuilder.Default("scroll")
+            .AddClassFromAttributes(AdditionalAttributes)
+            .Build();
+
+        /// <summary>
+        /// 获得 组件 Style
+        /// </summary>
+        protected string? StyleString => CssBuilder.Default()
+            .AddClass($"height: {Height}px", Height > 0)
+            .AddClass($"width: {Width}px", Width > 0)
+            .AddStyleFromAttributes(AdditionalAttributes)
+            .Build();
+
+        /// <summary>
+        /// 获得 是否自动隐藏
+        /// </summary>
+        protected string? AutoHideString => IsAutoHide ? "true" : "false";
+
+        /// <summary>
+        /// 获得/设置 子组件
+        /// </summary>
+        [Parameter]
+        public RenderFragment? ChildContent { get; set; }
+
+        /// <summary>
+        /// 获得/设置 组件高度
+        /// </summary>
+        [Parameter]
+        public int Height { get; set; }
+
+        /// <summary>
+        /// 获得/设置 组件宽度
+        /// </summary>
+        [Parameter]
+        public int Width { get; set; }
+
+        /// <summary>
+        /// 获得/设置 是否自动隐藏
+        /// </summary>
+        [Parameter]
+        public bool IsAutoHide { get; set; } = true;
+
+        /// <summary>
+        /// 获得/设置 自动隐藏延时时间 默认 1000 毫秒
+        /// </summary>
+        [Parameter]
+        public int Delay { get; set; } = 1000;
+
+        /// <summary>
+        /// OnAfterRenderAsync 方法
+        /// </summary>
+        /// <param name="firstRender"></param>
+        /// <returns></returns>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender && JSRuntime != null)
+            {
+                await JSRuntime.Invoke(ScrollElement, "scroll");
+            }
+        }
+    }
+}

src/BootstrapBlazor/Utils/CssBuilder.cs

@@ -104,6 +104,22 @@ namespace BootstrapBlazor.Components
             return this;
         }
 
+        /// <summary>
+        /// Adds a conditional Style when it exists in a dictionary to the builder with space separator.
+        /// Null safe operation.
+        /// </summary>
+        /// <param name="additionalAttributes">Additional Attribute splat parameters</param>
+        /// <returns>CssBuilder</returns>
+        public CssBuilder AddStyleFromAttributes(IDictionary<string, object>? additionalAttributes)
+        {
+            if (additionalAttributes != null && additionalAttributes.TryGetValue("style", out var c))
+            {
+                var styleList = c.ToString() ?? "";
+                AddClass(styleList);
+            }
+            return this;
+        }
+
         /// <summary>
         /// Finalize the completed CSS Classes as a string.
         /// </summary>

src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css

@@ -3501,9 +3501,9 @@ a {
             background-color: #fff;
         }
 
-.layout.is-page .has-sidebar .layout-side.is-fixed-header {
-    z-index: 1020;
-}
+    .layout.is-page .has-sidebar .layout-side.is-fixed-header, .layout.is-page .layout-footer.is-fixed {
+        z-index: 1020;
+    }
 
 @media (min-width: 768px) {
     .layout.is-page .layout-side {
@@ -4303,3 +4303,18 @@ a {
             margin-top: 3px;
         }
 /*end split*/
+
+/*scroll*/
+.scroll {
+    height: 100%;
+    width: 100%;
+}
+
+    .scroll.is-phone {
+        overflow: auto;
+    }
+
+    .scroll.os-theme-dark > .os-scrollbar > .os-scrollbar-track, .scroll.os-theme-light > .os-scrollbar > .os-scrollbar-track {
+        background-color: #f1f1f1;
+    }
+/*end scroll*/

src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js

@@ -1449,6 +1449,34 @@
             }
 
             calcWindow();
+        },
+        scroll: function (el) {
+            var $el = $(el);
+
+            // 移动端不需要修改滚动条
+            // 苹果系统不需要修改滚动条
+            var mac = navigator.userAgent.match(/iPhone/i);
+            if (!mac) {
+                var autoHide = $el.attr('data-hide');
+                var delay = parseInt($el.attr('data-delay'));
+                var scrollbars = {};
+                if (autoHide === 'true') {
+                    if (isNaN(delay)) {
+                        delay = 1000;
+                    }
+                    scrollbars = {
+                        autoHide: 'leave',
+                        autoHideDelay: delay
+                    }
+                }
+                $el.overlayScrollbars({
+                    className: 'os-theme-dark',
+                    scrollbars: scrollbars
+                });
+            }
+            else {
+                $el.addClass('is-phone');
+            }
         }
     });