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

Issue with getting MulitSplitter 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

enter image description here

enter image description here

The above screen grabs show how I set up this very basic application.

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.

So my question is, 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>