Skip to content
This repository has been archived by the owner on Mar 17, 2023. It is now read-only.

JxdTech/BlazorViewport

Repository files navigation

BlazorViewport

  • Monitors viewport resize and reports breakpoint changes.


1. Install Package

dotnet add package JxdTech.BlazorViewport 

2. _imports.razor

@using BlazorViewport 

3. App.razor

// Wrap Contents of App.razor with Viewport
<Viewport>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</Viewport>

4. Index.razor / Any Component

@inherits ViewportComponentBase
  • contains Viewport:IViewport
  • Viewport has 2 properties
    1. bool IsRendered { get; }
      • Changes to true After JSRuntime is available and event listeners are registered
    2. Breakpoint Breakpoint { get; }
      • provides current breakpoint

5. (optional) Customize ViewportOptions in appsettings.json

  • Default ViewportOptions

     "ViewportOptions": {
    
         "EnableLogging": false,
    
         "NotifyOnInitialize": true,
    
         "Breakpoints" : {
             "5" : 1400, // Xxl
             "4" : 1200, // Xl
             "3" : 992, // Lg
             "2" : 768, // Md
             "1" : 576, // Sm
             "0" : 0 // Xs
         }
     }
    


Demo Application

View Demo app for simple example

  1. App.razor
    • Uses Viewport
  2. Pages/Index.razor
    • implements ViewportComponentBase
  3. appsettings.json
    • configures ViewportOptions
  4. appsettings.Development.json
    • configures Development ViewportOptions