Blazor ドック マネージャーでのフレームの埋め込み

Dock Manager コンポーネントは、ペインを使用してアプリケーションにインタラクティブなコンテンツを埋め込むためのレイアウトを提供します。

Blazor ドック マネージャーでのフレームの埋め込み例

EXAMPLE

MODULES

RAZOR

CSS

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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

API リファレンス

• IgbDockManager