Skip to content
This repository was archived by the owner on Oct 3, 2022. It is now read-only.

Commit a4627af

Browse files
authored
Create README.md
1 parent 390d239 commit a4627af

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# MudBlazor.MudScrollbar
2+
A MudBlazor extension package that styles the scrollbars throughout the application.
3+
4+
## Usage
5+
Use the MudScrollbar as a component:
6+
7+
```
8+
<MudScrollbar />
9+
```
10+
11+
It doesn't matter where you use the component. You can place it start, end or whatever else. It overrides the native scrollbar.
12+
13+
## Selector
14+
MudScrollbar communicates with `Selector` parameter. If you set it null or empty, it means all scrollbars will affect in the application (while the razor page is loaded,
15+
so its better to place it in Layout page to use between pages).
16+
<br /><br />
17+
Selector both supports id and class selectors in CSS. So both usage is valid (be sure that id selector starts with "#" and class selector starts with "."):
18+
19+
```
20+
<MudScrollbar Selector="#id1" />
21+
<div id="id1" />
22+
```
23+
24+
```
25+
<MudScrollbar Selector=".id2" />
26+
<div class="id2" />
27+
```
28+
As you see, MudScrollbar affects all scrollbars which container's id or class match the selector.
29+
<br /><br />
30+
With `Selector` property, multiple custom scrollbars in a single page is supported.
31+
32+
## Supported Browsers
33+
The parameters works with webkit based browsers like Edge, Chrome, Opera and Safari.
34+
<br /><br />
35+
Firefox has different scrollbar mechanism, so the parameters doesn't work for firefox. MudScrollbar has `FirefoxStyle` parameter to adding styles manually.
36+
37+
## Example
38+
This video shows some parameters that how to change scrollbar's width, color and thumb styles.
39+
40+
41+
https://user-images.githubusercontent.com/78308169/193427540-d85b595d-defb-4312-885d-392179f91344.mp4
42+
43+
## How to set MudSelect and MudAutocomplete's scrollbar styles?
44+
You need to add class to `ListClass` parameter. It should like this:
45+
46+
```
47+
<MudScrollbar Selector=".id1" />
48+
<MudSelect ListClass="id1" />
49+
```

0 commit comments

Comments
 (0)