Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Scroll

Add scroll bars to components whose height or width exceeds the standard

The scroll bar can be rendered only when its element has a fixed height. Its height attribute can be set through the coat element

Add a scroll bar to the component. By setting the height of Height to 200px, the scroll bar appears when the height of the inner child element is 400px

Demo
Please scroll the scroll bar on the right
bottom

Attributes

Loading...
@page "/scrolls"

<h3>Scroll</h3>

<h4>Add scroll bars to components whose height or width exceeds the standard</h4>

<p>The scroll bar can be rendered only when its element has a fixed height. Its <code>height</code> attribute can be set through the coat element</p>

<DemoBlock Title="Common usage" Introduction="Add a scroll bar to the component. By setting the height of <code>Height</code> to 200px, the scroll bar appears when the height of the inner child element is 400px"  Name="Normal">
    <Scroll class="scroll-demo" Height="200px">
        <div style="height: 400px;">Please scroll the scroll bar on the right</div>
        <div>bottom</div>
    </Scroll>
</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 Scrolls
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Scrolls>? Localizer { get; set; }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["Desc1"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Height",
                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