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

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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './DockManagerStyles.css';
import { IgcDockManagerComponent, IgcContentPane } from "@infragistics/igniteui-dockmanager";
import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "@infragistics/igniteui-dockmanager";
import { defineCustomElements } from "@infragistics/igniteui-dockmanager/loader";

/* eslint-disable */
declare global {
    namespace JSX {
        // tslint:disable-next-line:interface-name
        interface IntrinsicElements {
            "igc-dockmanager": any;
        }
    }
}
/* eslint-enable */

defineCustomElements();

export default class DockManagerEmbeddingFrames extends React.Component {

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

    constructor(props: any) {
        super(props);

        // this.onMapRef = this.onMapRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <igc-dockmanager id="dockManager">
                    <div className="dockManagerFull" slot="doughnutChartContainer"  >
                        <iframe className="dockManagerFrame" seamless frameBorder="0"
                        src='https://infragistics.com/webcomponents-demos/charts/doughnut-chart-overview' ></iframe>
                    </div>
                    <div className="dockManagerFull" slot="gaugeContainer" >
                        <iframe className="dockManagerFrame" seamless frameBorder="0"
                        src='https://infragistics.com/webcomponents-demos/gauges/radial-gauge-needle' ></iframe>
                    </div>
                    <div className="dockManagerFull" slot="geoMapContainer"  >
                        <iframe className="dockManagerFrame" seamless frameBorder="0"
                        src='https://infragistics.com/react-demos/maps/geo-map-binding-data-csv'  ></iframe>
                    </div>
                </igc-dockmanager>
            </div>
        );
    }

    public componentDidMount() {
        // fetching JSON data with geographic locations from public folder

        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.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 ]
                    },

                ]
            },
        };
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DockManagerEmbeddingFrames/>);
tsxコピー

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

Edit in: Codesandbox

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

API リファレンス

• IgrDockManager