Web Components Incrustación de marcos en Dock Manager
El componente Administrador de Infragistics Web Components Dock proporciona el diseño para incrustar contenido interactivo en la aplicación mediante paneles.
Web Components Ejemplo de incrustación de marcos en Dock Manager
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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.