Blazor Embedding Frames in Dock Manager
The Infragistics Blazor Dock Manager component provides you with the layout for embedding interactive content in your application using panes.
Blazor Embedding Frames in Dock Manager Example
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
<IgbDockManager @ref="dockManager" Layout="Layout" height="100%" width="100%">
<div slot="content1" class="container vertical">
<iframe src="https://infragistics.com/webcomponents-demos/charts/doughnut-chart-overview"
class="container vertical" seamless frameBorder="0" >
</iframe>
</div>
<div slot="content2" class="container vertical">
<iframe src="https://infragistics.com/webcomponents-demos/gauges/radial-gauge-needle"
class="container vertical" seamless frameBorder="0" >
</iframe>
</div>
<div slot="content3" class="container vertical">
<iframe src="https://infragistics.com/webcomponents-demos/maps/geo-map-binding-data-csv"
class="container vertical" seamless frameBorder="0" >
</iframe>
</div>
</IgbDockManager>
</div>
</div>
@code {
public IgbDockManager dockManager { get; set; }
public IgbDockManagerLayout Layout { get; set; }
protected override void OnInitialized()
{
Layout = new IgbDockManagerLayout();
Layout.RootPane = new IgbSplitPane();
Layout.RootPane.PaneType = DockManagerPaneType.SplitPane;
Layout.RootPane.Orientation = SplitPaneOrientation.Horizontal;
var splitPane1 = new IgbSplitPane
{
PaneType = DockManagerPaneType.SplitPane,
Orientation = SplitPaneOrientation.Horizontal,
Size = 300
};
var contentPane1 = new IgbContentPane
{
PaneType = DockManagerPaneType.ContentPane,
Header = "EMBEDDED RADIAL GAUGE",
ContentId = "content1",
};
var contentPane2 = new IgbContentPane
{
PaneType = DockManagerPaneType.ContentPane,
Header = "EMBEDDED DOUGHNUT CHART",
ContentId = "content2",
};
var contentPane3 = new IgbContentPane
{
PaneType = DockManagerPaneType.ContentPane,
Header = "EMBEDDED GEOGRAPHIC MAP",
ContentId = "content3",
};
Layout.RootPane.Panes.Add(splitPane1);
splitPane1.Panes.Add(contentPane1);
splitPane1.Panes.Add(contentPane2);
splitPane1.Panes.Add(contentPane3);
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。