Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Footer 页脚组件

显示在网页的最下方,提供返回顶端按钮

Footer 组件使用时注意样式表 position 属性的设置

基础用法

传递滚动条组件的 ID 给页脚组件

Demo

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

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

Attributes

Loading...
@page "/footers"

<h3>Footer 页脚组件</h3>

<h4>显示在网页的最下方,提供返回顶端按钮</h4>

<p><code>Footer</code> 组件使用时注意样式表 <code>position</code> 属性的设置</p>

<Block Title="基础用法" Introduction="传递滚动条组件的 ID 给页脚组件">
    <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 Text="Bootstrap Blazor" Target="#scroll" style="margin: -1rem;" />
    </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 Footers
    {

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Text",
                Description = "页脚组件显示的文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Target",
                Description = "页脚组件控制的滚动条组件 ID",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload