|
| 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