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