Web Components ドック マネージャーでのフレームの埋め込み
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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。