S&box Wiki

Revision Difference

stylesheets#562657

<cat>UI.Styles</cat>⤶ <title>Using Stylesheets</title>⤶ ⤶ # Automatic loading of stylesheets⤶ ⤶ If you are using a `.razor` file you can create another file `mypanel.razor.scss` (where `mypanel` is the name of your UI panel) and it will automatically load the stylesheet and apply it to your UI.⤶ ⤶ <note>⤶ If you are using a partial class to augment the code of the generated razor class, you will need to change the extension of the file to `.razor.cs` instead of just `.cs` otherwise the automatic stylesheet loading won't work.⤶ ⤶ For example: `mypanel.razor` and `mypanel.razor.cs` will load `mypanel.razor.scss`⤶ </note>⤶ ⤶ # Manually setting stylesheet⤶ ⤶ You can use the `[Stylesheet("path/to/stylesheet.scss")]` attribute to manually set which stylesheet is used.⤶ ⤶ # Applying Styles to ⤶ ⤶ If your panel is named `MyPanel` (ie. `MyPanel.razor`) then in your scss you can define styles for a `MyPanel` element type in your `MyPanel.razor.scss` file.⤶ ⤶ ```⤶ MyPanel {⤶ width: 100%;⤶ height: 100%;⤶ }⤶ ```css