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