Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Timeline 时间线

可视化地呈现时间流信息

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity,时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps 步骤条等区分。

Demo
  • 创建时间
    2021-09-25
  • 通过审核
    2021-09-26
  • 活动按期开始
    2021-09-27

可根据实际场景⾃定义节点颜⾊,或直接使⽤图标。

Demo
  • 默认样式的节点
    2021-09-25
  • 支持自定义颜色
    2021-09-27
  • 支持使用图标
    2021-09-28

内容在时间轴左侧轮流出现

Demo

通过设置 IsLeft 属性来控制内容出现在时间线左侧

  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Network problems being solved 2015-09-01
  • Create a services site 2015-09-01

内容在时间轴两侧轮流出现

Demo

通过设置 IsAlternate 属性来控制时间线左右交替展现

  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Network problems being solved 2015-09-01
  • Create a services site 2015-09-01

时间轴上展现自定义组件

Demo

通过设置 TimelineItemCustomerComponent 来控制时间线展现的自定义组件

  • Monitor
    9/25/2021 2:57:49 AM +08:00: Dispatch Message
    实时输出
  • Counter

    Current count: 0

    计数器
  • Weather forecast

    This component demonstrates fetching data from a service.

    Date Temp. (C) Temp. (F) Summary
    9/26/2021 6 42 Scorching
    9/27/2021 32 89 Freezing
    9/28/2021 40 103 Sweltering
    9/29/2021 -19 -2 Hot
    9/30/2021 49 120 Balmy
    天气预报信息

Attributes

Loading...

TimelineItem 属性

Loading...
@page "/timelines"

<h3>Timeline 时间线</h3>

<h4>可视化地呈现时间流信息</h4>

<Block Title="基本用法" Introduction="Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity,时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps 步骤条等区分。">
    <div class="d-flex mb-3">
        <label class="me-1">排序:</label>
        <RadioList TValue="SelectedItem" OnSelectedChanged="@OnStateChanged" Items="@Items"></RadioList>
    </div>
    <Timeline Items="TimelineItems" IsReverse="@IsReverse"></Timeline>
</Block>

<Block Title="⾃定义节点样式" Introduction="可根据实际场景⾃定义节点颜⾊,或直接使⽤图标。">
    <Timeline Items="CustomerTimelineItems" />
</Block>

<Block Title="左侧展现" Introduction="内容在时间轴左侧轮流出现">
    <p>通过设置 <code>IsLeft</code> 属性来控制内容出现在时间线左侧</p>
    <Timeline Items="AlternateTimelineItems" IsLeft="true" />
</Block>

<Block Title="交替展现" Introduction="内容在时间轴两侧轮流出现">
    <p>通过设置 <code>IsAlternate</code> 属性来控制时间线左右交替展现</p>
    <Timeline Items="AlternateTimelineItems" IsAlternate="true" />
</Block>

<Block Title="展现自定义组件" Introduction="时间轴上展现自定义组件">
    <p>通过设置 <code>TimelineItem</code> 的 <code>CustomerComponent</code> 来控制时间线展现的自定义组件</p>
    <Timeline Items="GetCustomerComponentTimelineItems()" />
</Block>

<AttributeTable Items="GetAttributes()" />

