Skip to content

Commit d8a7cd2

Browse files
mckaragozmckaragoz
authored
MudSwitchM3 (#45)
* SwitchM3 Initialize * Some Changes * Finalize
1 parent 27a7168 commit d8a7cd2

File tree

23 files changed

+789
-146
lines changed

23 files changed

+789
-146
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<Pack>True</Pack>
4646
<PackagePath>\</PackagePath>
4747
</None>
48+
<None Include="Components\SwitchM3\MudSwitchM3.razor" />
4849
</ItemGroup>
4950

5051
<ItemGroup>

‎CodeBeam.MudExtensions/Components/SwitchM3/MudSwitchM3.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@namespace MudExtensions
2+
@inherits MudBooleanInput<T>
3+
@typeparam T
4+
5+
<label class="@Classname" style="@Style" @onkeydown="@HandleKeyDown" id="@_elementId">
6+
<span class="@SwitchSpanClassname">
7+
<span tabindex="0" class="@SwitchClassname">
8+
<span class="mud-switch-button-m3">
9+
<input tabindex="-1" @attributes="UserAttributes" aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(Disabled.ToString().ToLower())" type="checkbox" class="mud-switch-input-m3" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
10+
<span class="mud-switch-thumb-m3 @(BoolValue == false ? $"mud-switch-thumb-{Color.ToDescriptionString()}-m3" : null) @(string.IsNullOrEmpty(ThumbOffIcon) ? null : "mud-switch-thumb-off-icon-m3") d-flex align-center justify-center">
11+
@if (!string.IsNullOrEmpty(ThumbIcon) && BoolValue == true)
12+
{
13+
<MudIcon Color="@Color" Icon="@ThumbIcon" Style="height:16px; width:16px;" />
14+
}
15+
else if (!string.IsNullOrEmpty(ThumbOffIcon) && BoolValue == false)
16+
{
17+
<MudIcon Icon="@ThumbOffIcon" Style="@IconStylename" />
18+
}
19+
</span>
20+
</span>
21+
</span>
22+
<span class="@TrackClassname"></span>
23+
</span>
24+
@if (!String.IsNullOrEmpty(Label))
25+
{
26+
<MudText>@Label</MudText>
27+
}
28+
@if (ChildContent != null)
29+
{
30+
<MudText>
31+
@ChildContent
32+
</MudText>
33+
}
34+
</label>
35+
36+
@code
37+
{
38+
[Parameter]
39+
[Category(CategoryTypes.FormComponent.Behavior)]
40+
public RenderFragment ChildContent { get; set; }
41+
}
42+

‎CodeBeam.MudExtensions/Components/SwitchM3/MudSwitchM3.razor.cs‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
using System;
2+
using System.Diagnostics.CodeAnalysis;
3+
using System.Threading.Tasks;
4+
using Microsoft.AspNetCore.Components;
5+
using Microsoft.AspNetCore.Components.Web;
6+
using MudBlazor;
7+
using MudBlazor.Extensions;
8+
using MudBlazor.Services;
9+
using MudBlazor.Utilities;
10+
11+
namespace MudExtensions
12+
{
13+
public partial class MudSwitchM3<T> : MudBooleanInput<T>
14+
{
15+
protected string Classname =>
16+
new CssBuilder("mud-switch-m3")
17+
.AddClass($"mud-disabled", Disabled)
18+
.AddClass($"mud-readonly", ReadOnly)
19+
.AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true)
20+
.AddClass(Class)
21+
.Build();
22+
23+
protected string SwitchSpanClassname =>
24+
new CssBuilder("mud-switch-span-m3 mud-flip-x-rtl")
25+
.AddClass("mud-switch-child-content-m3", ChildContent != null || !string.IsNullOrEmpty(Label))
26+
.Build();
27+
28+
protected string SwitchClassname =>
29+
new CssBuilder("mud-button-root mud-icon-button mud-switch-base-m3")
30+
.AddClass($"mud-ripple mud-ripple-switch", !DisableRipple && !ReadOnly && !Disabled)
31+
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", BoolValue == true)
32+
//.AddClass($"mud-{UnCheckedColor.ToDescriptionString()}-text hover:mud-{UnCheckedColor.ToDescriptionString()}-hover", BoolValue == false)
33+
.AddClass($"mud-switch-disabled", Disabled)
34+
.AddClass($"mud-readonly", ReadOnly)
35+
.AddClass($"mud-checked", BoolValue)
36+
.AddClass("mud-switch-base-dense-m3", !string.IsNullOrEmpty(ThumbOffIcon))
37+
.Build();
38+
39+
protected string TrackClassname =>
40+
new CssBuilder("mud-switch-track-m3")
41+
.AddClass($"mud-{Color.ToDescriptionString()}", BoolValue == true)
42+
.AddClass($"mud-switch-track-{Color.ToDescriptionString()}-m3")
43+
.Build();
44+
45+
protected string IconStylename =>
46+
new StyleBuilder()
47+
.AddStyle("width: 16px; height: 16px;")
48+
.AddStyle("color", "var(--mud-palette-background)", !string.IsNullOrEmpty(ThumbOffIcon))
49+
.Build();
50+
51+
private IKeyInterceptor _keyInterceptor;
52+
[Inject] private IKeyInterceptorFactory KeyInterceptorFactory { get; set; }
53+
54+
/// <summary>
55+
/// The color of the component. It supports the theme colors.
56+
/// </summary>
57+
[Parameter]
58+
[Category(CategoryTypes.FormComponent.Appearance)]
59+
public Color Color { get; set; } = Color.Default;
60+
61+
/// <summary>
62+
/// The text/label will be displayed next to the switch if set.
63+
/// </summary>
64+
[Parameter]
65+
[Category(CategoryTypes.FormComponent.Behavior)]
66+
public string Label { get; set; }
67+
68+
/// <summary>
69+
/// The position of the text/label.
70+
/// </summary>
71+
[Parameter]
72+
[Category(CategoryTypes.FormComponent.Behavior)]
73+
public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
74+
75+
/// <summary>
76+
/// Shows an icon on Switch's thumb.
77+
/// </summary>
78+
[Parameter]
79+
[Category(CategoryTypes.FormComponent.Appearance)]
80+
public string ThumbIcon { get; set; }
81+
82+
/// <summary>
83+
/// Shows an icon on Switch's thumb (off state).
84+
/// </summary>
85+
[Parameter]
86+
[Category(CategoryTypes.FormComponent.Appearance)]
87+
public string ThumbOffIcon { get; set; }
88+
89+
/// <summary>
90+
/// If true, disables ripple effect.
91+
/// </summary>
92+
[Parameter]
93+
[Category(CategoryTypes.FormComponent.Appearance)]
94+
public bool DisableRipple { get; set; }
95+
96+
protected internal void HandleKeyDown(KeyboardEventArgs obj)
97+
{
98+
if (Disabled || ReadOnly)
99+
return;
100+
switch (obj.Key)
101+
{
102+
case "ArrowLeft":
103+
case "Delete":
104+
SetBoolValueAsync(false);
105+
break;
106+
case "ArrowRight":
107+
case "Enter":
108+
case "NumpadEnter":
109+
SetBoolValueAsync(true);
110+
break;
111+
case " ":
112+
if (BoolValue == true)
113+
{
114+
SetBoolValueAsync(false);
115+
}
116+
else
117+
{
118+
SetBoolValueAsync(true);
119+
}
120+
break;
121+
}
122+
}
123+
124+
private string _elementId = "switchm3_" + Guid.NewGuid().ToString().Substring(0, 8);
125+
126+
protected override void OnInitialized()
127+
{
128+
base.OnInitialized();
129+
130+
if (Label == null && For != null)
131+
Label = For.GetLabelString();
132+
}
133+
134+
protected override async Task OnAfterRenderAsync(bool firstRender)
135+
{
136+
if (firstRender)
137+
{
138+
_keyInterceptor = KeyInterceptorFactory.Create();
139+
140+
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
141+
{
142+
//EnableLogging = true,
143+
TargetClass = "mud-switch-base-m3",
144+
Keys = {
145+
new KeyOptions { Key="ArrowUp", PreventDown = "key+none" }, // prevent scrolling page, instead increment
146+
new KeyOptions { Key="ArrowDown", PreventDown = "key+none" }, // prevent scrolling page, instead decrement
147+
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" },
148+
},
149+
});
150+
151+
_keyInterceptor.KeyDown += HandleKeyDown;
152+
}
153+
await base.OnAfterRenderAsync(firstRender);
154+
}
155+
156+
protected override void Dispose(bool disposing)
157+
{
158+
base.Dispose(disposing);
159+
160+
if (disposing == true)
161+
{
162+
if(_keyInterceptor != null)
163+
{
164+
_keyInterceptor.KeyDown -= HandleKeyDown;
165+
_keyInterceptor.Dispose();
166+
}
167+
}
168+
}
169+
}
170+
}

