
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 = " — "
}
};
}
}