Added ToggleGlyphButton
This commit is contained in:
parent
b9b1c16e23
commit
858dd59688
21
src/Connected.Components/Components/ToggleGlyphButton.razor
Normal file
21
src/Connected.Components/Components/ToggleGlyphButton.razor
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
@inherits Button
|
||||||
|
|
||||||
|
<button type="button"
|
||||||
|
@onclick="@Clicked"
|
||||||
|
disabled=@Disabled
|
||||||
|
style="@StyleList"
|
||||||
|
class="@ClassList">
|
||||||
|
<div class="@ContentClassList">
|
||||||
|
<div style="align-items:center">
|
||||||
|
@if (GlyphPosition == Position.Top)
|
||||||
|
{
|
||||||
|
<Glyph SVG="@Glyph" Color="@GlyphColor" />
|
||||||
|
}
|
||||||
|
@ChildContent
|
||||||
|
@if (GlyphPosition == Position.Bottom)
|
||||||
|
{
|
||||||
|
<Glyph SVG="@Glyph" Color="@GlyphColor" />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
120
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
Normal file
120
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
Normal file
@ -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
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Outline type of the button.
|
||||||
|
/// Options: true, false
|
||||||
|
/// Default: false
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool Toggled { get; set; } = false;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Glyph (Icon) inside the button.
|
||||||
|
/// Options: SVG string --> Icons
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter, EditorRequired]
|
||||||
|
public string Glyph { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Glyph (Icon) inside the button when tge .
|
||||||
|
/// Options: SVG string --> Icons
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter, EditorRequired]
|
||||||
|
public string ToggledGlyph { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 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
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Position GlyphPosition { get; set; } = Position.Left;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 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
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Color GlyphColor { get; set; } = Color.Dark;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// 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
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Color ToggledGlyphColor { get; set; } = Color.Dark;
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Events
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Button click event.
|
||||||
|
/// Options: any MouseEventCallback event
|
||||||
|
/// Default: empty
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<bool> 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Generated class list for button based on user parameters
|
||||||
|
/// </summary>
|
||||||
|
public string ClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("btn")
|
||||||
|
.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
|
||||||
|
.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
|
||||||
|
.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
|
||||||
|
.AddClass(base.Class)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Generated class list for button based on user parameters
|
||||||
|
/// </summary>
|
||||||
|
public string ContentClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("")
|
||||||
|
.AddClass(base.ContentClass)
|
||||||
|
.Build();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user