BulmaRazor

Timeline时间轴

以不同的颜色，大小和状态显示垂直时间轴

时间轴结构

Timeline: 主容器,可以设置IsCentered或IsLTR改变布局
- TimelineHeader:可以定义 start end，节点分割
- TimelineItem:内容项
  - TimelineMarker:内容的标记，可以使用color,icon，img TimelineContent:显示内容

视图
代码

Start

January 2016

Timeline content - Can include any HTML element

January 2016

Timeline content - Can include any HTML element

2017

January 2017

Timeline content - Can include any HTML element

End

<Timeline>
    <TimelineHeader>
        <Tag IsMedium Color="Color.Primary">Start</Tag>
    </TimelineHeader>
    <TimelineItem>
        <TimelineMarker></TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2016</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineItem>
        <TimelineMarker IsImage Size="Size.Square32">
            <img src="/images/nuget-logo.png"/>
        </TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2016</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineHeader>
        <Tag Color="Color.Primary">2017</Tag>
    </TimelineHeader>
        
    <TimelineItem>
        <TimelineMarker IsIcon>
            <Icon IconClass="fa fa-flag"></Icon>
        </TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2017</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineHeader>
        <Tag IsMedium Color="Color.Primary">End</Tag>
    </TimelineHeader>
</Timeline>

Start

January 2016

Timeline content - Can include any HTML element

January 2016

Timeline content - Can include any HTML element

2017

January 2017

Timeline content - Can include any HTML element

End

<Timeline IsCentered>
    <TimelineHeader>
        <Tag IsMedium Color="Color.Info">Start</Tag>
    </TimelineHeader>
    <TimelineItem Color="Color.Link">
        <TimelineMarker></TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2016</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineItem Color="Color.Warning">
        <TimelineMarker Color="Color.Warning">
        </TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2016</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineHeader>
        <Tag Color="Color.Primary">2017</Tag>
    </TimelineHeader>
        
    <TimelineItem Color="Color.Danger">
        <TimelineMarker IsIcon Color="Color.Danger">
            <Icon IconClass="fa fa-plus" ></Icon>
        </TimelineMarker>
        <TimelineContent>
            <p class="heading">January 2017</p>
            <p>Timeline content - Can include any HTML element</p>
        </TimelineContent>
    </TimelineItem>
    <TimelineHeader>
        <Tag IsMedium Color="Color.Danger">End</Tag>
    </TimelineHeader>
</Timeline>

文档