diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor b/src/Connected.Components/Components/ToggleGlyphButton.razor new file mode 100644 index 0000000..6e6c789 --- /dev/null +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor @@ -0,0 +1,21 @@ +@inherits Button + + + + + @if (GlyphPosition == Position.Top) + { + + } + @ChildContent + @if (GlyphPosition == Position.Bottom) + { + + } + + + diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs new file mode 100644 index 0000000..e8349b0 --- /dev/null +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs @@ -0,0 +1,120 @@ +using Connected.Utilities; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; + +namespace Connected.Components; +public partial class ToggleGlyphButton: Button +{ + #region Parameters + + /// + /// Outline type of the button. + /// Options: true, false + /// Default: false + /// + [Parameter] + public bool Toggled { get; set; } = false; + + /// + /// Glyph (Icon) inside the button. + /// Options: SVG string --> Icons + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string Glyph { get; set; } = string.Empty; + + /// + /// Glyph (Icon) inside the button when tge . + /// Options: SVG string --> Icons + /// Default: string.Empty + /// + [Parameter, EditorRequired] + public string ToggledGlyph { get; set; } = string.Empty; + + /// + /// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored + /// Options: Position.[left,top,right,bottom] + /// Default: Position.left + /// + [Parameter] + public Position GlyphPosition { get; set; } = Position.Left; + + /// + /// Color for the glyph. If Glyph parameter is empty this parameter is ignored + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color GlyphColor { get; set; } = Color.Dark; + + /// + /// Color for the glyph. If Glyph parameter is empty this parameter is ignored + /// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark] + /// Default: Color.Dark + /// + [Parameter] + public Color ToggledGlyphColor { get; set; } = Color.Dark; + + #endregion + + #region Events + + /// + /// Button click event. + /// Options: any MouseEventCallback event + /// Default: empty + [Parameter] + public EventCallback ToggledChanged { get; set; } + + protected async Task Clicked(MouseEventArgs e) + { + Toggled = !Toggled; + await ToggledChanged.InvokeAsync(Toggled); + } + #endregion + + #region Styling + + public string StyleList + { + get + { + return new StyleBuilder() + .AddStyle(base.Style) + .Build(); + } + } + + + /// + /// Generated class list for button based on user parameters + /// + public string ClassList + { + get + { + return new CssBuilder("btn") + .AddClass("btn-" + Helper.GetEnumDescription(base.Size)) + .AddClass("btn-" + Helper.GetEnumDescription(base.Color),!base.Outlined) + .AddClass("btn-outline-" + Helper.GetEnumDescription(base.Color), base.Outlined) + .AddClass(base.Class) + .Build(); + } + } + + /// + /// Generated class list for button based on user parameters + /// + public string ContentClassList + { + get + { + return new CssBuilder("") + .AddClass(base.ContentClass) + .Build(); + } + } + + #endregion + +}