‎CodeBeam.MudExtensions/Styles/Components/_switchm3.scss‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
$mud-palette-colors: primary, secondary, tertiary, info, success, warning, error, dark;
2+
3+
.mud-switch-m3 {
4+
cursor: pointer;
5+
display: inline-flex;
6+
align-items: center;
7+
vertical-align: middle;
8+
-webkit-tap-highlight-color: transparent;
9+
10+
&.mud-disabled {
11+
color: var(--mud-palette-text-disabled) !important;
12+
cursor: default;
13+
}
14+
15+
&.mud-readonly, .mud-readonly:hover {
16+
cursor: default;
17+
background-color: transparent !important;
18+
}
19+
}
20+
21+
.mud-switch-span-m3 {
22+
width: 52px;
23+
height: 32px;
24+
display: inline-flex;
25+
z-index: 0;
26+
position: relative;
27+
box-sizing: border-box;
28+
flex-shrink: 0;
29+
vertical-align: middle;
30+
31+
&.mud-switch-child-content-m3 {
32+
margin-inline-end: 12px;
33+
}
34+
35+
& .mud-switch-track-m3 {
36+
width: 52px;
37+
height: 32px;
38+
z-index: -1;
39+
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
40+
border-radius: 30px;
41+
background-color: var(--mud-palette-background);
42+
border: 2px solid;
43+
44+
&.mud-switch-track-default-m3{
45+
border-color: var(--mud-palette-text-primary);
46+
}
47+
48+
@each $color in $mud-palette-colors {
49+
&.mud-switch-track-#{$color}-m3 {
50+
border-color: var(--mud-palette-#{$color});
51+
}
52+
}
53+
}
54+
}
55+
56+
.mud-switch-base-m3 {
57+
padding-top: 4px;
58+
padding-bottom: 4px;
59+
padding-inline-start: 8px;
60+
top: 0;
61+
left: 0;
62+
bottom: 0;
63+
color: #fafafa;
64+
z-index: 1;
65+
position: absolute;
66+
transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
67+
68+
&.mud-switch-base-dense-m3 {
69+
padding-inline-start: 4px;
70+
}
71+
72+
&.mud-checked {
73+
transform: translateX(20px);
74+
padding: 4px;
75+
76+
& + .mud-switch-track-m3 {
77+
opacity: 1;
78+
79+
&.mud-default {
80+
background-color: var(--mud-palette-text-primary);
81+
}
82+
83+
@each $color in $mud-palette-colors {
84+
&.mud-#{$color} {
85+
background-color: var(--mud-palette-#{$color});
86+
}
87+
}
88+
}
89+
90+
& .mud-switch-thumb-m3 {
91+
width: 24px;
92+
height: 24px;
93+
box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
94+
border-radius: 50%;
95+
background-color: var(--mud-palette-background);
96+
}
97+
}
98+
99+
&:hover {
100+
background-color: var(--mud-palette-action-default-hover);
101+
}
102+
103+
&.mud-switch-disabled {
104+
color: var(--mud-palette-grey-default) !important;
105+
106+
& + .mud-switch-track-m3 {
107+
opacity: 0.12 !important;
108+
}
109+
110+
&:hover, &:focus-visible {
111+
cursor: default;
112+
background-color: transparent !important;
113+
}
114+
}
115+
}
116+
117+
.mud-switch-button-m3 {
118+
display: flex;
119+
align-items: inherit;
120+
justify-content: inherit;
121+
122+
& .mud-switch-input-m3 {
123+
top: 0;
124+
left: 0;
125+
width: 100%;
126+
cursor: inherit;
127+
height: 100%;
128+
margin: 0;
129+
opacity: 0;
130+
padding: 0;
131+
z-index: 1;
132+
position: absolute;
133+
}
134+
135+
& .mud-switch-thumb-m3 {
136+
width: 16px;
137+
height: 16px;
138+
box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
139+
border-radius: 50%;
140+
141+
&.mud-switch-thumb-default-m3 {
142+
background-color: var(--mud-palette-text-primary);
143+
}
144+
145+
@each $color in $mud-palette-colors {
146+
&.mud-switch-thumb-#{$color}-m3 {
147+
background-color: var(--mud-palette-#{$color});
148+
}
149+
}
150+
151+
&.mud-switch-thumb-off-icon-m3 {
152+
width: 24px;
153+
height: 24px;
154+
}
155+
}
156+
}

0 commit comments

Comments
 (0)