[WIP]: Save semi-refactored state for transfer
This commit is contained in:
parent
53dd3bec33
commit
fe1ef0fbc9
@ -4,4 +4,5 @@
|
|||||||
|
|
||||||
<ThemeProvider></ThemeProvider>
|
<ThemeProvider></ThemeProvider>
|
||||||
|
|
||||||
<Alert Severity="Severity.Error" Variant="Variant.Filled">This is an alert</Alert>
|
<Alert Severity="Severity.Error" Variant="Variant.Filled" Dense="true">This is an alert</Alert>
|
||||||
|
<Alert Severity="Severity.Error" Variant="Variant.Filled" Alignment="HorizontalAlignment.End">This is another alert</Alert>
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
@page "/components/app-bar"
|
||||||
|
|
||||||
|
@using Connected.Components;
|
||||||
|
|
||||||
|
<ThemeProvider></ThemeProvider>
|
||||||
|
|
||||||
|
<AppBar Dense="true">This is an alert</AppBar>
|
@ -2,21 +2,24 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="Clicked">
|
<div role="alert"
|
||||||
<div class="@ClassPosition">
|
class="@CompiledClassList"
|
||||||
|
@attributes="CustomAttributes"
|
||||||
@if (!GlyphVisible)
|
@onclick="Clicked">
|
||||||
|
<div class="@CompiledAlignmentClassList">
|
||||||
|
|
||||||
|
@if (GlyphVisible)
|
||||||
{
|
{
|
||||||
<div class="alert-icon alert-icon-left">
|
<div class="alert-icon alert-icon-left">
|
||||||
<Icon Glyph="@Glyph" />
|
<Icon Glyph="@CustomGlyph" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="alert-message">
|
<div class="alert-message">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (CloseGlyphVisible)
|
@if (CloseGlyphVisible)
|
||||||
{
|
{
|
||||||
<div class="alert-close">
|
<div class="alert-close">
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
using Connected.Extensions;
|
using Connected.Utilities;
|
||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
@ -7,122 +6,135 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Alert : UIComponent
|
public partial class Alert : UIComponent
|
||||||
{
|
{
|
||||||
[CascadingParameter(Name = "RightToLeft")]
|
|
||||||
public bool RightToLeft { get; set; }
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
|
/// Defines the classlist used in aligning the alert content internally.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
private CssBuilder CompiledAlignmentClassList
|
||||||
public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Start;
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("alert-position")
|
||||||
|
.AddClass($"justify-sm-{HorizontalAlignment.GetAbsolute(RightToLeft)}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The callback, when the close glyph has been clicked.
|
/// Contains the default container classlist and the user defined classes.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
|
private CssBuilder CompiledClassList
|
||||||
/// <summary>
|
{
|
||||||
/// Define the glyph used for the close button.
|
get
|
||||||
/// </summary>
|
{
|
||||||
[Parameter]
|
return new CssBuilder("alert")
|
||||||
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
|
.AddClass($"alert-{Variant}-{Severity}")
|
||||||
/// <summary>
|
.AddClass($"dense", Dense)
|
||||||
/// Sets if the alert shows a close glyph.
|
.AddClass($"square", Square)
|
||||||
/// </summary>
|
.AddClass($"elevation-{Elevation}")
|
||||||
[Parameter]
|
.AddClass(ClassList);
|
||||||
public bool CloseGlyphVisible { get; set; }
|
}
|
||||||
/// <summary>
|
}
|
||||||
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public int Elevation { set; get; } = 0;
|
|
||||||
/// <summary>
|
|
||||||
/// If true, rounded corners are disabled.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Square { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If true, compact padding will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Dense { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If true, no alert glyph will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool GlyphVisible { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// The severity of the alert. This defines the color and glyph used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Severity Severity { get; set; } = Severity.Normal;
|
|
||||||
/// <summary>
|
|
||||||
/// The variant to use.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Child content of the component.
|
/// Child content of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment? ChildContent { get; set; }
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
|
#region EventCallbacks
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
/// Raised when the alert is clicked.
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public string Glyph { get; set; } = default!;
|
|
||||||
/// <summary>
|
|
||||||
/// Raised when the alert is clicked
|
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<MouseEventArgs> Clicked { get; set; }
|
public EventCallback<MouseEventArgs> Clicked { get; set; }
|
||||||
|
|
||||||
protected string ClassList
|
/// <summary>
|
||||||
{
|
/// The callback, when the close glyph has been clicked.
|
||||||
get
|
/// </summary>
|
||||||
{
|
[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
|
||||||
return new CssBuilder("alert")
|
|
||||||
.AddClass($"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}")
|
|
||||||
.AddClass($"dense", Dense)
|
|
||||||
.AddClass($"square", Square)
|
|
||||||
.AddClass($"elevation-{Elevation}")
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected string ClassPosition
|
#endregion
|
||||||
{
|
#region Content placeholders
|
||||||
get
|
/// <summary>
|
||||||
{
|
/// Define the glyph used for the close button.
|
||||||
return new CssBuilder("alert-position")
|
/// </summary>
|
||||||
.AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
|
[Parameter]
|
||||||
.Build();
|
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
|
/// <summary>
|
||||||
{
|
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
||||||
return contentAlignment switch
|
/// </summary>
|
||||||
{
|
[Parameter]
|
||||||
HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
|
public string CustomGlyph { get; set; } = default!;
|
||||||
HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
|
#endregion
|
||||||
_ => contentAlignment
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
|
/// <summary>
|
||||||
|
/// Sets the horizontal alignement of the text. Start and end depend on the <see cref="RightToLeft"/> property.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Start;
|
||||||
|
|
||||||
internal async Task OnCloseGlyphClick()
|
/// <summary>
|
||||||
{
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
if (!CloseClicked.HasDelegate)
|
/// </summary>
|
||||||
return;
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
await CloseClicked.InvokeAsync(this);
|
/// <summary>
|
||||||
}
|
/// Sets if the alert shows a close glyph.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool CloseGlyphVisible { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// If true, compact padding will be used.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool Dense { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public int Elevation { set; get; } = 0;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// If true, no alert glyph will be used.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool GlyphVisible { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Specifies the control's display style
|
||||||
|
/// </summary>
|
||||||
|
[CascadingParameter(Name = "RightToLeft")]
|
||||||
|
public bool RightToLeft { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The severity of the alert. This defines the color and glyph used.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Severity Severity { get; set; } = Severity.Normal;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// If true, rounded corners are disabled.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool Square { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The variant to use.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
|
#endregion
|
||||||
|
|
||||||
protected override void OnParametersSet()
|
protected override void OnParametersSet()
|
||||||
{
|
{
|
||||||
if (!string.IsNullOrEmpty(Glyph))
|
if (!string.IsNullOrEmpty(CustomGlyph))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
Glyph = GetGlyphForSeverity(Severity);
|
CustomGlyph = GetGlyphForSeverity(Severity);
|
||||||
}
|
}
|
||||||
|
|
||||||
private string GetGlyphForSeverity(Severity severity)
|
private string GetGlyphForSeverity(Severity severity)
|
||||||
@ -137,4 +149,12 @@ public partial class Alert : UIComponent
|
|||||||
_ => throw new ArgumentOutOfRangeException(nameof(severity)),
|
_ => throw new ArgumentOutOfRangeException(nameof(severity)),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
internal async Task OnCloseGlyphClick()
|
||||||
|
{
|
||||||
|
if (!CloseClicked.HasDelegate)
|
||||||
|
return;
|
||||||
|
|
||||||
|
await CloseClicked.InvokeAsync(this);
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,10 +1,10 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<header @attributes="UserAttributes" class="@ClassList" style="@Style">
|
<header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
|
||||||
<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@ToolBarClassList()">
|
<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@CompiledToolbarClassList">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</ToolBar>
|
</ToolBar>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,22 +1,52 @@
|
|||||||
using Connected.Extensions;
|
using Connected.Extensions;
|
||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System.Security;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
public partial class AppBar : UIComponent
|
public partial class AppBar : UIComponent
|
||||||
{
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, Appbar will be placed at the bottom of the screen.
|
/// The classlist determining the toolbar render.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
private CssBuilder CompiledToolbarClassList
|
||||||
public bool Bottom { get; set; }
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("toolbar-appbar")
|
||||||
|
.AddClass(ToolbarClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
/// The classlist determining the header render.
|
||||||
|
/// </summary>
|
||||||
|
private CssBuilder CompiledHeaderClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("app-bar")
|
||||||
|
.AddClass($"appbar-dense", Dense)
|
||||||
|
.AddClass($"appbar-fixed-top", Fixed && VerticalAlignment == VerticalAlignment.Top)
|
||||||
|
.AddClass($"appbar-fixed-bottom", Fixed && VerticalAlignment == VerticalAlignment.Bottom)
|
||||||
|
.AddClass($"elevation-{Elevation}")
|
||||||
|
.AddClass($"theme-{Color}", Color != ThemeColor.Default)
|
||||||
|
.AddClass(HeaderClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Child content of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int Elevation { set; get; } = 4;
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The color of the component. It supports the theme colors.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, compact padding will be used.
|
/// If true, compact padding will be used.
|
||||||
@ -31,45 +61,32 @@ public partial class AppBar : UIComponent
|
|||||||
public bool DisableGutters { get; set; }
|
public bool DisableGutters { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The color of the component. It supports the theme colors.
|
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
public int Elevation { set; get; } = 4;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, appbar will be Fixed.
|
/// If true, appbar will be fixed.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Fixed { get; set; } = true;
|
public bool Fixed { get; set; } = true;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// User class names, separated by spaces for the nested toolbar.
|
/// Class names for the AppBar header. In case of several, separate by spaces.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string? ToolBarClass { get; set; }
|
public string? HeaderClassList { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Child content of the component.
|
/// Class names for the nested toolbar. In case of several, separate by spaces.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment? ChildContent { get; set; }
|
public string? ToolbarClassList { get; set; }
|
||||||
|
|
||||||
protected string ClassList()
|
/// <summary>
|
||||||
{
|
/// Determines the vertical alignment of the AppBar.
|
||||||
return new CssBuilder("appbar")
|
/// </summary>
|
||||||
.AddClass($"appbar-dense", Dense)
|
[Parameter]
|
||||||
.AddClass($"appbar-fixed-top", Fixed && !Bottom)
|
public VerticalAlignment VerticalAlignment { get; set; }
|
||||||
.AddClass($"appbar-fixed-bottom", Fixed && Bottom)
|
|
||||||
.AddClass($"elevation-{Elevation}")
|
|
||||||
.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected string ToolBarClassList()
|
|
||||||
{
|
|
||||||
return new CssBuilder("toolbar-appbar")
|
|
||||||
.AddClass(ToolBarClass)
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
|
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
|
||||||
<div class="@AutocompleteClassList">
|
<div class="@AutocompleteClassList">
|
||||||
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()" Style="@Style"
|
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()"
|
||||||
Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
|
Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
|
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
|
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
|
||||||
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
|
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
|
||||||
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
|
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
|
||||||
@attributes="UserAttributes"
|
@attributes="CustomAttributes"
|
||||||
TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
|
TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
|
||||||
OnKeyDown="@this.OnInputKeyDown"
|
OnKeyDown="@this.OnInputKeyDown"
|
||||||
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
|
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
|
||||||
|
@ -231,7 +231,6 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
|
|||||||
protected string ClassList()
|
protected string ClassList()
|
||||||
{
|
{
|
||||||
return new CssBuilder("select")
|
return new CssBuilder("select")
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
@if(AvatarGroup == null || AvatarGroup.MaxGroupReached(this))
|
@if(AvatarGroup is null || AvatarGroup.MaxGroupReached(this))
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Stylesname">
|
<div @attributes="CustomAttributes" class="@CompiledClassList" style="@CompiledStyles">
|
||||||
@if (!String.IsNullOrEmpty(Image))
|
@if (!String.IsNullOrEmpty(Image))
|
||||||
{
|
{
|
||||||
if (!String.IsNullOrEmpty(Alt))
|
if (!String.IsNullOrEmpty(ImageAltText))
|
||||||
{
|
{
|
||||||
<img src="@Image" alt="@Alt" class="avatar-img" />
|
<img src="@Image" alt="@ImageAltText" class="avatar-img" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
@ -7,88 +7,87 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
partial class Avatar : UIComponent, IDisposable
|
partial class Avatar : UIComponent, IDisposable
|
||||||
{
|
{
|
||||||
[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
|
[CascadingParameter]
|
||||||
protected string Classname =>
|
protected AvatarGroup? AvatarGroup { get; set; }
|
||||||
new CssBuilder("avatar")
|
|
||||||
.AddClass($"avatar-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass($"avatar-rounded", Rounded)
|
|
||||||
.AddClass($"avatar-square", Square)
|
|
||||||
.AddClass($"avatar-{Variant.ToDescriptionString()}")
|
|
||||||
.AddClass($"avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
|
||||||
.AddClass($"elevation-{Elevation.ToString()}")
|
|
||||||
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string Stylesname =>
|
protected CssBuilder CompiledClassList
|
||||||
new StyleBuilder()
|
{
|
||||||
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null)
|
get
|
||||||
.AddStyle(Style)
|
{
|
||||||
.Build();
|
return new CssBuilder("avatar")
|
||||||
|
.AddClass($"avatar-{Size}")
|
||||||
|
.AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
|
||||||
|
.AddClass($"avatar-square", Kind == AvatarKind.Square)
|
||||||
|
.AddClass($"avatar-{Variant}")
|
||||||
|
.AddClass($"avatar-{Variant}-{Color}")
|
||||||
|
.AddClass($"elevation-{Elevation}")
|
||||||
|
.AddClass(ClassList)
|
||||||
|
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected StyleBuilder CompiledStyles
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The higher the number, the heavier the drop-shadow.
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
public string? ClassList { get; set; }
|
||||||
public int Elevation { set; get; } = 0;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, border-radius is set to 0.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public bool Square { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, border-radius is set to the themes default value.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public bool Rounded { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Link to image, if set a image will be displayed instead of text.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
|
||||||
public string Image { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If set (and Image is also set), will add an alt property to the img element
|
/// If set (and Image is also set), will add an alt property to the img element
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
public string? ImageAltText { get; set; }
|
||||||
public string Alt { get; set; }
|
|
||||||
|
/// <summary>
|
||||||
|
/// Child content of the component.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The color of the component. It supports the theme colors.
|
/// The color of the component. It supports the theme colors.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The higher the number, the heavier the drop-shadow.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public int Elevation { set; get; } = 0;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Link to image, if set a image will be displayed instead of text.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? Image { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Sets the avatar appearance
|
||||||
|
/// </summary>
|
||||||
|
public AvatarKind Kind { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The Size of the MudAvatar.
|
/// The Size of the MudAvatar.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
public Size Size { get; set; } = Size.Medium;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The variant to use.
|
/// The variant to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Filled;
|
public Variant Variant { get; set; } = Variant.Filled;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Child content of the component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
base.OnInitialized();
|
base.OnInitialized();
|
||||||
@ -96,13 +95,7 @@ partial class Avatar : UIComponent, IDisposable
|
|||||||
AvatarGroup?.AddAvatar(this);
|
AvatarGroup?.AddAvatar(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void Dispose()
|
public void Dispose() => AvatarGroup?.RemoveAvatar(this);
|
||||||
{
|
|
||||||
AvatarGroup?.RemoveAvatar(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
internal void ForceRedraw()
|
internal void ForceRedraw() => StateHasChanged();
|
||||||
{
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@CompiledClassList">
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
@if(_avatars.Count > Max)
|
@if(_avatars.Count > Max)
|
||||||
{
|
{
|
||||||
<Avatar Class="@MaxAvatarClassname" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
|
<Avatar Class="@CompiledMaxAvatarClassList" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
|
||||||
@($"+{_avatars.Count - Max}")
|
@($"+{_avatars.Count - Max}")
|
||||||
</Avatar>
|
</Avatar>
|
||||||
}
|
}
|
||||||
|
@ -8,27 +8,34 @@ namespace Connected.Components;
|
|||||||
partial class AvatarGroup : UIComponent
|
partial class AvatarGroup : UIComponent
|
||||||
{
|
{
|
||||||
private bool _childrenNeedUpdates = false;
|
private bool _childrenNeedUpdates = false;
|
||||||
|
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("avatar-group")
|
|
||||||
.AddClass($"avatar-group-outlined", Outlined)
|
|
||||||
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string MaxAvatarClassname =>
|
|
||||||
new CssBuilder("avatar-group-max-avatar")
|
|
||||||
.AddClass($"ms-n{Spacing}")
|
|
||||||
.AddClass(MaxAvatarClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
private int _spacing = 3;
|
private int _spacing = 3;
|
||||||
|
private List<Avatar> _avatars = new();
|
||||||
|
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("avatar-group")
|
||||||
|
.AddClass($"avatar-group-outlined", Outlined)
|
||||||
|
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private CssBuilder CompiledMaxAvatarClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("avatar-group-max-avatar")
|
||||||
|
.AddClass($"ms-n{Spacing}")
|
||||||
|
.AddClass(MaxAvatarClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Spacing between avatars where 0 is none and 16 max.
|
/// Spacing between avatars where 0 is none and 16 max.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
|
||||||
public int Spacing
|
public int Spacing
|
||||||
{
|
{
|
||||||
get => _spacing;
|
get => _spacing;
|
||||||
@ -42,6 +49,12 @@ partial class AvatarGroup : UIComponent
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
|
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -132,8 +145,6 @@ partial class AvatarGroup : UIComponent
|
|||||||
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
||||||
public RenderFragment ChildContent { get; set; }
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
internal List<Avatar> _avatars = new();
|
|
||||||
|
|
||||||
internal void AddAvatar(Avatar avatar)
|
internal void AddAvatar(Avatar avatar)
|
||||||
{
|
{
|
||||||
_avatars.Add(avatar);
|
_avatars.Add(avatar);
|
||||||
|
14
src/Connected.Components/Components/Avatar/AvatarKind.cs
Normal file
14
src/Connected.Components/Components/Avatar/AvatarKind.cs
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
using System;
|
||||||
|
using System.Collections.Generic;
|
||||||
|
using System.Linq;
|
||||||
|
using System.Text;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
public enum AvatarKind
|
||||||
|
{
|
||||||
|
Undefined = 0,
|
||||||
|
Unadorned = 1,
|
||||||
|
Rounded = 2,
|
||||||
|
Square = 3
|
||||||
|
}
|
@ -1,8 +1,8 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<span @attributes="UserAttributes" class="@Classname" style="@Style">
|
<span @attributes="CustomAttributes" class="@CompiledClassList">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
@if (Visible)
|
@if (Visible)
|
||||||
{
|
{
|
||||||
<span class="@WrapperClass">
|
<span class="@WrapperClass">
|
||||||
|
@ -9,9 +9,9 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Badge : UIComponent
|
public partial class Badge : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string CompiledClassList =>
|
||||||
new CssBuilder("badge-root")
|
new CssBuilder("badge-root")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
protected string WrapperClass =>
|
protected string WrapperClass =>
|
||||||
new CssBuilder("badge-wrapper")
|
new CssBuilder("badge-wrapper")
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
<ul @attributes="UserAttributes" class=@Classname style="@Style">
|
<ul @attributes="CustomAttributes" class=@Classname>
|
||||||
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
|
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
|
||||||
{
|
{
|
||||||
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
|
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
|
||||||
|
@ -51,7 +51,7 @@ public partial class Breadcrumbs : UIComponent
|
|||||||
public bool Collapsed { get; private set; } = true;
|
public bool Collapsed { get; private set; } = true;
|
||||||
private string Classname => new CssBuilder("breadcrumbs")
|
private string Classname => new CssBuilder("breadcrumbs")
|
||||||
.AddClass("typography-body1")
|
.AddClass("typography-body1")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal static string GetItemClassname(BreadcrumbItem item)
|
internal static string GetItemClassname(BreadcrumbItem item)
|
||||||
|
@ -3,29 +3,13 @@
|
|||||||
@inherits ButtonBase
|
@inherits ButtonBase
|
||||||
|
|
||||||
<Element @bind-Ref="@_elementReference"
|
<Element @bind-Ref="@_elementReference"
|
||||||
HtmlTag="@HtmlTag"
|
HtmlTag="@HtmlTag"
|
||||||
Class="@Classname"
|
Class="@CompiledClassList"
|
||||||
Style="@Style"
|
@attributes="CustomAttributes"
|
||||||
@attributes="UserAttributes"
|
@onclick="OnClickHandler"
|
||||||
@onclick="OnClickHandler"
|
type="@ButtonType.ToDescriptionString()"
|
||||||
type="@ButtonType.ToDescriptionString()"
|
disabled="@Disabled">
|
||||||
href="@Href"
|
<span class="button-label">
|
||||||
target="@Target"
|
@ChildContent
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
</span>
|
||||||
disabled="@Disabled">
|
|
||||||
<span class="button-label">
|
|
||||||
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
|
||||||
{
|
|
||||||
<span class="@StartIconClass">
|
|
||||||
<Icon Icon="@StartIcon" Size="@Size" Color="@IconColor" />
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
@ChildContent
|
|
||||||
@if (!string.IsNullOrWhiteSpace(@EndIcon))
|
|
||||||
{
|
|
||||||
<span class="@EndIconClass">
|
|
||||||
<Icon Glyph="@EndIcon" Size="@Size" Color="@IconColor" />
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</Element>
|
</Element>
|
||||||
|
@ -7,90 +7,47 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Button : ButtonBase
|
public partial class Button : ButtonBase
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("button-root mud-button")
|
|
||||||
.AddClass($"button-{Variant.ToDescriptionString()}")
|
|
||||||
.AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
|
||||||
.AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass($"width-full", FullWidth)
|
|
||||||
.AddClass($"ripple", !DisableRipple)
|
|
||||||
.AddClass($"button-disable-elevation", DisableElevation)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string StartIconClass =>
|
|
||||||
new CssBuilder("button-icon-start")
|
|
||||||
.AddClass($"button-icon-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass(IconClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string EndIconClass =>
|
|
||||||
new CssBuilder("button-icon-end")
|
|
||||||
.AddClass($"button-icon-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass(IconClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Icon placed before the text if set.
|
/// Child content of component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
public RenderFragment? ChildContent { get; set; }
|
||||||
public string StartIcon { get; set; }
|
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("button-root mud-button")
|
||||||
|
.AddClass($"button-{Variant}")
|
||||||
|
.AddClass($"button-{Variant}-{Color}")
|
||||||
|
.AddClass($"button-{Variant}-size-{Size}")
|
||||||
|
.AddClass($"ripple", !CanRipple)
|
||||||
|
.AddClass($"elevation-{Elevation}")
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Icon placed after the text if set.
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
public string? ClassList { get; set; }
|
||||||
public string EndIcon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the icon. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Icon class names, separated by space
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public string IconClass { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The color of the component. It supports the theme colors.
|
/// The color of the component. It supports the theme colors.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The Size of the component.
|
/// The Size of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
public Size Size { get; set; } = Size.Medium;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The variant to use.
|
/// The variant to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, the button will take up 100% of available width.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public bool FullWidth { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Child content of component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -8,133 +8,73 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public abstract class ButtonBase : UIComponent
|
public abstract class ButtonBase : UIComponent
|
||||||
{
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// Button click event.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Potential activation target for this button. This enables RenderFragments with user-defined
|
/// Potential activation target for this button. This enables RenderFragments with user-defined
|
||||||
/// buttons which will automatically activate the intended functionality.
|
/// buttons which will automatically activate the intended functionality.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[CascadingParameter] protected IActivatable Activateable { get; set; }
|
[CascadingParameter]
|
||||||
|
protected IActivatable Activateable { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The HTML element that will be rendered in the root by the component
|
/// The HTML element that will be rendered in the root by the component
|
||||||
/// By default, is a button
|
/// By default, is a button
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string HtmlTag { get; set; } = "button";
|
public string HtmlTag { get; set; } = "button";
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The button Type (Button, Submit, Refresh)
|
/// The button Type (Button, Submit, Refresh)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public ButtonType ButtonType { get; set; }
|
public ButtonType ButtonType { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Href { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where (Obsolete replaced by Href)
|
|
||||||
/// </summary>
|
|
||||||
|
|
||||||
[Obsolete("Use Href Instead.", false)]
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Link
|
|
||||||
{
|
|
||||||
get => Href;
|
|
||||||
set => Href = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The target attribute specifies where to open the link, if Link is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Target { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, the button will be disabled.
|
/// If true, the button will be disabled.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public bool Disabled { get; set; }
|
public bool Disabled { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, no drop-shadow will be used.
|
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
public int Elevation { set; get; } = 0;
|
||||||
public bool DisableElevation { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, disables ripple effect.
|
/// If true, disables ripple effect.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
public bool CanRipple { get; set; }
|
||||||
public bool DisableRipple { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Command executed when the user clicks on an element.
|
/// Command executed when the user clicks on an element.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
public ICommand? Command { get; set; }
|
||||||
public ICommand Command { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Command parameter.
|
/// Command parameter.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
public object? CommandParameters { get; set; }
|
||||||
public object CommandParameter { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
protected async Task OnClickHandler(MouseEventArgs e)
|
||||||
/// Button click event.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
|
||||||
|
|
||||||
protected async Task OnClickHandler(MouseEventArgs ev)
|
|
||||||
{
|
{
|
||||||
if (Disabled)
|
if (Disabled)
|
||||||
return;
|
return;
|
||||||
await OnClick.InvokeAsync(ev);
|
|
||||||
if (Command?.CanExecute(CommandParameter) ?? false)
|
|
||||||
{
|
|
||||||
Command.Execute(CommandParameter);
|
|
||||||
}
|
|
||||||
Activateable?.Activate(this, ev);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
await OnClick.InvokeAsync(e);
|
||||||
{
|
|
||||||
SetDefaultValues();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override void OnParametersSet()
|
if (Command?.CanExecute(CommandParameters) ?? false)
|
||||||
{
|
Command.Execute(CommandParameters);
|
||||||
//if params change, must set default values again
|
|
||||||
SetDefaultValues();
|
|
||||||
}
|
|
||||||
|
|
||||||
//Set the default value for HtmlTag, Link and Target
|
Activateable?.Activate(this, e);
|
||||||
private void SetDefaultValues()
|
|
||||||
{
|
|
||||||
if (Disabled)
|
|
||||||
{
|
|
||||||
HtmlTag = "button";
|
|
||||||
Href = null;
|
|
||||||
Target = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render an anchor element if Link property is set and is not disabled
|
|
||||||
if (!IsNullOrWhiteSpace(Href))
|
|
||||||
{
|
|
||||||
HtmlTag = "a";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected ElementReference _elementReference;
|
protected ElementReference _elementReference;
|
||||||
|
@ -7,13 +7,9 @@
|
|||||||
<Element @bind-Ref="@_elementReference"
|
<Element @bind-Ref="@_elementReference"
|
||||||
HtmlTag="@HtmlTag"
|
HtmlTag="@HtmlTag"
|
||||||
Class="@Classname"
|
Class="@Classname"
|
||||||
Style="@Style"
|
@attributes="CustomAttributes"
|
||||||
@attributes="UserAttributes"
|
|
||||||
@onclick="OnClickHandler"
|
@onclick="OnClickHandler"
|
||||||
type="@ButtonType.ToDescriptionString()"
|
type="@ButtonType.ToDescriptionString()"
|
||||||
href="@Href"
|
|
||||||
target="@Target"
|
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
|
||||||
disabled="@Disabled"
|
disabled="@Disabled"
|
||||||
title="@Title">
|
title="@Title">
|
||||||
<span class="fab-label">
|
<span class="fab-label">
|
||||||
|
@ -12,9 +12,7 @@ public partial class Fab : ButtonBase
|
|||||||
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
|
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
|
||||||
.AddClass($"fab-{Color.ToDescriptionString()}")
|
.AddClass($"fab-{Color.ToDescriptionString()}")
|
||||||
.AddClass($"fab-size-{Size.ToDescriptionString()}")
|
.AddClass($"fab-size-{Size.ToDescriptionString()}")
|
||||||
.AddClass($"ripple", !DisableRipple && !Disabled)
|
.AddClass($"ripple", !CanRipple && !Disabled)
|
||||||
.AddClass($"fab-disable-elevation", DisableElevation)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -6,14 +6,10 @@
|
|||||||
|
|
||||||
<Element @bind-Ref="@_elementReference"
|
<Element @bind-Ref="@_elementReference"
|
||||||
HtmlTag="@HtmlTag"
|
HtmlTag="@HtmlTag"
|
||||||
Class="@Classname"
|
Class="@Classname"
|
||||||
Style="@Style"
|
@attributes="CustomAttributes"
|
||||||
@attributes="UserAttributes"
|
|
||||||
@onclick="OnClickHandler"
|
@onclick="OnClickHandler"
|
||||||
type="@ButtonType.ToDescriptionString()"
|
type="@ButtonType.ToDescriptionString()"
|
||||||
href="@Href"
|
|
||||||
target="@Target"
|
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
|
||||||
disabled="@Disabled"
|
disabled="@Disabled"
|
||||||
title="@Title">
|
title="@Title">
|
||||||
@if (!String.IsNullOrEmpty(Icon))
|
@if (!String.IsNullOrEmpty(Icon))
|
||||||
|
@ -14,12 +14,11 @@ public partial class IconButton : ButtonBase
|
|||||||
.AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
|
.AddClass($"button-{Variant.ToDescriptionString()}", AsButton)
|
||||||
.AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
|
.AddClass($"button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
|
||||||
.AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
|
.AddClass($"button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
|
||||||
.AddClass($"ripple", !DisableRipple)
|
.AddClass($"ripple", !CanRipple)
|
||||||
.AddClass($"ripple-icon", !DisableRipple && !AsButton)
|
.AddClass($"ripple-icon", !CanRipple && !AsButton)
|
||||||
.AddClass($"icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
|
.AddClass($"icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
|
||||||
.AddClass($"icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
|
.AddClass($"icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
|
||||||
.AddClass($"button-disable-elevation", DisableElevation)
|
.AddClass(AdditionalClassList)
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected bool AsButton => Variant != Variant.Text;
|
protected bool AsButton => Variant != Variant.Text;
|
||||||
|
@ -15,7 +15,6 @@
|
|||||||
Edge="Edge"
|
Edge="Edge"
|
||||||
DisableRipple="DisableRipple"
|
DisableRipple="DisableRipple"
|
||||||
OnClick="Toggle"
|
OnClick="Toggle"
|
||||||
Class="@Class"
|
Class="@AdditionalClassList"
|
||||||
Style="@Style"
|
|
||||||
aria-pressed="@ariaPressedValue"
|
aria-pressed="@ariaPressedValue"
|
||||||
@attributes="UserAttributes" />
|
@attributes="CustomAttributes" />
|
||||||
|
@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<Element HtmlTag="div" Class="@Classname" Style="@Style" Tag="@Tag" UserAttributes="@UserAttributes">
|
<Element HtmlTag="div" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</Element>
|
</Element>
|
||||||
|
|
||||||
@{
|
@{
|
||||||
if(!UserAttributes.ContainsKey("role"))
|
if(!CustomAttributes.ContainsKey("role"))
|
||||||
UserAttributes.Add("role", "group");
|
CustomAttributes.Add("role", "group");
|
||||||
}
|
}
|
@ -17,7 +17,7 @@ public partial class ButtonGroup : UIComponent
|
|||||||
.AddClass($"button-group-horizontal", !VerticalAlign)
|
.AddClass($"button-group-horizontal", !VerticalAlign)
|
||||||
.AddClass($"button-group-disable-elevation", DisableElevation)
|
.AddClass($"button-group-disable-elevation", DisableElevation)
|
||||||
.AddClass($"button-group-rtl", RightToLeft)
|
.AddClass($"button-group-rtl", RightToLeft)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
|
|
||||||
|
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<Paper @attributes="UserAttributes" Class="@Classname" Style="@Style" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
|
<Paper @attributes="CustomAttributes" Class="@Classname" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</Paper>
|
</Paper>
|
||||||
|
@ -8,7 +8,7 @@ public partial class Card : UIComponent
|
|||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("card")
|
new CssBuilder("card")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@ public partial class CardActions : UIComponent
|
|||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("card-actions")
|
new CssBuilder("card-actions")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@ public partial class CardContent : UIComponent
|
|||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("card-content")
|
new CssBuilder("card-content")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@if (CardHeaderAvatar is not null)
|
@if (CardHeaderAvatar is not null)
|
||||||
{
|
{
|
||||||
<div class="card-header-avatar">@CardHeaderAvatar</div>
|
<div class="card-header-avatar">@CardHeaderAvatar</div>
|
||||||
|
@ -8,7 +8,7 @@ public partial class CardHeader : UIComponent
|
|||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("card-header")
|
new CssBuilder("card-header")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,4 +2,4 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" title="@Title" class="@Classname" style="@StyleString"></div>
|
<div @attributes="CustomAttributes" title="@Title" class="@Classname" style="@StyleString"></div>
|
||||||
|
@ -8,12 +8,11 @@ public partial class CardMedia : UIComponent
|
|||||||
{
|
{
|
||||||
protected string StyleString =>
|
protected string StyleString =>
|
||||||
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
|
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
|
||||||
.AddStyle(this.Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("card-media")
|
new CssBuilder("card-media")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
@implements IAsyncDisposable
|
@implements IAsyncDisposable
|
||||||
@typeparam TData
|
@typeparam TData
|
||||||
|
|
||||||
<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
|
<section @attributes="CustomAttributes" aria-roledescription="carousel" class="@Classname">
|
||||||
<CascadingValue Value="this">
|
<CascadingValue Value="this">
|
||||||
|
|
||||||
<SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
|
<SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
|
||||||
|
@ -11,7 +11,7 @@ public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TD
|
|||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("carousel")
|
new CssBuilder("carousel")
|
||||||
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
|
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string NavigationButtonsClassName =>
|
protected string NavigationButtonsClassName =>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
@if (IsVisible)
|
@if (IsVisible)
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
@ -32,7 +32,7 @@ public partial class CarouselItem : UIComponent, IDisposable
|
|||||||
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
|
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
|
||||||
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
|
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
|
||||||
|
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<CascadingValue Value="@this" IsFixed="true">
|
<CascadingValue Value="@this" IsFixed="true">
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style" dir="ltr">
|
<div @attributes="CustomAttributes" class="@Classname" dir="ltr">
|
||||||
@if (ChartType == ChartType.Donut)
|
@if (ChartType == ChartType.Donut)
|
||||||
{
|
{
|
||||||
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>
|
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>
|
||||||
|
@ -38,7 +38,7 @@ public partial class Chart : UIComponent
|
|||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("chart")
|
new CssBuilder("chart")
|
||||||
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
|
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||||
<g class="charts-grid">
|
<g class="charts-grid">
|
||||||
<g class="charts-gridlines-yaxis">
|
<g class="charts-gridlines-yaxis">
|
||||||
@foreach (var horizontalLine in _horizontalLines)
|
@foreach (var horizontalLine in _horizontalLines)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@using System.Globalization
|
@using System.Globalization
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
|
<svg @attributes="CustomAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
|
||||||
<Filters />
|
<Filters />
|
||||||
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
|
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
|
||||||
@foreach (var item in _circles.ToList())
|
@foreach (var item in _circles.ToList())
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||||
<g class="charts-grid">
|
<g class="charts-grid">
|
||||||
<g class="charts-gridlines-yaxis">
|
<g class="charts-gridlines-yaxis">
|
||||||
@foreach (var horizontalLine in _horizontalLines)
|
@foreach (var horizontalLine in _horizontalLines)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@using System.Globalization
|
@using System.Globalization
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
|
<svg @attributes="CustomAttributes" class="chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
|
||||||
<Filters />
|
<Filters />
|
||||||
@foreach (var item in _paths.ToList())
|
@foreach (var item in _paths.ToList())
|
||||||
{
|
{
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
@if (ChartParent?.ChartOptions.DisableLegend != true)
|
@if (ChartParent?.ChartOptions.DisableLegend != true)
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="chart-legend">
|
<div @attributes="CustomAttributes" class="chart-legend">
|
||||||
@foreach (var item in Data)
|
@foreach (var item in Data)
|
||||||
{
|
{
|
||||||
<div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
|
<div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
|
||||||
|
@ -2,12 +2,12 @@
|
|||||||
@inherits BooleanInput<T>
|
@inherits BooleanInput<T>
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<InputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
<InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
|
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
|
||||||
<span tabindex="0" class="@CheckBoxClassname">
|
<span tabindex="0" class="@CheckBoxClassname">
|
||||||
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
|
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
|
||||||
<input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
<input tabindex="-1" @attributes="CustomAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
||||||
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
|
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
|
||||||
</span>
|
</span>
|
||||||
@if (!String.IsNullOrEmpty(Label))
|
@if (!String.IsNullOrEmpty(Label))
|
||||||
|
@ -11,7 +11,7 @@ public partial class CheckBox<T> : BooleanInput<T>
|
|||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("input-control-boolean-input")
|
new CssBuilder("input-control-boolean-input")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string LabelClassname =>
|
protected string LabelClassname =>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div tabindex="0" @attributes="UserAttributes" class="@Classname" style="@Style" @onclick="@OnClickHandler">
|
<div tabindex="0" @attributes="CustomAttributes" class="@Classname" @onclick="@OnClickHandler">
|
||||||
@if (!String.IsNullOrEmpty(Avatar))
|
@if (!String.IsNullOrEmpty(Avatar))
|
||||||
{
|
{
|
||||||
<Avatar Class="@AvatarClass" Color="@Color">
|
<Avatar Class="@AvatarClass" Color="@Color">
|
||||||
|
@ -25,7 +25,7 @@ public partial class Chip : UIComponent, IDisposable
|
|||||||
.AddClass("chip-label", Label)
|
.AddClass("chip-label", Label)
|
||||||
.AddClass("disabled", Disabled)
|
.AddClass("disabled", Disabled)
|
||||||
.AddClass("chip-selected", IsSelected)
|
.AddClass("chip-selected", IsSelected)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
//Cannot test the get variant (last line)
|
//Cannot test the get variant (last line)
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style" >
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
<CascadingValue IsFixed="true" Value="this">
|
<CascadingValue IsFixed="true" Value="this">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
@ -9,7 +9,7 @@ public partial class ChipSet : UIComponent, IDisposable
|
|||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("chipset")
|
new CssBuilder("chipset")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
|
|
||||||
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename">
|
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
|
||||||
<div @ref="_wrapper" class="collapse-wrapper">
|
<div @ref="_wrapper" class="collapse-wrapper">
|
||||||
<div class="collapse-wrapper-inner">
|
<div class="collapse-wrapper-inner">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
|
@ -23,7 +23,6 @@ public partial class Collapse : UIComponent
|
|||||||
.AddStyle("height", "auto", _state == CollapseState.Entered)
|
.AddStyle("height", "auto", _state == CollapseState.Entered)
|
||||||
.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
|
.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
|
||||||
.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
|
.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
@ -31,7 +30,7 @@ public partial class Collapse : UIComponent
|
|||||||
.AddClass($"collapse-entering", _state == CollapseState.Entering)
|
.AddClass($"collapse-entering", _state == CollapseState.Entering)
|
||||||
.AddClass($"collapse-entered", _state == CollapseState.Entered)
|
.AddClass($"collapse-entered", _state == CollapseState.Entered)
|
||||||
.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
|
.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
@ -10,7 +10,7 @@ public partial class Container : UIComponent
|
|||||||
new CssBuilder("container")
|
new CssBuilder("container")
|
||||||
.AddClass($"container-fixed", Fixed)
|
.AddClass($"container-fixed", Fixed)
|
||||||
.AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
|
.AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -155,7 +155,7 @@ public partial class Column<T> : UIComponent
|
|||||||
.AddClass("table-cell-hide", HideSmall)
|
.AddClass("table-cell-hide", HideSmall)
|
||||||
.AddClass("sticky-left", StickyLeft)
|
.AddClass("sticky-left", StickyLeft)
|
||||||
.AddClass("sticky-right", StickyRight)
|
.AddClass("sticky-right", StickyRight)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal string cellClassname;
|
internal string cellClassname;
|
||||||
@ -169,7 +169,7 @@ public partial class Column<T> : UIComponent
|
|||||||
internal string footerClassname =>
|
internal string footerClassname =>
|
||||||
new CssBuilder("table-cell")
|
new CssBuilder("table-cell")
|
||||||
.AddClass("table-cell-hide", HideSmall)
|
.AddClass("table-cell-hide", HideSmall)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal bool grouping;
|
internal bool grouping;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
|
<CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
|
||||||
|
|
||||||
<CascadingValue IsFixed="true" Value="this">
|
<CascadingValue IsFixed="true" Value="this">
|
||||||
<div @attributes="UserAttributes" class="@_classname" style="@_style">
|
<div @attributes="CustomAttributes" class="@_classname" style="@_style">
|
||||||
@if (Items != null || ServerData != null)
|
@if (Items != null || ServerData != null)
|
||||||
{
|
{
|
||||||
@if (ToolBarContent != null)
|
@if (ToolBarContent != null)
|
||||||
|
@ -45,14 +45,13 @@ public partial class DataGrid<T> : UIComponent
|
|||||||
.AddClass("table-sticky-header", FixedHeader)
|
.AddClass("table-sticky-header", FixedHeader)
|
||||||
.AddClass("table-sticky-footer", FixedFooter)
|
.AddClass("table-sticky-footer", FixedFooter)
|
||||||
.AddClass($"elevation-{Elevation}", !Outlined)
|
.AddClass($"elevation-{Elevation}", !Outlined)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _style =>
|
protected string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
|
.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
|
||||||
.AddStyle("position", "relative", when: hasStickyColumns)
|
.AddStyle("position", "relative", when: hasStickyColumns)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _tableStyle =>
|
protected string _tableStyle =>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style">
|
<ToolBar @attributes="CustomAttributes" Class="@Classname">
|
||||||
<div class="table-pagination-spacer"></div>
|
<div class="table-pagination-spacer"></div>
|
||||||
@if (!DisableRowsPerPage)
|
@if (!DisableRowsPerPage)
|
||||||
{
|
{
|
||||||
|
@ -50,7 +50,7 @@ public partial class DataGridPager<T> : UIComponent, IDisposable
|
|||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("table-pagination-toolbar")
|
new CssBuilder("table-pagination-toolbar")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private async Task SetRowsPerPageAsync(string size)
|
private async Task SetRowsPerPageAsync(string size)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@UserAttributes">
|
<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@CustomAttributes">
|
||||||
@if (null != Column && Column.filterable)
|
@if (null != Column && Column.filterable)
|
||||||
{
|
{
|
||||||
@if (Column.FilterTemplate != null)
|
@if (Column.FilterTemplate != null)
|
||||||
|
@ -17,14 +17,13 @@ public partial class FilterHeaderCell<T> : UIComponent
|
|||||||
private string _classname =>
|
private string _classname =>
|
||||||
new CssBuilder(Column?.HeaderClass)
|
new CssBuilder(Column?.HeaderClass)
|
||||||
.AddClass(Column?.headerClassname)
|
.AddClass(Column?.headerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.AddClass("filter-header-cell")
|
.AddClass("filter-header-cell")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.HeaderStyle)
|
.AddStyle(Column?.HeaderStyle)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _valueString;
|
private string _valueString;
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
@if (Column is not null)
|
@if (Column is not null)
|
||||||
{
|
{
|
||||||
<td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@UserAttributes">
|
<td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@CustomAttributes">
|
||||||
@if (Column.AggregateDefinition != null)
|
@if (Column.AggregateDefinition != null)
|
||||||
{
|
{
|
||||||
@Column.AggregateDefinition?.GetValue(Column.Field, items)
|
@Column.AggregateDefinition?.GetValue(Column.Field, items)
|
||||||
|
@ -19,12 +19,11 @@ public partial class FooterCell<T> : UIComponent
|
|||||||
new CssBuilder("footer-cell")
|
new CssBuilder("footer-cell")
|
||||||
.AddClass(Column?.FooterClass)
|
.AddClass(Column?.FooterClass)
|
||||||
.AddClass(Column?.footerClassname)
|
.AddClass(Column?.footerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.FooterStyle)
|
.AddStyle(Column?.FooterStyle)
|
||||||
.AddStyle(Style)
|
|
||||||
.AddStyle("font-weight", "600")
|
.AddStyle("font-weight", "600")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
@if (IsOnlyHeader)
|
@if (IsOnlyHeader)
|
||||||
{
|
{
|
||||||
<th scope="col" class="table cell @_classname" style="" @attributes="@UserAttributes">
|
<th scope="col" class="table cell @_classname" style="" @attributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</th>
|
</th>
|
||||||
}
|
}
|
||||||
else if (Column != null && !Column.Hidden)
|
else if (Column != null && !Column.Hidden)
|
||||||
{
|
{
|
||||||
<th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@UserAttributes">
|
<th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@CustomAttributes">
|
||||||
<span class="column-header">
|
<span class="column-header">
|
||||||
@if (sortable)
|
@if (sortable)
|
||||||
{
|
{
|
||||||
|
@ -33,20 +33,18 @@ public partial class HeaderCell<T> : UIComponent, IDisposable
|
|||||||
private string _classname =>
|
private string _classname =>
|
||||||
new CssBuilder(Column?.HeaderClass)
|
new CssBuilder(Column?.HeaderClass)
|
||||||
.AddClass(Column?.headerClassname)
|
.AddClass(Column?.headerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.HeaderStyle)
|
.AddStyle(Column?.HeaderStyle)
|
||||||
.AddStyle("width", _width?.ToPx(), when: _width.HasValue)
|
.AddStyle("width", _width?.ToPx(), when: _width.HasValue)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _resizerStyle =>
|
private string _resizerStyle =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
|
.AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _resizerClass =>
|
private string _resizerClass =>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<tr class="@Classname" style="@Style" @attributes="@UserAttributes">
|
<tr class="@Classname" @attributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</tr>
|
</tr>
|
@ -12,5 +12,5 @@ public partial class Row : UIComponent
|
|||||||
[Parameter] public RenderFragment ChildContent { get; set; }
|
[Parameter] public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
protected string Classname => new CssBuilder("table-row")
|
protected string Classname => new CssBuilder("table-row")
|
||||||
.AddClass(Class).Build();
|
.AddClass(AdditionalClassList).Build();
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
|
ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
|
||||||
@onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
|
@onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<RangeInput @ref="_rangeInput" @attributes="UserAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Style="@Style" Variant="@Variant" ReadOnly="@(!Editable)"
|
<RangeInput @ref="_rangeInput" @attributes="CustomAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Variant="@Variant" ReadOnly="@(!Editable)"
|
||||||
@bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
|
@bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
|
||||||
Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
|
Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
|
||||||
</InputContent>
|
</InputContent>
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
{
|
{
|
||||||
<FocusTrap DefaultFocus="DefaultFocus">
|
<FocusTrap DefaultFocus="DefaultFocus">
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@ContentClass" style="@ContentStyle">
|
<div @attributes="CustomAttributes" class="@ContentClass" style="@ContentStyle">
|
||||||
@DialogContent
|
@DialogContent
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -133,8 +133,7 @@ public partial class Dialog : UIComponent
|
|||||||
Close();
|
Close();
|
||||||
var parameters = new DialogParameters()
|
var parameters = new DialogParameters()
|
||||||
{
|
{
|
||||||
[nameof(Class)] = Class,
|
[nameof(AdditionalClassList)] = AdditionalClassList,
|
||||||
[nameof(Style)] = Style,
|
|
||||||
[nameof(Tag)] = Tag,
|
[nameof(Tag)] = Tag,
|
||||||
[nameof(TitleContent)] = TitleContent,
|
[nameof(TitleContent)] = TitleContent,
|
||||||
[nameof(DialogContent)] = DialogContent,
|
[nameof(DialogContent)] = DialogContent,
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" id="@_elementId" class="dialog-container @Position">
|
<div @attributes="CustomAttributes" id="@_elementId" class="dialog-container @Position">
|
||||||
<Overlay Visible="true" OnClick="HandleBackgroundClick" Class="overlay-dialog" DarkBackground="true" />
|
<Overlay Visible="true" OnClick="HandleBackgroundClick" Class="overlay-dialog" DarkBackground="true" />
|
||||||
<div id="_@Id.ToString("N")" role="dialog" class="@Classname" style="@Style">
|
<div id="_@Id.ToString("N")" role="dialog" class="@Classname">
|
||||||
@if (!NoHeader)
|
@if (!NoHeader)
|
||||||
{
|
{
|
||||||
<div class="dialog-title">
|
<div class="dialog-title">
|
||||||
|
@ -172,7 +172,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
FullScreen = SetFulScreen();
|
FullScreen = SetFulScreen();
|
||||||
DisableBackdropClick = SetDisableBackdropClick();
|
DisableBackdropClick = SetDisableBackdropClick();
|
||||||
CloseOnEscapeKey = SetCloseOnEscapeKey();
|
CloseOnEscapeKey = SetCloseOnEscapeKey();
|
||||||
Class = Classname;
|
//AdditionalClassList = Classname;
|
||||||
}
|
}
|
||||||
|
|
||||||
private string SetPosition()
|
private string SetPosition()
|
||||||
@ -241,7 +241,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
.AddClass("dialog-width-full", FullWidth && !FullScreen)
|
.AddClass("dialog-width-full", FullWidth && !FullScreen)
|
||||||
.AddClass("dialog-fullscreen", FullScreen)
|
.AddClass("dialog-fullscreen", FullScreen)
|
||||||
.AddClass("dialog-rtl", RightToLeft)
|
.AddClass("dialog-rtl", RightToLeft)
|
||||||
.AddClass(_dialog?.Class)
|
.AddClass(_dialog?.AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private bool SetHideHeader()
|
private bool SetHideHeader()
|
||||||
@ -310,8 +310,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
if (dialog == null)
|
if (dialog == null)
|
||||||
return;
|
return;
|
||||||
_dialog = dialog;
|
_dialog = dialog;
|
||||||
Class = dialog.Class;
|
//AdditionalClassList = dialog.AdditionalClassList;
|
||||||
Style = dialog.Style;
|
|
||||||
TitleContent = dialog.TitleContent;
|
TitleContent = dialog.TitleContent;
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<hr @attributes="UserAttributes" class="@Classname" style="@Style"/>
|
<hr @attributes="CustomAttributes" class="@Classname"/>
|
@ -13,7 +13,7 @@ public partial class Divider : UIComponent
|
|||||||
.AddClass($"divider-light", Light)
|
.AddClass($"divider-light", Light)
|
||||||
.AddClass($"divider-vertical", Vertical)
|
.AddClass($"divider-vertical", Vertical)
|
||||||
.AddClass($"divider-{DividerType.ToDescriptionString()}", when: () => DividerType != DividerType.FullWidth)
|
.AddClass($"divider-{DividerType.ToDescriptionString()}", when: () => DividerType != DividerType.FullWidth)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="UserAttributes" class="@Classname" style="@Stylename">
|
<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
|
||||||
<div @ref="_contentRef" class="drawer-content">
|
<div @ref="_contentRef" class="drawer-content">
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
|
@ -33,7 +33,7 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
|
|||||||
.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
|
.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
|
||||||
.AddClass($"elevation-{Elevation}")
|
.AddClass($"elevation-{Elevation}")
|
||||||
.AddClass($"drawer-{Variant.ToDescriptionString()}")
|
.AddClass($"drawer-{Variant.ToDescriptionString()}")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string OverlayClass =>
|
protected string OverlayClass =>
|
||||||
@ -54,7 +54,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
|
|||||||
string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,
|
string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,
|
||||||
Anchor == Anchor.Bottom || Anchor == Anchor.Top)
|
Anchor == Anchor.Bottom || Anchor == Anchor.Top)
|
||||||
.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
|
.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top))
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[Inject] public IBreakpointService Breakpointistener { get; set; }
|
[Inject] public IBreakpointService Breakpointistener { get; set; }
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" style="@Stylename" class="@Classname">
|
<div @attributes="CustomAttributes" style="@Stylename" class="@Classname">
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
@ -14,7 +14,7 @@ public partial class DrawerContainer : UIComponent
|
|||||||
new CssBuilder()
|
new CssBuilder()
|
||||||
.AddClass(GetDrawerClass(FindLeftDrawer()))
|
.AddClass(GetDrawerClass(FindLeftDrawer()))
|
||||||
.AddClass(GetDrawerClass(FindRightDrawer()))
|
.AddClass(GetDrawerClass(FindRightDrawer()))
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string Stylename =>
|
protected string Stylename =>
|
||||||
@ -23,7 +23,6 @@ public partial class DrawerContainer : UIComponent
|
|||||||
.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
|
.AddStyle("--mud-drawer-width-right", GetDrawerWidth(FindRightDrawer()), !string.IsNullOrEmpty(GetDrawerWidth(FindRightDrawer())))
|
||||||
.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
|
.AddStyle("--mud-drawer-width-mini-left", GetMiniDrawerWidth(FindLeftMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindLeftMiniDrawer())))
|
||||||
.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
|
.AddStyle("--mud-drawer-width-mini-right", GetMiniDrawerWidth(FindRightMiniDrawer()), !string.IsNullOrEmpty(GetMiniDrawerWidth(FindRightMiniDrawer())))
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
||||||
|
@ -3,13 +3,13 @@
|
|||||||
|
|
||||||
@if (LinkToIndex)
|
@if (LinkToIndex)
|
||||||
{
|
{
|
||||||
<a @attributes="UserAttributes" class="@Classname" style="@Style" href="/">
|
<a @attributes="CustomAttributes" class="@Classname" href="/">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</a>
|
</a>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,7 @@ public partial class DrawerHeader : UIComponent
|
|||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("drawer-header")
|
new CssBuilder("drawer-header")
|
||||||
.AddClass($"drawer-header-dense", Dense)
|
.AddClass($"drawer-header-dense", Dense)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -3,8 +3,7 @@
|
|||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
<div @attributes="UserAttributes"
|
<div @attributes="CustomAttributes"
|
||||||
style="@Style"
|
|
||||||
class="@Classname">
|
class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
@ -149,7 +149,7 @@ public partial class DropContainer<T> : UIComponent
|
|||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("drop-container")
|
new CssBuilder("drop-container")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -3,12 +3,12 @@
|
|||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
|
|
||||||
<div class="@Classname" style="@Style"
|
<div class="@Classname"
|
||||||
id="@($"drop-zone-{_id}")"
|
id="@($"drop-zone-{_id}")"
|
||||||
@ondrop="HandleDrop"
|
@ondrop="HandleDrop"
|
||||||
@ondragenter="HandleDragEnter"
|
@ondragenter="HandleDragEnter"
|
||||||
@ondragleave="HandleDragLeave"
|
@ondragleave="HandleDragLeave"
|
||||||
@attributes="UserAttributes">
|
@attributes="CustomAttributes">
|
||||||
|
|
||||||
@ChildContent
|
@ChildContent
|
||||||
|
|
||||||
|
@ -184,7 +184,7 @@ public partial class DropZone<T> : UIComponent, IDisposable
|
|||||||
.AddClass(CanDropClass ?? Container?.CanDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == true && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
|
.AddClass(CanDropClass ?? Container?.CanDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == true && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
|
||||||
.AddClass(NoDropClass ?? Container?.NoDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == false && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
|
.AddClass(NoDropClass ?? Container?.NoDropClass, Container?.TransactionInProgress() == true && Container.GetTransactionOrignZoneIdentiifer() != Identifier && _canDrop == false && (_dragCounter > 0 || GetApplyDropClassesOnDragStarted() == true))
|
||||||
.AddClass(GetDragginClass(), _dragInProgress == true)
|
.AddClass(GetDragginClass(), _dragInProgress == true)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string PlaceholderClassname =>
|
protected string PlaceholderClassname =>
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<div class="@Classname" style="@Style"
|
<div class="@Classname"
|
||||||
@attributes="UserAttributes"
|
@attributes="CustomAttributes"
|
||||||
draggable="@(Disabled == false ? "true" : "false")"
|
draggable="@(Disabled == false ? "true" : "false")"
|
||||||
@ondragstart="DragStarted"
|
@ondragstart="DragStarted"
|
||||||
@ondragend="DragEnded"
|
@ondragend="DragEnded"
|
||||||
|
@ -137,7 +137,7 @@ public partial class DynamicDropItem<T> : UIComponent
|
|||||||
new CssBuilder("drop-item")
|
new CssBuilder("drop-item")
|
||||||
.AddClass(DraggingClass, _dragOperationIsInProgress == true)
|
.AddClass(DraggingClass, _dragOperationIsInProgress == true)
|
||||||
.AddClass(DisabledClass, Disabled == true)
|
.AddClass(DisabledClass, Disabled == true)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -46,7 +46,7 @@ public class Element : UIComponent
|
|||||||
builder.OpenElement(0, HtmlTag);
|
builder.OpenElement(0, HtmlTag);
|
||||||
|
|
||||||
//splatted attributes
|
//splatted attributes
|
||||||
foreach (var attribute in UserAttributes)
|
foreach (var attribute in CustomAttributes)
|
||||||
{
|
{
|
||||||
// checking if the value is null, we can get rid of null event handlers
|
// checking if the value is null, we can get rid of null event handlers
|
||||||
// for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
|
// for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
|
||||||
@ -56,9 +56,7 @@ public class Element : UIComponent
|
|||||||
builder.AddAttribute(1, attribute.Key, attribute.Value);
|
builder.AddAttribute(1, attribute.Key, attribute.Value);
|
||||||
}
|
}
|
||||||
//Class
|
//Class
|
||||||
builder.AddAttribute(2, "class", Class);
|
builder.AddAttribute(2, "class", AdditionalClassList);
|
||||||
//Style
|
|
||||||
builder.AddAttribute(3, "style", Style);
|
|
||||||
|
|
||||||
// StopPropagation
|
// StopPropagation
|
||||||
// the order matters. This has to be before content is added
|
// the order matters. This has to be before content is added
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
<div class="expand-panel-header" @onclick="ToggleExpansion">
|
<div class="expand-panel-header" @onclick="ToggleExpansion">
|
||||||
<div class="expand-panel-text">
|
<div class="expand-panel-text">
|
||||||
@if (TitleContent != null)
|
@if (TitleContent != null)
|
||||||
|
@ -19,7 +19,7 @@ public partial class ExpansionPanel : UIComponent, IDisposable
|
|||||||
.AddClass("disabled", Disabled)
|
.AddClass("disabled", Disabled)
|
||||||
.AddClass($"elevation-{Parent?.Elevation.ToString()}")
|
.AddClass($"elevation-{Parent?.Elevation.ToString()}")
|
||||||
.AddClass($"expand-panel-border", Parent?.DisableBorders != true)
|
.AddClass($"expand-panel-border", Parent?.DisableBorders != true)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string PanelContentClassname =>
|
protected string PanelContentClassname =>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
@ -10,7 +10,7 @@ public partial class ExpansionPanels : UIComponent
|
|||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("expansion-panels")
|
new CssBuilder("expansion-panels")
|
||||||
.AddClass($"expansion-panels-square", Square)
|
.AddClass($"expansion-panels-square", Square)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<InputControl Label="@Label" HelperText="@HelperText" Variant="@Variant" FullWidth="@FullWidth" Margin="@Margin" Disabled="@Disabled"
|
<InputControl Label="@Label" HelperText="@HelperText" Variant="@Variant" FullWidth="@FullWidth" Margin="@Margin" Disabled="@Disabled"
|
||||||
Class="@InputControlClassname" Error="@Error" ErrorText="@ErrorText" Style="@Style" @attributes="UserAttributes" ForId="@FieldId">
|
Class="@InputControlClassname" Error="@Error" ErrorText="@ErrorText" @attributes="CustomAttributes" ForId="@FieldId">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<div class="@Classname">
|
<div class="@Classname">
|
||||||
@if (Adornment == Adornment.Start)
|
@if (Adornment == Adornment.Start)
|
||||||
|
@ -38,7 +38,7 @@ public partial class Field : UIComponent
|
|||||||
|
|
||||||
protected string InputControlClassname =>
|
protected string InputControlClassname =>
|
||||||
new CssBuilder("field")
|
new CssBuilder("field")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -3,9 +3,9 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@using Microsoft.AspNetCore.Components.Forms
|
@using Microsoft.AspNetCore.Components.Forms
|
||||||
|
|
||||||
<InputControl Class="@Classname" Style="@Style" Error="HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
<InputControl Class="@Classname" Error="HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<InputFile OnChange="OnChange" id="@_id" class="@InputClass" style="@InputStyle" hidden="@(Hidden ? "" : null)" multiple="@(typeof(T) == typeof(IReadOnlyList<IBrowserFile>) ? "" : null)" accept="@Accept" @attributes="UserAttributes" />
|
<InputFile OnChange="OnChange" id="@_id" class="@InputClass" style="@InputStyle" hidden="@(Hidden ? "" : null)" multiple="@(typeof(T) == typeof(IReadOnlyList<IBrowserFile>) ? "" : null)" accept="@Accept" @attributes="CustomAttributes" />
|
||||||
@if (ButtonTemplate != null)
|
@if (ButtonTemplate != null)
|
||||||
{
|
{
|
||||||
@ButtonTemplate(_id)
|
@ButtonTemplate(_id)
|
||||||
|
@ -18,7 +18,7 @@ public partial class FileUpload<T> : FormComponent<T, string>
|
|||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("file-upload")
|
new CssBuilder("file-upload")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @ref="_root" @attributes="UserAttributes" class="@Classname" style="@Style" @onkeydown="OnRootKeyDown" @onkeyup="OnRootKeyUp" @onfocus="OnRootFocusAsync" tabindex="-1">
|
<div @ref="_root" @attributes="CustomAttributes" class="@Classname" @onkeydown="OnRootKeyDown" @onkeyup="OnRootKeyUp" @onfocus="OnRootFocusAsync" tabindex="-1">
|
||||||
|
|
||||||
<div class="fixed pointer-events-none"
|
<div class="fixed pointer-events-none"
|
||||||
tabindex="@TrapTabIndex"
|
tabindex="@TrapTabIndex"
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user