aggiunto js per leggere le dimensioni della finestra

2023-09-29 13:00:01 +02:00
parent 17ea6d7b92
commit 82a2161a80
4 changed files with 62 additions and 0 deletions
@@ -0,0 +1,53 @@
+@attribute [RenderModeAuto]
+@* @attribute [RenderModeServer] *@
+
+@inject IJSRuntime JSRuntime
+@inject HttpClient Http
+
+<div class="card">
+    <div class="card-header">
+        USERNAME
+    </div>
+    <div class="card-body">
+        <div>
+            <ul class="list-group">
+                <li class="list-group-item">@Height</li>
+                <li class="list-group-item">@Width</li>
+                <li class="list-group-item">A third item</li>
+                <li class="list-group-item">A fourth item</li>
+                <li class="list-group-item">And a fifth one</li>
+            </ul>
+        </div>
+    </div>
+
+    <button @onclick="()=>getWDim()">
+        vai
+    </button>
+
+</div>
+
+@code {
+    public int Height { get; set; } = 0;
+    public int Width { get; set; } = 0;
+
+    public class WindowDimension
+    {
+        public int Width { get; set; }
+        public int Height { get; set; }
+    }
+    // protected async override Task OnAfterRenderAsync(bool firstRender)
+    // {
+
+    // }
+    // protected async override Task OnInitializedAsync()
+    // {
+    //     await getWDim();
+    // }
+
+    protected async Task getWDim()
+    {
+        var dimension = await JSRuntime.InvokeAsync<WindowDimension>("getWindowDimensions");
+        Height = dimension.Height;
+        Width = dimension.Width;
+    }
+}
@@ -25,6 +25,7 @@
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="lib/bootstrap/js/bootstrap.bundle.js"></script>
+    <script src="lib/WindowSize.js"></script>
 </body>

 </html>
@@ -3,6 +3,8 @@
 <h3>User</h3>


+<MP_TAB.Client.Pages.User></MP_TAB.Client.Pages.User>
+
@code {

 }
@@ -0,0 +1,6 @@
+window.getWindowDimensions = function () {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight
+    };
+};