Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Footer

Displayed at the bottom of the page, with a back to top button

When using Footer components, pay attention to the setting of the style sheet position attribute

Pass the ID of the scroll bar component to the footer component

Demo

The Footer component is displayed at the bottom, and the page will automatically scroll back to the top when you click to return to the top

This example passes the component client ID

Attributes

Loading...
@page "/footers"

<h3>Footer</h3>

<h4>Displayed at the bottom of the page, with a back to top button</h4>

<p>When using <code>Footer</code> components, pay attention to the setting of the style sheet <code>position</code> attribute</p>

<DemoBlock Title="Basic usage" Introduction="Pass the ID of the scroll bar component to the footer component" Name="Normal">
    <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>The Footer component is displayed at the bottom, and the page will automatically scroll back to the top when you click to return to the top</p>
            <p>This example passes the component client ID</p>
        </div>
        <Footer Text="Bootstrap Blazor" Target="#scroll" style="margin: -1rem;" />
    </div>
</DemoBlock>

<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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Footers
{
    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public IStringLocalizer<Footers>? Localizer { get; set; }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Text",
                Description = Localizer["Desc1"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Target",
                Description = Localizer["Desc2"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload