JxdTech.BlazorComps.Viewport 1.1.0

Viewport

• Monitors viewport resize and reports viewport size 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.ViewportSizes using css variables

1. Reference stylesheet

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

   OR define your own sizes to work with your own stylesheet

    :root {
        --viewport-size-Xs: 0;
        --viewport-size-Sm: 576;
        --viewport-size-Md: 768;
        --viewport-size-Lg: 992;
        --viewport-size-Xl: 1200;
        --viewport-size-Xxl: 1400;
    }
   

2. Make configuration change using EnableCssVariables

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

Example Application

View examples:

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