Skip to content

Commit 14f2914

Browse files
mckaragozmckaragoz
authored
Scrollbar ContainerHoverColor (#185)
1 parent 143955c commit 14f2914

File tree

2 files changed

+38
-19
lines changed

2 files changed

+38
-19
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/Scrollbar/MudScrollbar.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@
5959
[Category(CategoryTypes.Item.Appearance)]
6060
public string Color { get; set; }
6161

62+
/// <summary>
63+
/// Scrollbar's color when container hovered. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle).
64+
/// </summary>
65+
[Parameter]
66+
[Category(CategoryTypes.Item.Appearance)]
67+
public string ContainerHoverColor { get; set; }
68+
6269
/// <summary>
6370
/// Hover color for scrollbar thumb on hover. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle).
6471
/// </summary>
@@ -132,6 +139,18 @@
132139
@(ThumbStyle)
133140
}
134141
142+
@(Selector):hover::-webkit-scrollbar-thumb {
143+
@if (IsThemeColor(ContainerHoverColor))
144+
{
145+
<MudRender>background-color: var(--mud-palette-@(ContainerHoverColor)) !important;</MudRender>
146+
}
147+
else
148+
{
149+
<MudRender>background-color: @(ContainerHoverColor) !important;</MudRender>
150+
}
151+
border-radius: @(BorderRadius)px !important;
152+
}
153+
135154
@(Selector)::-webkit-scrollbar-thumb:hover {
136155
@if (IsThemeColor(HoverColor))
137156
{

‎ComponentViewer.Docs/Pages/Examples/ScrollbarExample1.razor‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<MudScrollbar Selector="@_selectedOption" Width="@_width" HoverWidth="@_hoverWidth" BorderRadius="@_borderRadius" Hide="_hide"
44
Color="@(string.IsNullOrEmpty(_pickerColor?.Value) ? _color : _pickerColor.Value)"
55
TrackColor="@(string.IsNullOrEmpty(_pickerTrackColor?.Value) ? _trackColor : _pickerTrackColor.Value)"
6-
HoverColor="@_hoverColor?.Value" />
6+
HoverColor="@_hoverColor?.Value" ContainerHoverColor="@_containerHoverColor?.Value" />
77

88
<MudGrid>
99
<MudItem xs="12" sm="8">
@@ -58,39 +58,38 @@
5858

5959
<MudField Label="Selector Id" Variant="Variant.Outlined">
6060
<MudRadioGroup T="string" @bind-SelectedOption="@_selectedOption">
61-
<MudRadio Option="@("")" Color="Color.Primary">All</MudRadio>
62-
<MudRadio Option="@(".id1")" Color="Color.Primary">Only First</MudRadio>
63-
<MudRadio Option="@(".id2")" Color="Color.Primary">Only Last</MudRadio>
61+
<MudRadio Option="@("")" Color="Color.Primary" Dense="true">All</MudRadio>
62+
<MudRadio Option="@(".id1")" Color="Color.Primary" Dense="true">Only First</MudRadio>
63+
<MudRadio Option="@(".id2")" Color="Color.Primary" Dense="true">Only Last</MudRadio>
6464
</MudRadioGroup>
6565
</MudField>
6666

67-
<MudNumericField @bind-Value="@_width" Variant="Variant.Outlined" Label="Scrollbar Width" />
68-
69-
<MudNumericField @bind-Value="@_hoverWidth" Variant="Variant.Outlined" Label="Scrollbar Width (Hover)" Clearable="true" />
70-
71-
<MudNumericField @bind-Value="@_borderRadius" Variant="Variant.Outlined" Label="Border Radius" />
67+
<MudNumericField @bind-Value="@_width" Variant="Variant.Outlined" Label="Scrollbar Width" Margin="Margin.Dense" />
68+
<MudNumericField @bind-Value="@_hoverWidth" Variant="Variant.Outlined" Label="Scrollbar Width (Hover)" Clearable="true" Margin="Margin.Dense" />
69+
<MudNumericField @bind-Value="@_borderRadius" Variant="Variant.Outlined" Label="Border Radius" Margin="Margin.Dense" />
7270

7371
<MudField Label="Thumb Color" Variant="Variant.Outlined">
7472
<MudRadioGroup @bind-SelectedOption="@_color">
75-
<MudRadio Option="@("primary")" Color="Color.Primary">Primary</MudRadio>
76-
<MudRadio Option="@("secondary")" Color="Color.Secondary">Secondary</MudRadio>
77-
<MudRadio Option="@("tertiary")" Color="Color.Tertiary">Tertiary</MudRadio>
73+
<MudRadio Option="@("primary")" Color="Color.Secondary" Dense="true">Primary</MudRadio>
74+
<MudRadio Option="@("secondary")" Color="Color.Secondary" Dense="true">Secondary</MudRadio>
75+
<MudRadio Option="@("tertiary")" Color="Color.Secondary" Dense="true">Tertiary</MudRadio>
76+
<MudRadio Option="@("transparent")" Color="Color.Secondary" Dense="true">Transparent</MudRadio>
7877
</MudRadioGroup>
7978
</MudField>
8079

81-
<MudColorPicker @bind-Value="_pickerColor" Label="Custom Thumb Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" />
80+
<MudColorPicker @bind-Value="_pickerColor" Label="Custom Thumb Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Margin="Margin.Dense" />
8281

8382
<MudField Label="Track Color" Variant="Variant.Outlined">
8483
<MudRadioGroup @bind-SelectedOption="@_trackColor">
85-
<MudRadio Option="@("primary")" Color="Color.Primary">Primary</MudRadio>
86-
<MudRadio Option="@("secondary")" Color="Color.Secondary">Secondary</MudRadio>
87-
<MudRadio Option="@("tertiary")" Color="Color.Tertiary">Tertiary</MudRadio>
84+
<MudRadio Option="@("primary")" Color="Color.Secondary" Dense="true">Primary</MudRadio>
85+
<MudRadio Option="@("secondary")" Color="Color.Secondary" Dense="true">Secondary</MudRadio>
86+
<MudRadio Option="@("tertiary")" Color="Color.Secondary" Dense="true">Tertiary</MudRadio>
8887
</MudRadioGroup>
8988
</MudField>
9089

91-
<MudColorPicker @bind-Value="_pickerTrackColor" Label="Custom Track Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" />
92-
93-
<MudColorPicker @bind-Value="_hoverColor" Label="Hover Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" />
90+
<MudColorPicker @bind-Value="_pickerTrackColor" Label="Custom Track Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
91+
<MudColorPicker @bind-Value="_hoverColor" Label="Hover Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
92+
<MudColorPicker @bind-Value="_containerHoverColor" Label="Container Hover Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
9493
</MudStack>
9594
</MudItem>
9695
</MudGrid>
@@ -105,5 +104,6 @@
105104
string _trackColor = "default";
106105
MudColor _pickerTrackColor;
107106
MudColor _hoverColor;
107+
MudColor _containerHoverColor;
108108
bool _hide;
109109
}

0 commit comments

Comments
 (0)