|
|
@ -11,68 +11,71 @@ namespace Connected.Components;
|
|
|
|
|
|
|
|
|
|
|
|
public partial class Image : UIComponent
|
|
|
|
public partial class Image : UIComponent
|
|
|
|
{
|
|
|
|
{
|
|
|
|
protected string Classname =>
|
|
|
|
|
|
|
|
new CssBuilder("image")
|
|
|
|
private CssBuilder CompiledClassList
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
get
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
return new CssBuilder("image")
|
|
|
|
.AddClass("fluid", Fluid)
|
|
|
|
.AddClass("fluid", Fluid)
|
|
|
|
.AddClass($"object-{ObjectFit.ToDescription()}")
|
|
|
|
.AddClass($"object-{ObjectFit.ToDescription()}")
|
|
|
|
.AddClass($"object-{ObjectPosition.ToDescription()}")
|
|
|
|
.AddClass($"object-{ObjectPosition.ToDescription()}")
|
|
|
|
.AddClass($"elevation-{Elevation}", Elevation > 0)
|
|
|
|
.AddClass($"elevation-{Elevation}", Elevation > 0)
|
|
|
|
.AddClass(AdditionalClassList)
|
|
|
|
.AddClass(ClassList);
|
|
|
|
.Build();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Applies the fluid class so the image scales with the parent width.
|
|
|
|
/// Applies the fluid class so the image scales with the parent width.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Behavior)]
|
|
|
|
|
|
|
|
public bool Fluid { get; set; }
|
|
|
|
public bool Fluid { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Specifies the path to the image.
|
|
|
|
/// Specifies the path to the image.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Behavior)]
|
|
|
|
|
|
|
|
public string Src { get; set; }
|
|
|
|
public string Src { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Specifies an alternate text for the image.
|
|
|
|
/// Specifies an alternate text for the image.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Behavior)]
|
|
|
|
|
|
|
|
public string Alt { get; set; }
|
|
|
|
public string Alt { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Specifies the height of the image in px.
|
|
|
|
/// Specifies the height of the image in px.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Appearance)]
|
|
|
|
|
|
|
|
public int? Height { get; set; }
|
|
|
|
public int? Height { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Specifies the width of the image in px.
|
|
|
|
/// Specifies the width of the image in px.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Appearance)]
|
|
|
|
|
|
|
|
public int? Width { get; set; }
|
|
|
|
public int? Width { get; set; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// The higher the number, the heavier the drop-shadow.
|
|
|
|
/// The higher the number, the heavier the drop-shadow.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Appearance)]
|
|
|
|
|
|
|
|
public int Elevation { set; get; }
|
|
|
|
public int Elevation { set; get; }
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Controls how the image should be resized.
|
|
|
|
/// Controls how the image should be resized.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Appearance)]
|
|
|
|
|
|
|
|
public ObjectFit ObjectFit { set; get; } = ObjectFit.Fill;
|
|
|
|
public ObjectFit ObjectFit { set; get; } = ObjectFit.Fill;
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
/// <summary>
|
|
|
|
/// Controls how the image should positioned within its container.
|
|
|
|
/// Controls how the image should positioned within its container.
|
|
|
|
/// </summary>
|
|
|
|
/// </summary>
|
|
|
|
[Parameter]
|
|
|
|
[Parameter]
|
|
|
|
[Category(CategoryTypes.Image.Appearance)]
|
|
|
|
|
|
|
|
public Position ObjectPosition { set; get; } = Position.Center;
|
|
|
|
public Position ObjectPosition { set; get; } = Position.Center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
|
|
|
/// A space separated list of class names, added on top of the default class list.
|
|
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
|
|
[Parameter]
|
|
|
|
|
|
|
|
public string? ClassList { get; set; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|