Dock Manager에 프레임을 내장하는 Web Components

Infragistics Web Components Dock Manager 구성 요소는 창을 사용하여 애플리케이션에 대화형 콘텐츠를 내장하기 위한 레이아웃을 제공합니다.

Dock Manager 예제에 프레임을 내장하는 Web Components

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import { IgcDockManagerPaneType } from 'igniteui-dockmanager';
import { IgcSplitPaneOrientation } from 'igniteui-dockmanager';
import { IgcDockManagerComponent, IgcContentPane } from 'igniteui-dockmanager';

defineCustomElements();

// <div class='dockManagerFull' slot='financialChartContainer'  >
// <iframe class='dockManagerFrame' seamless frameBorder='0'
// src='https://staging.infragistics.com/react-demos/grids/data-grid-type-heatmap-table/'  ></iframe>
// </div>

export class DockManagerEmbeddingFrames {

    private dockManager: IgcDockManagerComponent;
    private geoMapPane: IgcContentPane;
    private gaugePane: IgcContentPane;
    private doughnutChartPane: IgcContentPane;

    constructor() {

        this.gaugePane = {
            // size: 150,
            header: 'ANGULAR RADIAL GAUGE',
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'gaugeContainer'
        };

        this.doughnutChartPane = {
            // size: 150,
            header: 'WEB COMPONENT DOUGHNUT CHART',
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'doughnutChartContainer'
        };

        // this.financialChartPane = {
        //     // size: 300,
        //     header: 'REACT DATA GRID',
        //     type: IgcDockManagerPaneType.contentPane,
        //     contentId: 'financialChartContainer'
        // };

        this.geoMapPane = {
            // size: 200,
            header: 'REACT GEOGRAPHIC MAP',
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'geoMapContainer'
        };

        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.vertical,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.horizontal,
                        // size: 250,
                        panes: [  this.gaugePane, this.doughnutChartPane]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        // size: 200,
                        panes: [
                            // this.financialChartPane,
                            this.geoMapPane ]
                    },

                ],
            },
            floatingPanes: []
        };
    }
}

new DockManagerEmbeddingFrames();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerEmbeddingFrames</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-dockmanager id="dockManager">
        <div class="dockManagerFull" slot="doughnutChartContainer"  >
            <iframe class="dockManagerFrame" seamless frameBorder="0"
            src='https://infragistics.com/webcomponents-demos/charts/doughnut-chart-overview' ></iframe>
        </div>
        <div class="dockManagerFull" slot="gaugeContainer" >
            <iframe class="dockManagerFrame" seamless frameBorder="0"
            src='https://infragistics.com/webcomponents-demos/gauges/radial-gauge-needle' ></iframe>
        </div>
        <div class="dockManagerFull" slot="geoMapContainer"  >
            <iframe class="dockManagerFrame" seamless frameBorder="0"
            src='https://infragistics.com/react-demos/maps/geo-map-binding-data-csv'  ></iframe>
        </div>
    </igc-dockmanager>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html


.dockManagerContent {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}

.dockManagerFull {
    padding: 0rem;
    margin: 0rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dockManagerFrame {
    padding: 0rem;
    margin: 0rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.employeesDetailsRow {
    height: 4rem;
    display: flex;
    flex-direction: row;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: center;
}

css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

API 참조

IgcDockManagerComponent