You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Connected.Components/Components/Switch/Switch.razor

40 lines
1.4 KiB

2 years ago
@namespace Connected.Components
@using Connected.Annotations;
@inherits BooleanInput<T>
@typeparam T
<label class="@Classname" style="@Style" @onkeydown="@HandleKeyDown" id="@_elementId">
<span class="mud-switch-span mud-flip-x-rtl">
<span tabindex="0" class="@SwitchClassname">
<span class="mud-switch-button">
<input tabindex="-1" @attributes="UserAttributes" aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(Disabled.ToString().ToLower())" type="checkbox" class="mud-switch-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly"/>
<span class="mud-switch-thumb d-flex align-center justify-center">
@if (!string.IsNullOrEmpty(ThumbIcon))
{
<Icon Color="@ThumbIconColor" Icon="@ThumbIcon" Style=" height:16px; width:16px;" />
}
</span>
</span>
</span>
<span class="@TrackClassname"></span>
</span>
@if (!String.IsNullOrEmpty(Label))
{
<Text>@Label</Text>
}
@if (ChildContent != null)
{
<Text>
@ChildContent
</Text>
}
</label>
@code
{
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public RenderFragment ChildContent { get; set; }
}