Skip to content

Commit 6b49185

Browse files
mckaragozmckaragoz
authored
MudInputStyler (#29)
* MudInputStyler * Cleanup
1 parent 8547533 commit 6b49185

File tree

5 files changed

+210
-1
lines changed

5 files changed

+210
-1
lines changed

‎CodeBeam.MudExtensions/Components/InputStyler/MudInputStyler.razor‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
@namespace MudExtensions
2+
@using System.Text
3+
@using MudExtensions.Enums
4+
@using MudExtensions.Utilities
5+
@inherits MudComponentBase
6+
7+
@code{
8+
9+
/// <summary>
10+
/// Supports id and class selection. Use "#idName" for id selectors (ex. <Component id="idName" />) or ".idName" for class selectors (ex. <Component Class="idName" />). Leave it null or empty to effect all scrollbars.
11+
/// </summary>
12+
[Parameter]
13+
[Category(CategoryTypes.Item.Behavior)]
14+
public string Selector { get; set; }
15+
16+
/// <summary>
17+
/// If true, selected colors applies even the input does not have focus. Default is false.
18+
/// </summary>
19+
[Parameter]
20+
[Category(CategoryTypes.Item.Behavior)]
21+
public bool Always { get; set; }
22+
23+
/// <summary>
24+
/// The base color that affects text, label and borders. Can be overrided with other color parameters. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)"
25+
/// </summary>
26+
[Parameter]
27+
[Category(CategoryTypes.Item.Appearance)]
28+
public string BaseColor { get; set; }
29+
30+
/// <summary>
31+
/// The text color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)"
32+
/// </summary>
33+
[Parameter]
34+
[Category(CategoryTypes.Item.Appearance)]
35+
public string TextColor { get; set; }
36+
37+
/// <summary>
38+
/// The label text color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)"
39+
/// </summary>
40+
[Parameter]
41+
[Category(CategoryTypes.Item.Appearance)]
42+
public string LabelColor { get; set; }
43+
44+
/// <summary>
45+
/// The label background color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)"
46+
/// </summary>
47+
[Parameter]
48+
[Category(CategoryTypes.Item.Appearance)]
49+
public string LabelBackgroundColor { get; set; }
50+
51+
/// <summary>
52+
/// The border color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)"
53+
/// </summary>
54+
[Parameter]
55+
[Category(CategoryTypes.Item.Appearance)]
56+
public string BorderColor { get; set; }
57+
58+
}
59+
60+
<style>
61+
@if (!string.IsNullOrEmpty(BaseColor))
62+
{
63+
@($"{Selector} .mud-input-root {{ color: {BaseColor} !important; }}")
64+
65+
@if (Always)
66+
{
67+
@($"{Selector} .mud-input-underline:after, {Selector} .mud-input-underline:before {{ border-color: {BaseColor} !important; }}")
68+
@($"{Selector} .mud-input-outlined-border {{ border-color: {BaseColor} !important; }}")
69+
@($"{Selector} .mud-input-underline:hover:before {{ opacity: 0.6; }}")
70+
71+
@($"{Selector} .mud-input-label {{ color: {BaseColor} !important; }}")
72+
@($"{Selector}:focus-within .mud-input-label {{ color: {BaseColor} !important; font-weight: 900 }}")
73+
}
74+
else
75+
{
76+
@($"{Selector} .mud-input-underline:after {{ border-color: {BaseColor} !important; }}")
77+
@($"{Selector} .mud-input-outlined:focus-within .mud-input-outlined-border {{ border-color: {BaseColor} !important; }}")
78+
79+
@($"{Selector}:focus-within .mud-input-label {{ color: {BaseColor} !important; }}")
80+
}
81+
}
82+
83+
@if (!string.IsNullOrEmpty(TextColor))
84+
{
85+
@($"{Selector} .mud-input-root {{ color: {TextColor} !important; }}")
86+
}
87+
88+
@if (!string.IsNullOrEmpty(LabelColor))
89+
{
90+
if (Always)
91+
{
92+
@($"{Selector} .mud-input-label {{ color: {LabelColor} !important; }}")
93+
@($"{Selector}:focus-within .mud-input-label {{ color: {LabelColor} !important; font-weight: 900 }}")
94+
}
95+
else
96+
{
97+
@($"{Selector}:focus-within .mud-input-label {{ color: {LabelColor} !important; }}")
98+
}
99+
}
100+
101+
@if (!string.IsNullOrEmpty(LabelBackgroundColor))
102+
{
103+
@($"{Selector} .mud-input-label {{ background-color: {LabelBackgroundColor} !important; }}")
104+
}
105+
106+
@if (!string.IsNullOrEmpty(BorderColor))
107+
{
108+
if (Always)
109+
{
110+
@($"{Selector} .mud-input-underline:after, {Selector} .mud-input-underline:before {{ border-color: {BorderColor} !important; }}")
111+
@($"{Selector} .mud-input-outlined-border {{ border-color: {BorderColor} !important; }}")
112+
@($"{Selector} .mud-input-underline:hover:before {{ opacity: 0.6; }}")
113+
}
114+
else
115+
{
116+
<MudRender>@(Selector) .mud-input-underline:after {
117+
@($"border-color: {BorderColor} !important;");
118+
}</MudRender>
119+
120+
<MudRender>@(Selector) .mud-input-outlined:focus-within .mud-input-outlined-border {
121+
@($"border-color: {BorderColor} !important;");
122+
}</MudRender>
123+
}
124+
}
125+
</style>

‎ComponentViewer/ComponentViewer.csproj‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,10 @@
1414
<ProjectReference Include="..\CodeBeam.MudExtensions\CodeBeam.MudExtensions.csproj" />
1515
</ItemGroup>
1616

17+
<ItemGroup>
18+
<Content Update="Pages\Components\InputStylerPage.razor">
19+
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
20+
</Content>
21+
</ItemGroup>
22+
1723
</Project>

‎ComponentViewer/Pages/Components/InputStylerPage.razor‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@page "/mudinputstyler"
2+
@using MudBlazor.Utilities
3+
4+
<ExamplePage Title="MudInputStyler">
5+
<ExampleCard Title="Usage" Description="MudInputStyler is a style component to color the inputs. You can place the component wherever you want.">
6+
<MudGrid Style="background-color: var(--mud-palette-background-grey)">
7+
<MudItem xs="12" sm="8">
8+
<MudStack>
9+
<MudText>Default TextFields</MudText>
10+
<MudStack Row="true">
11+
<MudTextField T="string" Label="Test" />
12+
<MudTextField T="string" Label="Test" Variant="Variant.Outlined" />
13+
<MudTextField T="string" Label="Test" Variant="Variant.Filled" />
14+
</MudStack>
15+
<MudDivider />
16+
<MudText Class="mt-4">Modified TextFields</MudText>
17+
<MudStack Row="true">
18+
<MudTextField Class="text-field" T="string" Label="Test" />
19+
<MudTextField Class="text-field label-background-grey" T="string" Label="Test" Variant="Variant.Outlined" />
20+
<MudTextField Class="text-field label-background-transparent" T="string" Label="Test" Variant="Variant.Filled" />
21+
</MudStack>
22+
<MudDivider />
23+
<MudText Class="mt-4">Modified Selects</MudText>
24+
<MudStack Row="true">
25+
<MudSelect T="string" Class="text-field" T="string" Label="Test" AnchorOrigin="Origin.BottomCenter">
26+
<MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
27+
</MudSelect>
28+
<MudSelect T="string" Class="text-field label-background-grey" T="string" Label="Test" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
29+
<MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
30+
</MudSelect>
31+
<MudSelect T="string" Class="text-field label-background-transparent" T="string" Label="Test" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
32+
<MudSelectItem Value="@("a")">Colored With InputStyler</MudSelectItem>
33+
</MudSelect>
34+
</MudStack>
35+
</MudStack>
36+
37+
<MudInputStyler Selector=".text-field" BaseColor="@(_baseColor?.ToString())" TextColor="@(_textColor?.ToString())" LabelColor="@(_labelColor?.ToString())"
38+
BorderColor="@(_borderColor?.ToString())" Always="_always" />
39+
<MudInputStyler Selector=".label-background-grey" LabelBackgroundColor="@("var(--mud-palette-background-grey)")" />
40+
<MudInputStyler Selector=".label-background-transparent" LabelBackgroundColor="transparent" />
41+
<MudInputStyler />
42+
</MudItem>
43+
44+
<MudItem xs="12" sm="4">
45+
<MudStack Spacing="4">
46+
<MudSwitch @bind-Checked="_always" Color="Color.Primary" Label="Always" />
47+
<MudColorPicker @bind-Value="_baseColor" Label="Base Color" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
48+
<MudColorPicker @bind-Value="_textColor" Label="Text Color" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
49+
<MudColorPicker @bind-Value="_labelColor" Label="Label Color" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
50+
<MudColorPicker @bind-Value="_borderColor" Label="Border Color" ColorPickerView="ColorPickerView.Grid" Clearable="true" />
51+
<MudButton OnClick="Reset">Reset</MudButton>
52+
</MudStack>
53+
</MudItem>
54+
</MudGrid>
55+
</ExampleCard>
56+
</ExamplePage>
57+
58+
@code{
59+
MudColor _baseColor;
60+
MudColor _textColor;
61+
MudColor _labelColor;
62+
MudColor _borderColor;
63+
bool _always;
64+
65+
private void Reset()
66+
{
67+
_baseColor = null;
68+
_textColor = null;
69+
_labelColor = null;
70+
_borderColor = null;
71+
StateHasChanged();
72+
}
73+
}

‎ComponentViewer/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
Description="Mobile friendly image gallery component." />
2020
</MudItem>
2121

22+
<MudItem xs="12" sm="6" md="4" lg="3" xl="2">
23+
<ComponentCard Title="MudInputStyler"
24+
Description="Applies CSS colors easily for mud inputs like MudTextField and MudSelect." />
25+
</MudItem>
26+
2227
<MudItem xs="12" sm="6" md="4" lg="3" xl="2">
2328
<ComponentCard Title="MudAnimate"
2429
Description="A revolutionary next generation animate component." />

‎ComponentViewer/Shared/MainLayout.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</style>
66

77
<MudLayout>
8-
<MudAppBar Class="background-gradient-animation mud-width-full" Style="background: linear-gradient(-45deg, var(--mud-palette-info), var(--mud-palette-tertiary), var(--mud-palette-secondary), var(--mud-palette-primary)); background-size: 400% 400%; position: relative; overflow-x: hidden">
8+
<MudAppBar Class="background-gradient-animation mud-width-full" Style="background: linear-gradient(-45deg, var(--mud-palette-info), var(--mud-palette-primary), var(--mud-palette-secondary), var(--mud-palette-primary)); background-size: 400% 400%; position: relative; overflow-x: hidden">
99
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="4">
1010
<MudIconButton Class="white-text" Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Href="https://mudblazor.com/" Target="_blank" />
1111
<MudText>CodeBeam MudExtensions</MudText>

0 commit comments

Comments
 (0)