You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.7 KiB
138 lines
3.7 KiB
// Copyright (c) MudBlazor 2021
|
|
// MudBlazor licenses this file to you under the MIT license.
|
|
// See the LICENSE file in the project root for more information.
|
|
|
|
using Connected.Annotations;
|
|
using Connected.Extensions;
|
|
using Connected.Utilities;
|
|
using Microsoft.AspNetCore.Components;
|
|
|
|
namespace Connected.Components;
|
|
|
|
public partial class TimelineItem : UIComponent, IDisposable
|
|
|
|
{
|
|
protected string Classnames =>
|
|
new CssBuilder("mud-timeline-item")
|
|
.AddClass($"mud-timeline-item-{TimelineAlign.ToDescriptionString()}")
|
|
.AddClass(Class)
|
|
.Build();
|
|
|
|
protected string DotClassnames =>
|
|
new CssBuilder("mud-timeline-item-dot")
|
|
.AddClass($"mud-timeline-dot-size-{Size.ToDescriptionString()}")
|
|
.AddClass($"mud-elevation-{Elevation.ToString()}")
|
|
.Build();
|
|
|
|
protected string DotInnerClassnames =>
|
|
new CssBuilder("mud-timeline-item-dot-inner")
|
|
.AddClass($"mud-timeline-dot-fill", Variant == Variant.Filled)
|
|
.AddClass($"mud-timeline-dot-{Color.ToDescriptionString()}")
|
|
.Build();
|
|
|
|
[CascadingParameter] protected internal ItemsControlBase<TimelineItem> Parent { get; set; }
|
|
|
|
/// <summary>
|
|
/// Dot Icon
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public string Icon { get; set; }
|
|
|
|
/// <summary>
|
|
/// Variant of the dot.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public Variant Variant { get; set; } = Variant.Outlined;
|
|
|
|
/// <summary>
|
|
/// User styles, applied to the lineItem dot.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public string DotStyle { get; set; }
|
|
|
|
/// <summary>
|
|
/// Color of the dot.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
|
|
|
/// <summary>
|
|
/// Size of the dot.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public Size Size { get; set; } = Size.Small;
|
|
|
|
/// <summary>
|
|
/// Elevation of the dot. The higher the number, the heavier the drop-shadow.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public int Elevation { set; get; } = 1;
|
|
|
|
/// <summary>
|
|
/// Overrides Timeline Parents default sorting method in Default and Reverse mode.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Behavior)]
|
|
public TimelineAlign TimelineAlign { get; set; }
|
|
|
|
/// <summary>
|
|
/// If true, dot will not be displayed.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public bool HideDot { get; set; }
|
|
|
|
/// <summary>
|
|
/// If used renders child content of the ItemOpposite.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Behavior)]
|
|
public RenderFragment ItemOpposite { get; set; }
|
|
|
|
/// <summary>
|
|
/// If used renders child content of the ItemContent.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Behavior)]
|
|
public RenderFragment ItemContent { get; set; }
|
|
|
|
/// <summary>
|
|
/// If used renders child content of the ItemDot.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Dot)]
|
|
public RenderFragment ItemDot { get; set; }
|
|
|
|
/// <summary>
|
|
/// Optional child content if no other RenderFragments is used.
|
|
/// </summary>
|
|
[Parameter]
|
|
[Category(CategoryTypes.Timeline.Behavior)]
|
|
public RenderFragment ChildContent { get; set; }
|
|
|
|
protected override Task OnInitializedAsync()
|
|
{
|
|
Parent?.Items.Add(this);
|
|
return Task.CompletedTask;
|
|
}
|
|
|
|
private void Select()
|
|
{
|
|
var myIndex = Parent?.Items.IndexOf(this);
|
|
Parent?.MoveTo(myIndex ?? 0);
|
|
}
|
|
|
|
public void Dispose()
|
|
{
|
|
Parent?.Items.Remove(this);
|
|
}
|
|
|
|
|
|
}
|