Last active
May 4, 2021 20:42
-
-
Save conficient/ad7949066f7499483e4a99a32e45588d to your computer and use it in GitHub Desktop.
Blazor SizeCheck - puts a small badge top-right of the screen on Bootstrap 4.x - see also the DevOnly component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @* see DevOnly at https://gist.github.com/conficient/aca15e92931a15d76047cee598df2e0c *@ | |
| @* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x | |
| screen breakpoint (see https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) | |
| This component can be put into your `MainLayout.razor` template so it appears on every page. | |
| It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear. | |
| *@ | |
| <DevOnly> | |
| <div style="position:absolute; top: 10px; right: 10px;"> | |
| <span class="badge badge-primary d-none d-xl-inline">xl</span> | |
| <span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span> | |
| <span class="badge badge-dark d-none d-md-inline d-lg-none">md</span> | |
| <span class="badge badge-warning d-none d-sm-inline d-md-none">sm</span> | |
| <span class="badge badge-danger d-xs-inline d-sm-none">xs</span> | |
| </div> | |
| </DevgOnly> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment