logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Console

Console component, generally used for the output of background tasks

Display background push messages

Demo
Monitor

Changes to colors are made by setting the Color parameter of ConsoleMessageItem

Demo
Monitor

Enable or disable automatic scrolling by setting the ShowAutoScroll property value

Demo

by setting IsAutoScroll Turn on autoscroll

Monitor

The data set is cleared by setting the OnClear callback method. Since this example uses the same data source as the previous example, it will cause the data source update delay in the above example

Demo
Monitor

Switch auto scroll the data by set ShowAutoScroll parameter

Demo

set up ShowAutoScroll="true" Show autoscroll options

Monitor

Attributes

Loading...

ConsoleMessageItem property

Loading...
@page "/consoles"

<h3>Console</h3>

<h4>Console component, generally used for the output of background tasks</h4>

<DemoBlock Title="Basic usage" Introduction="Display background push messages" Name="Normal">
    <Console Items="@Messages" Height="126" IsAutoScroll="false" />
</DemoBlock>

<DemoBlock Title="messages in different colors" Introduction="Changes to colors are made by setting the <code>Color</code> parameter of <code>ConsoleMessageItem</code>" Name="Color">
    <Console Items="@ColorMessages" Height="126" />
</DemoBlock>

<DemoBlock Title="auto scroll" Introduction="Enable or disable automatic scrolling by setting the <code>ShowAutoScroll</code> property value" Name="IsAutoScroll">
    <p class="mt-3">by setting <code>IsAutoScroll</code> Turn on autoscroll</p>
    <Console Items="@Messages" Height="126" IsAutoScroll="true" />
</DemoBlock>

<DemoBlock Title="Empty console" Introduction="The data set is cleared by setting the <code>OnClear</code> callback method. Since this example uses the same data source as the previous example, it will cause the data source update delay in the above example" Name="OnClear">
    <Console Items="@Messages" Height="126" OnClear="@OnClear" />
</DemoBlock>

<DemoBlock Title="ShowAutoScroll" Introduction="Switch auto scroll the data by set <code>ShowAutoScroll</code> parameter" Name="ShowAutoScroll">
    <p>set up <code>ShowAutoScroll="true"</code> Show autoscroll options</p>
    <Console Items="@Messages" Height="126" ShowAutoScroll="true" OnClear="@OnClear" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Items="@GetItemAttributes()" Title="ConsoleMessageItem property" />
// 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 System.Collections.Concurrent;

namespace BootstrapBlazor.Shared.Samples;

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

    private ConcurrentQueue<ConsoleMessageItem> Messages { get; set; } = new();
    private ConcurrentQueue<ConsoleMessageItem> ColorMessages { get; set; } = new();

    private CancellationTokenSource? CancelTokenSource { get; set; }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Task.Run(async () =>
            {
                CancelTokenSource = new CancellationTokenSource();
                while (CancelTokenSource != null && !CancelTokenSource.IsCancellationRequested)
                {
                    _locker.WaitOne();
                    Messages.Enqueue(new ConsoleMessageItem { Message = $"{DateTimeOffset.Now}: Dispatch Message" });

                    ColorMessages.Enqueue(new ConsoleMessageItem { Message = $"{DateTimeOffset.Now}: Dispatch Message", Color = GetColor() });

                    if (Messages.Count > 8)
                    {
                        Messages.TryDequeue(out var _);
                    }

                    if (ColorMessages.Count > 12)
                    {
                        ColorMessages.TryDequeue(out var _);
                    }
                    await InvokeAsync(StateHasChanged);
                    _locker.Set();

                    try
                    {
                        await Task.Delay(2000, CancelTokenSource.Token);
                    }
                    catch { }
                }
            });
        }
    }

    private static Color GetColor()
    {
        var second = DateTime.Now.Second;
        return (second % 3) switch
        {
            1 => Color.Danger,
            2 => Color.Info,
            _ => Color.None
        };
    }

    private readonly AutoResetEvent _locker = new(true);

    private void OnClear()
    {
        _locker.WaitOne();
        while (!Messages.IsEmpty)
        {
            Messages.TryDequeue(out var _);
        }
        _locker.Set();
    }

    private static IEnumerable<AttributeItem> GetItemAttributes() => new AttributeItem[]
    {
        new AttributeItem(){
            Name = "Message",
            Description = "控制台输出消息",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "Color",
            Description = "消息颜色",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "None"
        }
    };

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem(){
            Name = nameof(BootstrapBlazor.Components.Console.Items),
            Description = "组件数据源",
            Type = "IEnumerable<ConsoleMessageItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "Height",
            Description = "组件高度",
            Type = "int",
            ValueList = " — ",
            DefaultValue = "0"
        },
        new AttributeItem(){
            Name = nameof(BootstrapBlazor.Components.Console.IsAutoScroll),
            Description = "是否自动滚屏",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem(){
            Name = "ShowAutoScroll",
            Description = "是否显示自动滚屏选项",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem(){
            Name = "OnClear",
            Description = "组件清屏回调方法",
            Type = "int",
            ValueList = " — ",
            DefaultValue = "0"
        },
        new AttributeItem(){
            Name = "HeaderText",
            Description = "Header 显示文字",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "系统监控"
        },
        new AttributeItem(){
            Name = "HeaderTemplate",
            Description = "Header 模板",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "LightTitle",
            Description = "指示灯 Title",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "通讯指示灯"
        },
        new AttributeItem(){
            Name = "IsFlashLight",
            Description = "指示灯是否闪烁",
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "true"
        },
        new AttributeItem(){
            Name = "LightColor",
            Description = "指示灯颜色",
            Type = "Color",
            ValueList = " — ",
            DefaultValue = "Color.Success"
        },
        new AttributeItem(){
            Name = "ShowLight",
            Description = "是否显示指示灯",
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "true"
        },
        new AttributeItem(){
            Name = "ClearButtonText",
            Description = "按钮显示文字",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "清屏"
        },
        new AttributeItem(){
            Name = "ClearButtonIcon",
            Description = "按钮显示图标",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "fa-fw fa-solid fa-xmark"
        },
        new AttributeItem(){
            Name = "ClearButtonColor",
            Description = "按钮颜色",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "Secondary"
        },
        new AttributeItem(){
            Name = "FooterTemplate",
            Description = "Footer 模板",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };

    private void Dispose(bool disposing)
    {
        if (disposing)
        {
            if (CancelTokenSource != null)
            {
                CancelTokenSource.Cancel();
                CancelTokenSource.Dispose();
                CancelTokenSource = null;
            }
        }
    }

    /// <summary>
    /// 
    /// </summary>
    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }
}

B station related video link

No

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915