36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
 
|
@inherits DComponentBase
|
||
|
|
|
||
|
|
@* One event of a DTimeline: Start and End on either side of the line, Middle (an icon) on it. Each part renders only
|
||
|
|
when set. The <hr> before and after are the line segments to the neighbouring items; colour them with
|
||
|
|
LineBeforeClass / LineAfterClass (bg-primary). *@
|
||
|
|
<li @attributes="AdditionalAttributes" class="@Class">
|
||
|
|
<hr class="@LineBeforeClass" />
|
||
|
|
@if (Start is not null)
|
||
|
|
{
|
||
|
|
<div class="@Cx("timeline-start", StartBox ? "timeline-box" : null, StartClass)">@Start</div>
|
||
|
|
}
|
||
|
|
@if (Middle is not null)
|
||
|
|
{
|
||
|
|
<div class="@Cx("timeline-middle", MiddleClass)">@Middle</div>
|
||
|
|
}
|
||
|
|
@if (End is not null)
|
||
|
|
{
|
||
|
|
<div class="@Cx("timeline-end", EndBox ? "timeline-box" : null, EndClass)">@End</div>
|
||
|
|
}
|
||
|
|
<hr class="@LineAfterClass" />
|
||
|
|
</li>
|
||
|
|
|
||
|
|
@code {
|
||
|
|
[Parameter] public RenderFragment Start { get; set; }
|
||
|
|
[Parameter] public RenderFragment Middle { get; set; }
|
||
|
|
[Parameter] public RenderFragment End { get; set; }
|
||
|
|
/// <summary>Draw Start as a box (timeline-box).</summary>
|
||
|
|
[Parameter] public bool StartBox { get; set; }
|
||
|
|
/// <summary>Draw End as a box (timeline-box).</summary>
|
||
|
|
[Parameter] public bool EndBox { get; set; }
|
||
|
|
[Parameter] public string StartClass { get; set; }
|
||
|
|
[Parameter] public string MiddleClass { get; set; }
|
||
|
|
[Parameter] public string EndClass { get; set; }
|
||
|
|
[Parameter] public string LineBeforeClass { get; set; }
|
||
|
|
[Parameter] public string LineAfterClass { get; set; }
|
||
|
|
}
|