Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

GoTop 返回顶端组件

点击后返回指定容器的顶端

基础用法

点击后返回顶端

Demo

底部显示 Footer 组件,点击返回顶端时页面自动滚动回顶端

本示例传递的是组件客户端 ID

Attributes

Loading...
@page "/gotops"

<h3>GoTop 返回顶端组件</h3>

<h4>点击后返回指定容器的顶端</h4>

<Block Title="基础用法" Introduction="点击后返回顶端">
    <div id="scroll" class="overflow-auto border border-secondary p-3" style="max-height: 180px; border-radius: 4px; position: relative;">
        <div style="height: 200px">
            <p>底部显示 Footer 组件,点击返回顶端时页面自动滚动回顶端</p>
            <p>本示例传递的是组件客户端 ID</p>
        </div>
        <footer class="footer">
            <div class="footer-text">
                <span>Bootstrap Blazor</span>
            </div>
            <GoTop Target="#scroll"></GoTop>
        </footer>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class GoTops
    {

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem() {
                Name = "Target",
                Description = "页脚组件控制的滚动条组件 ID",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload