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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

API 참조

IgcDockManagerComponent