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