Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Issue with getting MultiSplitter pane to work for Microsoft Fluent Blazor

$
0
0

I've created a new stand alone blazor web app with Fluent Blazor UI after installing the Fluent blazor templates.

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

These screenshots show how I set up this very basic application:

enter image description here

enter image description here

Then I went to the home razor component and created the following:

<FluentMultiSplitter OnResize="@OnResizeHandler" Height="150px" Style="border: 1px dashed var(--accent-fill-rest);"><FluentMultiSplitterPane Size="20%" Min="50px" Max="70%">        Left Menu</FluentMultiSplitterPane><FluentMultiSplitterPane Size="50%"><FluentMultiSplitter OnResize="@OnResizeHandler" OnExpand="@OnCollapseExpand" OnCollapse="@OnCollapseExpand" Orientation="Orientation.Vertical"><FluentMultiSplitterPane Collapsible="true">                Main Content</FluentMultiSplitterPane><FluentMultiSplitterPane Collapsible="true">                Console log</FluentMultiSplitterPane></FluentMultiSplitter></FluentMultiSplitterPane><FluentMultiSplitterPane Size="30%">        Properties</FluentMultiSplitterPane></FluentMultiSplitter>@code{    void OnResizeHandler(FluentMultiSplitterResizeEventArgs e)    {    }    void OnCollapseExpand(FluentMultiSplitterEventArgs e)    {        bool willCollapse = !e.Pane.Collapsed;    }}

This is more or less a complete copy and paste of the MultiSplitter component documentation page.

However, when I run the application, and try to resize the different panes, they stay still and don't even collapse. Therefore, I believe I'm missing a little bit of code that I need to include somewhere to make it all work.

I've tried adding the following line builder.Services.AddHttpClient(); before the line with builder.Services.AddFluentUIComponents(); in the Program.cs. And I've tried adding in the _Imports.razor the using statement for the extensions @using Microsoft.FluentUI.AspNetCore.Components.Extensions. Neither of these options nor the combination has worked.

I've also tried adding the following in the App.razor:

<script src="@Assets["_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js"]" type="module" async></script>

But it also doesn't help. And this should be only for .Net 8 while my project is in .NET 10.

My question: what am I overlooking? Hopefully, it is something silly and simple.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>