<AttributeTable Items="GetTimelineItemAttributes()" Title="TimelineItem 属性" />
// 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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Timelines
    {
        private readonly ConcurrentQueue<ConsoleMessageItem> _messages = new();

        private readonly CancellationTokenSource _cancelTokenSource = new();

        private readonly AutoResetEvent _locker = new(true);

        private IEnumerable<ConsoleMessageItem> Messages => _messages;

        private bool IsReverse { get; set; }

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

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            var _ = Task.Run(async () =>
            {
                do
                {
                    _locker.WaitOne();
                    _messages.Enqueue(new ConsoleMessageItem { Message = $"{DateTimeOffset.Now}: Dispatch Message", Color = GetColor() });

                    if (_messages.Count > 8)
                    {
                        _messages.TryDequeue(out var _);
                    }
                    await InvokeAsync(StateHasChanged);
                    _locker.Set();
                    await Task.Delay(2000, _cancelTokenSource.Token);
                }
                while (!_cancelTokenSource.IsCancellationRequested);
            });
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="values"></param>
        /// <param name="value"></param>

        public Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem value)
        {
            IsReverse = value.Text == "倒序";
            StateHasChanged();
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        private IEnumerable<SelectedItem> Items { get; set; } = new SelectedItem[]
        {
            new SelectedItem("1","正序"){ Active=true },
            new SelectedItem("2","倒序")
        };

        /// <summary>
        /// 
        /// </summary>
        private readonly IEnumerable<TimelineItem> TimelineItems = new TimelineItem[]
        {
            new TimelineItem {
                Content = "创建时间",
                Description = DateTime.Now.ToString("yyyy-MM-dd")
            },
            new TimelineItem{
                Content = "通过审核",
                Description = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd")
            },
            new TimelineItem
            {
                Content = "活动按期开始",
                Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd")
            }
        };

        /// <summary>
        /// 
        /// </summary>
        private readonly IEnumerable<TimelineItem> CustomerTimelineItems = new TimelineItem[]
        {
            new TimelineItem
            {
                Content = "默认样式的节点",
                Description = DateTime.Now.ToString("yyyy-MM-dd")
            },
            new TimelineItem
            {
                Color = Color.Success,
                Content = "支持自定义颜色",
                Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd")
            },
            new TimelineItem
            {
                Color = Color.Danger,
                Icon = "fa fa-fw fa-fa",
                Content = "支持使用图标",
                Description = DateTime.Now.AddDays(3).ToString("yyyy-MM-dd")
            }
        };

        /// <summary>
        /// 
        /// </summary>
        private IEnumerable<TimelineItem> GetCustomerComponentTimelineItems() => new TimelineItem[]
        {
            new TimelineItem
            {
                Color = Color.Success,
                Component = BootstrapDynamicComponent.CreateComponent<BootstrapBlazor.Components.Console>(new KeyValuePair<string, object>[]
                {
                    new(nameof(BootstrapBlazor.Components.Console.Items), Messages)
                }),
                Description = "实时输出"
            },
            new TimelineItem
            {
                Color = Color.Info,
                Component = BootstrapDynamicComponent.CreateComponent<Counter>(),
                Description = "计数器"
            },
            new TimelineItem
            {
                Color = Color.Warning,
                Component = BootstrapDynamicComponent.CreateComponent<FetchData>(),
                Description = "天气预报信息"
            }
        };

        /// <summary>
        /// 
        /// </summary>
        private readonly IEnumerable<TimelineItem> AlternateTimelineItems = new TimelineItem[]
        {
            new TimelineItem
            {
                Content = "Create a services site 2015-09-01",
            },
            new TimelineItem
            {
                Color = Color.Success,
                Content = "Solve initial network problems 2015-09-01",
            },
            new TimelineItem
            {
                Color = Color.Danger,
                Content = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
            },
            new TimelineItem
            {
                Color = Color.Warning,
                Content = "Network problems being solved 2015-09-01",
            },
            new TimelineItem
            {
                Color = Color.Info,
                Content = "Create a services site 2015-09-01",
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Items",
                Description = "数据集合",
                Type = "IEnumerable<TimelineItem>",
                ValueList = "—",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsReverse",
                Description = "是否倒序显示",
                Type = "boolean",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsLeft",
                Description = "是否左侧展现内容",
                Type = "boolean",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAlternate",
                Description = "是否交替展现内容",
                Type = "boolean",
                ValueList = "true|false",
                DefaultValue = "false"
            },
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetTimelineItemAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = nameof(TimelineItem.Color),
                Description = "节点颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = nameof(TimelineItem.Content),
                Description = "内容正文",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = nameof(TimelineItem.Icon),
                Description = "节点图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = nameof(TimelineItem.Description),
                Description = "节点描述文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = nameof(TimelineItem.Component),
                Description = "节点自定义组件",
                Type = nameof(BootstrapDynamicComponent),
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

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