-
Notifications
You must be signed in to change notification settings - Fork 101
Expand file tree
/
Copy pathScrollbarExample1.razor
More file actions
110 lines (99 loc) · 11 KB
/
ScrollbarExample1.razor
File metadata and controls
110 lines (99 loc) · 11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@namespace MudExtensions.Docs.Examples
@using MudBlazor.Utilities
<MudScrollbar Selector="@_selectedOption" Width="@_width" HoverWidth="@_hoverWidth" BorderRadius="@_borderRadius" Hide="_hide"
Color="@(string.IsNullOrEmpty(_pickerColor?.Value) ? _color : _pickerColor.Value)"
TrackColor="@(string.IsNullOrEmpty(_pickerTrackColor?.Value) ? _trackColor : _pickerTrackColor.Value)"
HoverColor="@_hoverColor?.Value" ContainerHoverColor="@_containerHoverColor?.Value" />
<MudGrid>
<MudItem xs="12" sm="8">
<div class="ma-0 border-solid border-2 mud-border-primary id1" style="height:400px; overflow: auto;">
<MudPaper Elevation="0" Height="2000px">
<MudStack Class="pa-4" Spacing="8">
<MudText Typo="Typo.h5" Align="Align.Left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique turpis sed porttitor efficitur. Phasellus tortor est, posuere in rhoncus quis, euismod nec sem. Suspendisse commodo faucibus enim, id maximus lacus interdum vel. In eget odio nunc. Aliquam erat volutpat. Donec efficitur mollis fermentum. Sed et volutpat magna. Curabitur eget purus pellentesque, laoreet mi sed, dapibus risus.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Nulla condimentum placerat arcu ut facilisis. Phasellus placerat ipsum neque, a congue quam ornare vel. Donec hendrerit venenatis diam, nec mollis urna sodales ac. Nulla et massa elementum, tristique ante a, placerat metus. Vestibulum sagittis congue fringilla. Curabitur mattis nibh sollicitudin nibh dignissim, in dictum orci viverra. Nunc arcu odio, aliquet et aliquet ac, venenatis vel sapien. Fusce lectus erat, porttitor vel nunc ut, consectetur commodo felis. Donec porttitor convallis augue et molestie. Suspendisse sollicitudin magna a aliquam commodo. Quisque tempus, neque id elementum eleifend, felis est sollicitudin augue, vel venenatis dui enim eu erat. Nullam tempor ultricies ante ac dapibus.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Etiam posuere lacus neque, sed dignissim tellus molestie at. Sed eleifend sem sit amet euismod blandit. Etiam sodales rhoncus velit vitae iaculis. Aliquam erat volutpat. Nunc consequat dolor quam. Morbi euismod nisi eu maximus ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis purus vel eros volutpat, at sagittis augue rhoncus. Integer varius vestibulum ante vitae luctus. Nam pellentesque leo in nunc placerat mattis. Nunc leo augue, mollis vitae nunc id, malesuada tempus sem.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Quisque scelerisque massa id purus rhoncus aliquet. Sed rhoncus ante eget massa pharetra cursus at a risus. Sed quis laoreet nulla. Nam sed ligula feugiat ante laoreet malesuada et a mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio dui. Donec nisl tortor, maximus ut eleifend eget, egestas imperdiet velit. Sed est leo, facilisis non egestas id, aliquam id libero. Cras placerat ex luctus dui bibendum, in rhoncus mi imperdiet. Sed quis sagittis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices ex ac magna iaculis scelerisque. Sed vel tristique erat. Duis maximus lacinia eleifend.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Morbi imperdiet dui sed risus dapibus vehicula. Proin sed odio purus. In gravida, nisl at vestibulum rhoncus, magna nisl placerat purus, nec egestas urna risus id quam. Ut pharetra ut ex eu porttitor. Fusce sit amet elit in sapien venenatis aliquam vel et odio. Morbi arcu enim, luctus nec bibendum nec, luctus vel velit. Cras eget ex ut velit consectetur rutrum ultricies sed tellus. In cursus suscipit accumsan. Quisque velit purus, ornare vel sem at, tincidunt commodo nisl.
</MudText>
</MudStack>
</MudPaper>
</div>
<div class="mt-4 border-solid border-2 mud-border-secondary id2" style="height:400px; overflow: auto;">
<MudPaper Elevation="0" Height="2000px">
<MudStack Class="pa-4" Spacing="8">
<MudText Typo="Typo.h5" Align="Align.Left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique turpis sed porttitor efficitur. Phasellus tortor est, posuere in rhoncus quis, euismod nec sem. Suspendisse commodo faucibus enim, id maximus lacus interdum vel. In eget odio nunc. Aliquam erat volutpat. Donec efficitur mollis fermentum. Sed et volutpat magna. Curabitur eget purus pellentesque, laoreet mi sed, dapibus risus.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Nulla condimentum placerat arcu ut facilisis. Phasellus placerat ipsum neque, a congue quam ornare vel. Donec hendrerit venenatis diam, nec mollis urna sodales ac. Nulla et massa elementum, tristique ante a, placerat metus. Vestibulum sagittis congue fringilla. Curabitur mattis nibh sollicitudin nibh dignissim, in dictum orci viverra. Nunc arcu odio, aliquet et aliquet ac, venenatis vel sapien. Fusce lectus erat, porttitor vel nunc ut, consectetur commodo felis. Donec porttitor convallis augue et molestie. Suspendisse sollicitudin magna a aliquam commodo. Quisque tempus, neque id elementum eleifend, felis est sollicitudin augue, vel venenatis dui enim eu erat. Nullam tempor ultricies ante ac dapibus.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Etiam posuere lacus neque, sed dignissim tellus molestie at. Sed eleifend sem sit amet euismod blandit. Etiam sodales rhoncus velit vitae iaculis. Aliquam erat volutpat. Nunc consequat dolor quam. Morbi euismod nisi eu maximus ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis purus vel eros volutpat, at sagittis augue rhoncus. Integer varius vestibulum ante vitae luctus. Nam pellentesque leo in nunc placerat mattis. Nunc leo augue, mollis vitae nunc id, malesuada tempus sem.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Quisque scelerisque massa id purus rhoncus aliquet. Sed rhoncus ante eget massa pharetra cursus at a risus. Sed quis laoreet nulla. Nam sed ligula feugiat ante laoreet malesuada et a mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio dui. Donec nisl tortor, maximus ut eleifend eget, egestas imperdiet velit. Sed est leo, facilisis non egestas id, aliquam id libero. Cras placerat ex luctus dui bibendum, in rhoncus mi imperdiet. Sed quis sagittis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices ex ac magna iaculis scelerisque. Sed vel tristique erat. Duis maximus lacinia eleifend.
</MudText>
<MudText Typo="Typo.h5" Align="Align.Left">
Morbi imperdiet dui sed risus dapibus vehicula. Proin sed odio purus. In gravida, nisl at vestibulum rhoncus, magna nisl placerat purus, nec egestas urna risus id quam. Ut pharetra ut ex eu porttitor. Fusce sit amet elit in sapien venenatis aliquam vel et odio. Morbi arcu enim, luctus nec bibendum nec, luctus vel velit. Cras eget ex ut velit consectetur rutrum ultricies sed tellus. In cursus suscipit accumsan. Quisque velit purus, ornare vel sem at, tincidunt commodo nisl.
</MudText>
</MudStack>
</MudPaper>
</div>
</MudItem>
<MudItem xs="12" sm="4">
<MudStack Spacing="4">
<MudCheckBox @bind-Value="_hide" Label="Hide" Color="Color.Secondary" />
<MudField Label="Selector Id" Variant="Variant.Outlined">
<MudRadioGroup T="string" @bind-Value="@_selectedOption">
<MudRadio Value="@("")" Color="Color.Secondary" Dense="true">All</MudRadio>
<MudRadio Value="@(".id1")" Color="Color.Secondary" Dense="true">Only First</MudRadio>
<MudRadio Value="@(".id2")" Color="Color.Secondary" Dense="true">Only Last</MudRadio>
</MudRadioGroup>
</MudField>
<MudNumericField @bind-Value="@_width" Variant="Variant.Outlined" Label="Scrollbar Width" Margin="Margin.Dense" />
<MudNumericField @bind-Value="@_hoverWidth" Variant="Variant.Outlined" Label="Scrollbar Width (Hover)" Clearable="true" Margin="Margin.Dense" />
<MudNumericField @bind-Value="@_borderRadius" Variant="Variant.Outlined" Label="Border Radius" Margin="Margin.Dense" />
<MudField Label="Thumb Color" Variant="Variant.Outlined">
<MudRadioGroup @bind-Value="@_color">
<MudRadio Value="@("primary")" Color="Color.Secondary" Dense="true">Primary</MudRadio>
<MudRadio Value="@("secondary")" Color="Color.Secondary" Dense="true">Secondary</MudRadio>
<MudRadio Value="@("tertiary")" Color="Color.Secondary" Dense="true">Tertiary</MudRadio>
<MudRadio Value="@("transparent")" Color="Color.Secondary" Dense="true">Transparent</MudRadio>
</MudRadioGroup>
</MudField>
<MudColorPicker @bind-Value="_pickerColor" Label="Custom Thumb Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Margin="Margin.Dense" />
<MudField Label="Track Color" Variant="Variant.Outlined">
<MudRadioGroup @bind-Value="@_trackColor">
<MudRadio Value="@("primary")" Color="Color.Secondary" Dense="true">Primary</MudRadio>
<MudRadio Value="@("secondary")" Color="Color.Secondary" Dense="true">Secondary</MudRadio>
<MudRadio Value="@("tertiary")" Color="Color.Secondary" Dense="true">Tertiary</MudRadio>
</MudRadioGroup>
</MudField>
<MudColorPicker @bind-Value="_pickerTrackColor" Label="Custom Track Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
<MudColorPicker @bind-Value="_hoverColor" Label="Hover Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
<MudColorPicker @bind-Value="_containerHoverColor" Label="Container Hover Color" ColorPickerView="ColorPickerView.Grid" Variant="Variant.Outlined" Clearable="true" Margin="Margin.Dense" />
</MudStack>
</MudItem>
</MudGrid>
@code {
string _selectedOption = "";
int _width = 12;
int? _hoverWidth;
int _borderRadius = 0;
string _color = "primary";
MudColor? _pickerColor;
string? _trackColor = "default";
MudColor? _pickerTrackColor;
MudColor? _hoverColor;
MudColor? _containerHoverColor;
bool _hide;
}