Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Timeline 时间线

可视化地呈现时间流信息

基本用法

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

Demo
  • 创建时间
    2021-05-08
  • 通过审核
    2021-05-09
  • 活动按期开始
    2021-05-10

⾃定义节点样式

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

Demo
  • 默认样式的节点
    2021-05-08
  • 支持自定义颜色
    2021-05-10
  • 支持使用图标
    2021-05-11

左侧展现

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

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
    5/8/2021 12:59:28 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
    5/9/2021 -2 29 Scorching
    5/10/2021 -2 29 Bracing
    5/11/2021 47 116 Sweltering
    5/12/2021 40 103 Cool
    5/13/2021 49 120 Cool
    天气预报信息

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="mr-1">排序:</label>
        <Radio OnStateChanged="@OnStateChanged" Items="@Items"></Radio>
    </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 属性" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload