Skip to content

Commit e9c0a8b

Browse files
mckaragozmckaragoz
authored
MudSplitter (#38)
* MudSplitter Initialize * Height implementation * Height fix * Cleanup & API
1 parent 5c49c3f commit e9c0a8b

File tree

11 files changed

+384
-2
lines changed

11 files changed

+384
-2
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,10 @@
4545
</None>
4646
</ItemGroup>
4747

48+
<ItemGroup>
49+
<Content Update="Components\Splitter\MudSplitter.razor">
50+
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
51+
</Content>
52+
</ItemGroup>
53+
4854
</Project>

‎CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<div class="@Classname" style="@Style">
5+
<MudSlider @ref="_slider" Class="@SliderClassname" T="double" Min="0" Max="100" Step="0.1" ValueChanged="UpdateDimensions" />
6+
7+
<div class="@ContentClassname" style="@StyleContent">
8+
@StartContent
9+
</div>
10+
<div class="@ContentClassname" style="@StyleContent">
11+
@EndContent
12+
</div>
13+
</div>
14+
15+
<style>
16+
@($".mud-splitter-generate-{_styleGuid} {{ grid-template-columns: {_firstContentDimension.ToInvariantString()}% {_secondContentDimension.ToInvariantString()}%; }}")
17+
18+
.mud-splitter-thumb-@(_styleGuid) ::-webkit-slider-thumb {
19+
@(Color == Color.Default ? "background-color: var(--mud-palette-action-default) !important;" : $"background-color: var(--mud-palette-{Color.ToDescriptionString()}) !important;") @(StyleBar)
20+
@(Height != null ? $"height: {Height} !important;" : null)
21+
@(StyleBar)
22+
}
23+
24+
.mud-splitter-thumb-@(_styleGuid) ::-moz-range-thumb {
25+
@(Color == Color.Default ? "background-color: var(--mud-palette-action-default) !important;" : $"background-color: var(--mud-palette-{Color.ToDescriptionString()}) !important;") @(StyleBar)
26+
@(Height != null ? $"height: {Height} !important;" : null)
27+
@(StyleBar)
28+
}
29+
30+
.mud-splitter-content-@(_styleGuid) {
31+
@(Height != null ? $"height: {Height};" : null)
32+
}
33+
</style>

‎CodeBeam.MudExtensions/Components/Splitter/MudSplitter.razor.cs‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.AspNetCore.Components.Web;
3+
using MudBlazor;
4+
using MudBlazor.Components.Highlighter;
5+
using MudBlazor.Extensions;
6+
using MudBlazor.Utilities;
7+
using System;
8+
using System.Collections.Generic;
9+
using System.Linq;
10+
using System.Text;
11+
using System.Threading.Tasks;
12+
using static MudBlazor.CategoryTypes;
13+
14+
namespace MudExtensions
15+
{
16+
public partial class MudSplitter : MudComponentBase
17+
{
18+
19+
Guid _styleGuid = Guid.NewGuid();
20+
MudSlider<double> _slider;
21+
22+
protected string Classname => new CssBuilder("mud-splitter")
23+
.AddClass($"border-solid border-8 mud-border-{Color.ToDescriptionString()}", Bordered == true)
24+
.AddClass($"mud-splitter-generate mud-splitter-generate-{_styleGuid}")
25+
.AddClass(Class)
26+
.Build();
27+
28+
protected string ContentClassname => new CssBuilder($"mud-splitter-content mud-splitter-content-{_styleGuid} d-flex ma-2")
29+
.AddClass(ClassContent)
30+
.Build();
31+
32+
protected string SliderClassname => new CssBuilder($"mud-splitter-thumb mud-splitter-thumb-{_styleGuid} mud-splitter-track")
33+
.Build();
34+
35+
/// <summary>
36+
/// The two contents' (sections) classes, seperated by space.
37+
/// </summary>
38+
[Parameter]
39+
public string ClassContent { get; set; }
40+
41+
string _height;
42+
/// <summary>
43+
/// The height of splitter.
44+
/// </summary>
45+
[Parameter]
46+
public string Height
47+
{
48+
get => _height;
49+
set
50+
{
51+
if (value == _height)
52+
{
53+
return;
54+
}
55+
_height = value;
56+
UpdateDimensions().AndForget();
57+
}
58+
}
59+
60+
/// <summary>
61+
/// The height of splitter.
62+
/// </summary>
63+
[Parameter]
64+
public Color Color { get; set; }
65+
66+
/// <summary>
67+
/// If true, splitter has borders.
68+
/// </summary>
69+
[Parameter]
70+
public bool Bordered { get; set; }
71+
72+
/// <summary>
73+
/// The two contents' (sections) styles, seperated by space.
74+
/// </summary>
75+
[Parameter]
76+
public string StyleContent { get; set; }
77+
78+
/// <summary>
79+
/// The splitter bar's styles, seperated by space. All styles have to include !important and end with ';'
80+
/// </summary>
81+
[Parameter]
82+
public string StyleBar { get; set; }
83+
84+
///// <summary>
85+
///// If true, splitter bar goes vertical.
86+
///// </summary>
87+
//[Parameter]
88+
//public bool Horizontal { get; set; }
89+
90+
[Parameter]
91+
public RenderFragment StartContent { get; set; }
92+
93+
[Parameter]
94+
public RenderFragment EndContent { get; set; }
95+
96+
[Parameter]
97+
public EventCallback DimensionChanged { get; set; }
98+
99+
protected override async Task OnInitializedAsync()
100+
{
101+
await base.OnInitializedAsync();
102+
await UpdateDimensions();
103+
}
104+
105+
double _firstContentDimension = 50;
106+
double _secondContentDimension = 50;
107+
protected async Task UpdateDimensions()
108+
{
109+
if (_slider == null)
110+
{
111+
return;
112+
}
113+
_firstContentDimension = _slider.Value;
114+
_secondContentDimension = 100d - _firstContentDimension;
115+
await DimensionChanged.InvokeAsync();
116+
}
117+
118+
public double GetStartContentPercentage() => _firstContentDimension;
119+
120+
/// <summary>
121+
/// Updates the dimension with given the start content's percentage
122+
/// </summary>
123+
/// <param name="percentage"></param>
124+
public async Task SetDimensions(double percentage)
125+
{
126+
_slider.Value = percentage;
127+
await UpdateDimensions();
128+
}
129+
130+
}
131+
}

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
.mud-splitter {
3+
display: grid;
4+
position: relative;
5+
width: 100%;
6+
}
7+
8+
.mud-splitter-content {
9+
overflow: auto;
10+
}
11+
12+
.mud-splitter-thumb ::-webkit-slider-runnable-track {
13+
visibility: hidden !important;
14+
height: 100% !important;
15+
}
16+
17+
.mud-splitter-thumb ::-moz-range-track {
18+
visibility: hidden !important;
19+
height: 100% !important;
20+
}
21+
22+
.mud-splitter-track {
23+
position: absolute;
24+
top: 50%;
25+
transform: translateY(-50%);
26+
height: 100%;
27+
28+
&.mud-slider {
29+
visibility: hidden !important;
30+
}
31+
32+
&.mud-slider .mud-slider-container {
33+
height: 100% !important;
34+
}
35+
36+
&.mud-slider .mud-slider-input {
37+
top: 50%;
38+
/*transform: translateY(-50%);*/
39+
}
40+
}
41+
42+
.mud-splitter-thumb ::-webkit-slider-thumb {
43+
visibility: visible !important;
44+
appearance: none !important;
45+
-webkit-appearance: none !important;
46+
top: 50% !important;
47+
transform: translateY(-50%) !important;
48+
height: 100% !important;
49+
width: 8px !important;
50+
border: none !important;
51+
border-radius: 0 !important;
52+
cursor: ew-resize !important;
53+
}
54+
55+
.mud-splitter-thumb ::-moz-range-thumb {
56+
visibility: visible !important;
57+
appearance: none !important;
58+
-moz-appearance: none !important;
59+
top: 50% !important;
60+
transform: translateY(-50%) !important;
61+
height: 100% !important;
62+
width: 8px !important;
63+
border: none !important;
64+
border-radius: 0 !important;
65+
cursor: ew-resize !important;
66+
}

‎CodeBeam.MudExtensions/Styles/MudExtensions.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,59 @@
175175
width: 320px;
176176
aspect-ratio: 1 / 1; }
177177

178+
.mud-splitter {
179+
display: grid;
180+
position: relative;
181+
width: 100%; }
182+
183+
.mud-splitter-content {
184+
overflow: auto; }
185+
186+
.mud-splitter-thumb ::-webkit-slider-runnable-track {
187+
visibility: hidden !important;
188+
height: 100% !important; }
189+
190+
.mud-splitter-thumb ::-moz-range-track {
191+
visibility: hidden !important;
192+
height: 100% !important; }
193+
194+
.mud-splitter-track {
195+
position: absolute;
196+
top: 50%;
197+
transform: translateY(-50%);
198+
height: 100%; }
199+
.mud-splitter-track.mud-slider {
200+
visibility: hidden !important; }
201+
.mud-splitter-track.mud-slider .mud-slider-container {
202+
height: 100% !important; }
203+
.mud-splitter-track.mud-slider .mud-slider-input {
204+
top: 50%;
205+
/*transform: translateY(-50%);*/ }
206+
207+
.mud-splitter-thumb ::-webkit-slider-thumb {
208+
visibility: visible !important;
209+
appearance: none !important;
210+
-webkit-appearance: none !important;
211+
top: 50% !important;
212+
transform: translateY(-50%) !important;
213+
height: 100% !important;
214+
width: 8px !important;
215+
border: none !important;
216+
border-radius: 0 !important;
217+
cursor: ew-resize !important; }
218+
219+
.mud-splitter-thumb ::-moz-range-thumb {
220+
visibility: visible !important;
221+
appearance: none !important;
222+
-moz-appearance: none !important;
223+
top: 50% !important;
224+
transform: translateY(-50%) !important;
225+
height: 100% !important;
226+
width: 8px !important;
227+
border: none !important;
228+
border-radius: 0 !important;
229+
cursor: ew-resize !important; }
230+
178231
.mud-stepper-header {
179232
min-height: 62px;
180233
border-radius: var(--mud-default-borderradius); }

‎CodeBeam.MudExtensions/Styles/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudExtensions/Styles/MudExtensions.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'components/_gallery';
22
@import 'components/_page';
33
@import 'components/_popup';
4+
@import 'components/_splitter';
45
@import 'components/_stepper';
56
@import 'components/_wheel';

‎CodeBeam.MudExtensions/wwwroot/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ComponentViewer/Pages/Components/ApiPage.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,19 @@
158158
</MudTable>
159159
</ExampleCard>
160160

161+
<ExampleCard Title="Api - MudSplitter" HasExpansionPanel="true">
162+
<MudTable Items="@(typeof(MudSplitter).GetProperties().OrderBy(x => x.Name).ToList())">
163+
<HeaderContent>
164+
<MudTh>Name</MudTh>
165+
<MudTh>Type</MudTh>
166+
</HeaderContent>
167+
<RowTemplate>
168+
<MudTd>@context.Name</MudTd>
169+
<MudTd>@context.PropertyType.ToString()</MudTd>
170+
</RowTemplate>
171+
</MudTable>
172+
</ExampleCard>
173+
161174
<ExampleCard Title="Api - MudStepper & MudStep" HasExpansionPanel="true">
162175
<MudTable Items="@(typeof(MudStepper).GetProperties().OrderBy(x => x.Name).ToList())">
163176
<HeaderContent>

0 commit comments

Comments
 (0)