JxdTech.BlazorComps.Viewport 1.2.0

Viewport

• Monitors viewport resize and reports viewport breakpoint changes.

• Current Version: 1.1.0

1. Install Package

dotnet add package JxdTech.BlazorComps.Viewport 

2. _imports.razor

@using JxdTech.BlazorComps.Viewport

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

5. (optional) Customize ViewportOptions in appsettings.json

• Default ViewportOptions

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

Changes in version 1.1.0

Implement ability to override ViewportOptions.ViewportBreakpoint using css variables

1. Reference stylesheet

    <link href="_content/JxdTech.BlazorComps.Viewport/viewport.css" rel="stylesheet">
   

   OR define your own breakpoints to work with your own stylesheet

    :root {
        --viewport-breakpoint-xs: 0;
        --viewport-breakpoint-sm: 576;
        --viewport-breakpoint-md: 768;
        --viewport-breakpoint-lg: 992;
        --viewport-breakpoint-xl: 1200;
        --viewport-breakpoint-xxl: 1400;
    }
   

2. Make configuration change using EnableCssVariables

    "ViewportOptions": {
        ...
        "EnableCssVariables": true,
        ...
    }
   

Changes in version 1.1.2

• Typo and code cleanup

Changes in version 1.2.0

• Correct casing in css variables
• Dump ViewportManager in replacement of CascadingValue of IViewport to allow for a single cascading StateHasChanged being called.
• Rename ViewportSize to ViewportBreakpoint

Example Application

View examples:

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