Descripción general del administrador de muelle React
Infragistics React Dock Manager proporciona un medio para administrar el diseño de su aplicación a través de paneles, lo que permite a sus usuarios finales personalizarla aún más fijando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.
Ejemplo React Dock Manager
Este ejemplo muestra la mayoría de las funcionalidades y opciones de acoplamiento de IgrDockManager
que puede usar en su aplicación.
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" ;
declare global {
namespace JSX {
interface IntrinsicElements {
"igc-dockmanager" : any ;
}
}
}
defineCustomElements();
export default class DockManagerOverview extends React.Component {
public dockManager: IgcDockManagerComponent;
public render (): JSX .Element {
return (
<div className ="container sample" >
<igc-dockmanager id ="dockManager" >
<div slot ="content1" className ="dockManagerContent" > Content 1 </div >
<div slot ="content2" className ="dockManagerContent" > Content 2 </div >
<div slot ="content3" className ="dockManagerContent" > Content 3 </div >
<div slot ="content4" className ="dockManagerContent" > Content 4 </div >
<div slot ="content5" className ="dockManagerContent" > Content 5 </div >
<div slot ="content6" className ="dockManagerContent" > Content 6 </div >
<div slot ="content7" className ="dockManagerContent" > Content 7 </div >
<div slot ="content8" className ="dockManagerContent" > Content 8 </div >
<div slot ="content9" className ="dockManagerContent" > Content 9 </div >
</igc-dockmanager >
</div >
);
}
public createContentPane(contentID: string , paneHeader: string ): any {
const pane = {
header: paneHeader,
type: IgcDockManagerPaneType.contentPane,
contentId: contentID
};
return pane;
}
public createSplitPane(orientation: IgcSplitPaneOrientation, contentPanes: any [], size?: number ): any {
const pane = {
type: IgcDockManagerPaneType.splitPane,
orientation: orientation,
panes: contentPanes,
size: size
};
return pane;
}
public createTabPane(orientation: IgcSplitPaneOrientation, contentPanes: any [], size?: number ): any {
const pane = {
type: IgcDockManagerPaneType.documentHost,
size: size,
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: orientation,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
panes: contentPanes
}
]
}
};
return pane;
}
public componentDidMount() {
const pane1 = this .createContentPane('content1' , 'Content Pane 1' );
const pane2 = this .createContentPane('content2' , 'Unpinned Pane 1' );
pane2.isPinned = false ;
const pane3 = this .createContentPane('content3' , 'Document 1' );
const pane4 = this .createContentPane('content4' , 'Document 2' );
const contentPane5 = this .createContentPane('content5' , 'Unpinned Pane 2' );
contentPane5.isPinned = false ;
const pane6 = this .createContentPane('content6' , 'Tab 1' );
const pane7 = this .createContentPane('content7' , 'Tab 2' );
const pane8 = this .createContentPane('content8' , 'Content Pane 2' );
const pane9 = this .createContentPane('content9' , 'Floating Pane' );
const tabPane1 = this .createTabPane(IgcSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200 );
const splitPane1 = this .createSplitPane(IgcSplitPaneOrientation.vertical, [ pane1, pane2 ]);
const splitPane2 = this .createSplitPane(IgcSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200 );
this .dockManager = document.getElementById("dockManager" ) as IgcDockManagerComponent;
this .dockManager.layout = {
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [
splitPane1,
splitPane2,
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 200 ,
panes: [ pane6, pane7 ]
},
pane8
]
}
]
},
floatingPanes: [
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
floatingHeight: 150 ,
floatingWidth: 250 ,
floatingLocation: { x: 300 , y: 200 },
panes: [ pane9 ]
}
]
};
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<DockManagerOverview /> );
tsx コピー
.dockManagerContent {
padding : 0.5rem ;
height : calc (100% - 1rem );
width : calc (100% - 1rem );
display : flex;
flex-direction : column;
}
.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 esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for React y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Para instalar el paquete Dock Manager ejecute el siguiente comando:
npm install --save igniteui-dockmanager
cmd
Luego es necesario importar y llamar a la función defineCustomElements() :
import { defineCustomElements } from 'igniteui-dockmanager/loader' ;
defineCustomElements();
ts
A continuación se explica cómo agregar un detector de eventos para el evento PaneClose
:
this .dockManager.addEventListener('paneClose' , ev => console .log(ev.detail));
ts
Personalización
El componente Dock Manager ofrece la opción de personalizar todos los botones mediante ranuras y piezas. Para cambiar cualquiera de los botones simplemente tienes que definir tu propio elemento dentro del Dock Manager y establecer el atributo de ranura en el identificador correspondiente.
Utilicemos estas ranuras y piezas para crear un diseño personalizado de Dock Manager. Primero, proporcionaremos nuestros propios íconos, usando las ranuras closeButton
, maximizeButton
, minimizeButton
, pinButton
y unpinButton
:
Luego, usaremos las partes expuestas en nuestra hoja de estilo. De esta manera tenemos control total del estilo del componente:
igc-dockmanager::part (unpinned-tab-area) {
background : #bee9ec ;
}
igc-dockmanager::part (unpinned-tab-area--left ) {
border-right : 1px dashed #004d7a ;
}
igc-dockmanager::part (unpinned-tab-area--bottom ) {
border-top : 1px dashed #004d7a ;
}
igc-dockmanager::part (tab-header -close-button ),
igc-dockmanager::part (pane-header -close-button ) {
background-color : #e73c7e ;
}
igc-dockmanager::part (pane-header -pin-button ),
igc-dockmanager::part (pane-header -unpin-button ) {
background : rgb (218 , 218 , 218 );
border : none;
width : 24px ;
height : 24px ;
color : #fff ;
}
igc-dockmanager::part (tabs-maximize-button ),
igc-dockmanager::part (tabs-minimize-button ),
igc-dockmanager::part (pane-header -minimize-button ),
igc-dockmanager::part (pane-header -maximize-button ) {
width : 24px ;
height : 24px ;
border : none;
transition : opacity 250ms ease-in-out;
opacity : 0.3 ;
margin-right : 15px ;
margin-top : -5px ;
margin-left : 0px ;
}
css
Si todo ha ido bien, ahora deberíamos tener un DockManager con iconos y área de pestañas personalizados. Echemos un vistazo:
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" ;
declare global {
namespace JSX {
interface IntrinsicElements {
"igc-dockmanager" : any ;
}
}
}
defineCustomElements();
export default class DockManagerOverview extends React.Component {
public dockManager: IgcDockManagerComponent;
public render (): JSX .Element {
return (
<div className ="container sample" >
<igc-dockmanager id ="dockManager" >
<div slot ="content1" className ="dockManagerContent" > Content 1 </div >
<div slot ="content2" className ="dockManagerContent" > Content 2 </div >
<div slot ="content3" className ="dockManagerContent" > Content 3 </div >
<div slot ="content4" className ="dockManagerContent" > Content 4 </div >
<div slot ="content5" className ="dockManagerContent" > Content 5 </div >
<div slot ="content6" className ="dockManagerContent" > Content 6 </div >
<div slot ="content7" className ="dockManagerContent" > Content 7 </div >
<div slot ="content8" className ="dockManagerContent" > Content 8 </div >
<div slot ="content9" className ="dockManagerContent" > Content 9 </div >
</igc-dockmanager >
</div >
);
}
public createContentPane(contentID: string , paneHeader: string ): any {
const pane = {
header: paneHeader,
type: IgcDockManagerPaneType.contentPane,
contentId: contentID
};
return pane;
}
public createSplitPane(orientation: IgcSplitPaneOrientation, contentPanes: any [], size?: number ): any {
const pane = {
type: IgcDockManagerPaneType.splitPane,
orientation: orientation,
panes: contentPanes,
size: size
};
return pane;
}
public createTabPane(orientation: IgcSplitPaneOrientation, contentPanes: any [], size?: number ): any {
const pane = {
type: IgcDockManagerPaneType.documentHost,
size: size,
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: orientation,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
panes: contentPanes
}
]
}
};
return pane;
}
public componentDidMount() {
const pane1 = this .createContentPane('content1' , 'Content Pane 1' );
const pane2 = this .createContentPane('content2' , 'Unpinned Pane 1' );
pane2.isPinned = false ;
const pane3 = this .createContentPane('content3' , 'Document 1' );
const pane4 = this .createContentPane('content4' , 'Document 2' );
const contentPane5 = this .createContentPane('content5' , 'Unpinned Pane 2' );
contentPane5.isPinned = false ;
const pane6 = this .createContentPane('content6' , 'Tab 1' );
const pane7 = this .createContentPane('content7' , 'Tab 2' );
const pane8 = this .createContentPane('content8' , 'Content Pane 2' );
const pane9 = this .createContentPane('content9' , 'Floating Pane' );
const tabPane1 = this .createTabPane(IgcSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200 );
const splitPane1 = this .createSplitPane(IgcSplitPaneOrientation.vertical, [ pane1, pane2 ]);
const splitPane2 = this .createSplitPane(IgcSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200 );
this .dockManager = document.getElementById("dockManager" ) as IgcDockManagerComponent;
this .dockManager.layout = {
rootPane: {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [
splitPane1,
splitPane2,
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: [
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 200 ,
panes: [ pane6, pane7 ]
},
pane8
]
}
]
},
floatingPanes: [
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
floatingHeight: 150 ,
floatingWidth: 250 ,
floatingLocation: { x: 300 , y: 200 },
panes: [ pane9 ]
}
]
};
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<DockManagerOverview /> );
tsx コピー .dockManagerContent {
padding : 0.5rem ;
height : calc (100% - 1rem );
width : calc (100% - 1rem );
display : flex;
flex-direction : column;
}
igc-dockmanager::part (unpinned-tab-area) {
background : #bee9ec ;
}
igc-dockmanager::part (unpinned-tab-area--left ) {
border-right : 1px dashed #004d7a ;
}
igc-dockmanager::part (unpinned-tab-area--bottom ) {
border-top : 1px dashed #004d7a ;
}
igc-dockmanager::part (tab-header -close-button ),
igc-dockmanager::part (pane-header -close-button ) {
background-color : #e73c7e ;
}
igc-dockmanager::part (context-menu -unpin-button ),
igc-dockmanager::part (pane-header -pin-button ),
igc-dockmanager::part (pane-header -unpin-button ) {
background : rgb (218 , 218 , 218 );
border : none;
width : 24px ;
height : 24px ;
color : #fff ;
}
igc-dockmanager::part (tabs-maximize-button ),
igc-dockmanager::part (tabs-minimize-button ),
igc-dockmanager::part (pane-header -minimize-button ),
igc-dockmanager::part (pane-header -maximize-button ) {
width : 24px ;
height : 24px ;
border : none;
transition : opacity 250ms ease-in-out;
opacity : 0.3 ;
margin-right : 15px ;
margin-top : -5px ;
margin-left : 0px ;
}
css コピー
A continuación puede encontrar una lista que contiene los nombres de las ranuras para todos los botones, así como el mango divisor:
Nombre de la ranura
Descripción
closeButton
Los botones de cierre.
paneHeaderCloseButton
Los botones de cierre de los encabezados del panel.
tabHeaderCloseButton
Los botones de cierre de los encabezados de las pestañas.
moreTabsButton
Cuantos más botones de pestañas.
moreOptionsButton
Los botones de más opciones.
maximizeButton
Los botones de maximizar.
minimizeButton
Los botones de minimizar.
pinButton
Los botones de alfiler.
unpinButton
Los botones para desanclar.
splitterHandle
El mango divisor.
Puede encontrar la parte correspondiente a cada ranura en las Partes CSS en la sección Estilo de esta página.
Variables CSS
La siguiente tabla describe todas las variables CSS utilizadas para diseñar el componente Dock-Manager:
variable CSS
Descripción
--igc-background-color
El color de fondo del encabezado dentro del componente del navegador del panel.
--igc-accent-color
El color de fondo de los botones dentro de la parte de acciones del encabezado del panel en foco.
--igc-active-color
El color del texto y de la sombra del cuadro utilizado para los componentes en estado activo.
--igc-border-color
El color inferior del borde del componente del encabezado del panel.
--igc-font-family
La familia de fuentes del componente Dock-Manager.
--igc-dock-background
El color de fondo de los componentes del administrador del muelle, de la pestaña y del panel flotante.
--igc-dock-text
El color del texto del administrador del muelle y de los componentes del panel flotante.
--igc-pane-header-background
El color de fondo del componente del encabezado del panel.
--igc-pane-header-text
El color del texto del componente del encabezado del panel.
--igc-pane-content-background
El color de fondo del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
--igc-pane-content-text
El color del texto del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
--igc-tab-text
El color del texto del componente del encabezado de la pestaña.
--igc-tab-background
El color de fondo del componente del encabezado de la pestaña.
--igc-tab-border-color
El color del borde del componente del encabezado de la pestaña.
--igc-tab-text-active
El color del texto del componente de encabezado de pestaña seleccionado.
--igc-tab-background-active
El color de fondo del componente de encabezado de pestaña seleccionado.
--igc-tab-border-color-active
El color del borde del componente de encabezado de pestaña seleccionado.
--igc-pinned-header-background
El color de fondo del componente de encabezado del panel no fijado.
--igc-pinned-header-text
El color del texto del componente de encabezado del panel no fijado.
--igc-splitter-background
El color de fondo del componente divisor.
--igc-splitter-handle
El color de fondo del controlador divisor.
--igc-button-text
El color de los botones dentro de la parte de acciones del encabezado del panel.
--igc-flyout-shadow-color
El color de la sombra del cuadro del componente del panel de contenido.
--igc-joystick-background
El color de fondo del joystick y los componentes del indicador de acoplamiento raíz.
--igc-joystick-border-color
El color del borde del joystick y los componentes del indicador de acoplamiento de raíz.
--igc-joystick-icon-color
El color del icono del joystick y los componentes del indicador de acoplamiento raíz.
--igc-joystick-background-active
El color de fondo al pasar el cursor sobre el joystick y los componentes del indicador de acoplamiento raíz.
--igc-joystick-icon-color-active
El color del icono de desplazamiento del joystick y los componentes del indicador de acoplamiento raíz.
--igc-floating-pane-border-color
El color del borde de los paneles flotantes.
--igc-context-menu-background
El color de fondo de los elementos del menú contextual.
--igc-context-menu-background-active
El color de fondo de los elementos del menú contextual al pasar el cursor y enfocar.
--igc-context-menu-color
El color del texto de los elementos del menú contextual.
--igc-context-menu-color-active
El color del texto de los elementos del menú contextual al pasar el cursor y enfocar.
--igc-drop-shadow-background
El color de fondo de la sombra paralela.
--igc-disabled-color
El color del texto de los componentes en estado deshabilitado.
Navegación por teclado
La navegación con el teclado mejora la accesibilidad del Dock Manager y proporciona una rica variedad de interacciones para el usuario final, como navegar a través de todos los paneles, dividir la vista en múltiples direcciones acoplando el panel activo, etc.
Los atajos son los siguientes:
Unión cósmica
Cmd/Ctrl + Shift + ↑ Se acopla al top global
Cmd/Ctrl + Shift + ↓ Se acopla al fondo global
Cmd/Ctrl + Shift + → Se acopla a la derecha global
Cmd/Ctrl + Shift + ← Se acopla a la izquierda global
Shift + ↑ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada arriba
Shift + ↓ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada debajo
Shift + → Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la derecha
Shift + ← Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la izquierda
Navegando
Cmd/Ctrl + F6 o Cmd/Ctrl + → Enfoca la siguiente pestaña en el host del documento
Cmd/Ctrl + Shift + F6 o Cmd/Ctrl + ← Enfoca la pestaña anterior en el host del documento
Alt + F6 Enfoca el siguiente panel de contenido
Alt + Shift + F6 Enfoca el panel de contenido anterior
Navegador de panel
Los siguientes atajos de teclado muestran un navegador desde el cual puede recorrer paneles y documentos.
Cmd/Ctrl + F7 o Cmd/Ctrl + F8 Comienza desde el primer documento en adelante
Alt + F7 o Alt + F8 Comienza desde el primer panel en adelante
Cmd/Ctrl + Shift + F7 o Cmd/Ctrl + Shift + F8 Comienza desde el último documento hacia atrás
Alt + Shift + F7 o Alt + Shift + F8 Comienza desde el último panel hacia atrás
Otro
Alt + F3 Cierra el panel activo
Practique todas las acciones mencionadas anteriormente en la demostración de muestra.
Estilo
Dock Manager utiliza un DOM oculto para encapsular sus estilos y comportamientos. Como resultado, no puedes simplemente apuntar a sus elementos internos con los selectores CSS habituales. Es por eso que exponemos partes de componentes a las que se puede apuntar con el selector CSS::part .
igc-dockmanager::part (content -pane) {
border-radius : 10px ;
}
css
En el siguiente ejemplo, demostramos la capacidad de personalizar Dock Manager a través de algunas de las partes CSS que hemos expuesto.
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './DockManagerStyles.css' ;
import { IgcDockManagerComponent, IgcContentPane, IgcDockManagerLayout, IgcSplitPane, IgcTabGroupPane } from "@infragistics/igniteui-dockmanager" ;
import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "@infragistics/igniteui-dockmanager" ;
import { defineCustomElements } from "@infragistics/igniteui-dockmanager/loader" ;
import { IgrAvatar, IgrButton, IgrCard, IgrCardActions, IgrCardContent, IgrIcon, IgrIconButton, IgrList, IgrListItem } from "@infragistics/igniteui-react" ;
import { IgrAvatarModule, IgrButtonModule, IgrCardModule, IgrIconModule, IgrListModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrAvatarModule.register();
IgrButtonModule.register();
IgrCardModule.register();
IgrIconModule.register();
IgrListModule.register();
declare global {
namespace JSX {
interface IntrinsicElements {
"igc-dockmanager" : any ;
}
}
}
defineCustomElements();
export default class DockManagerStyling extends React.Component {
public dockManager: IgcDockManagerComponent;
public layouts: any [];
constructor (props: any ){
super (props);
this .onSampleResize = this .onSampleResize.bind(this );
this .iconRef = this .iconRef.bind(this );
}
public iconRef(icon: IgrIcon){
if (!icon){
return ;
}
const arrowDown = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 10l5 5 5-5H7z'/></svg>" ;
const arrowUp = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 14l5-5 5 5H7z'/></svg>" ;
icon.registerIconFromText("arrow-down" , arrowDown, "material" );
icon.registerIconFromText("arrow-up" , arrowUp, "material" );
}
public render (): JSX .Element {
return (
<div id ="sampleContainer" className ="container sample" >
<igc-dockmanager id ="dockManager" height ="100%" width ="100%" >
<div slot ="accountHeader" className ="header" >
<span > ACCOUNTS</span >
{}
</div >
<div slot ="accountFloatingHeader" className ="floatingHeader" >
<span > ACCOUNTS</span >
<button id ="close" className ="closeButton" >
<IgrIcon ref ={this.iconRef} name ="close" />
</button >
</div >
<div className ="dockManagerFull" slot ="content1" >
<IgrCard className ="auto-y-overflow" elevated >
<IgrCardContent >
<div className ="account-content" >
<div >
<h1 > $2980.00 </h1 >
<span className ="usd-caption" > United States Dollar</span >
</div >
<IgrAvatar className ="margin-avatar size-medium" src ="https://static.infragistics.com/xplatform/images/flags/USA.png" shape ="rounded" >
<span > USA</span >
</IgrAvatar >
</div >
</IgrCardContent >
<IgrCardActions >
<div style ={{display: "flex "}}>
<div slot ="start" >
<IgrButton className ="size-medium" variant ="fab" >
<span > Add Money</span >
</IgrButton >
</div >
<div slot ="start" >
<IgrButton className ="size-medium" variant ="fab" >
<span > Send</span >
</IgrButton >
</div >
</div >
</IgrCardActions >
</IgrCard >
</div >
<div slot ="todayTopMovers" className ="header" >
<span > TODAY'S TOP MOVERS</span >
{}
</div >
<div slot ="todayTopMoversFloatingHeader" className ="floatingHeader" >
<span > TODAY'S TOP MOVERS </span >
<button id ="close" className ="closeButton" >
<IgrIcon name ="close" />
</button >
</div >
<div className ="dockManagerFull" style ={{overflowY: "scroll "}} slot ="content2" >
<div className ="top-movers-content size-large" >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/tesla.png" shape ="circle" >
<span > TSLA</span >
</IgrAvatar >
<span > 1017 ,08 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 12 ,54 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/amc.png" shape ="circle" >
<span > AMC</span >
</IgrAvatar >
<span > 39 ,33 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 12 ,72 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/canoo.png" shape ="circle" >
<span > GOEV</span >
</IgrAvatar >
<span > 12 ,33 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 45 ,92 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/lucid.png" shape ="circle" >
<span > LCID</span >
</IgrAvatar >
<span > 58 ,14 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 29 ,42 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/nio.png" shape ="circle" >
<span > NIO</span >
</IgrAvatar >
<span > 21 ,67 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 7 ,25 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/stoneco.png" shape ="circle" >
<span > STNE</span >
</IgrAvatar >
<span > 22 ,48 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 28 ,68 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/roku.png" shape ="circle" >
<span > ROKU</span >
</IgrAvatar >
<span > 249 ,35 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 9 ,5 %</div >
</div >
<div className ="top-move-stock-item" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/maxar.png" shape ="circle" >
<span > MAXR</span >
</IgrAvatar >
<span > 33 ,14 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 8 ,12 %</div >
</div >
</div >
</div >
<div slot ="transactionsHeader" className ="header" >
<span > TRANSACTIONS</span >
{}
</div >
<div slot ="transactionsFloatingHeader" className ="floatingHeader" >
<span > TRANSACTIONS</span >
<button id ="close" className ="closeButton" >
<IgrIcon name ="close" />
</button >
</div >
<div className ="dockManagerFull" slot ="content3" >
<IgrList id ="list" className ="auto-y-overflow" >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-2.svg" shape ="circle" >
<span > AMZN</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Money added via **0000 </h2 >
<span slot ="subtitle" > 14 :40 </span >
<div slot ="end" className ="stock-price" >
<span > + 2000 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-only.svg" shape ="circle" >
<span > SET</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Sports Event Tickets</h2 >
<span slot ="subtitle" > Jun 21 , 06 :15 , Declined because your card is inactive</span >
<div slot ="end" className ="stock-price" >
<span className ="line-through" > 1017 ,08 $</span >
<span className ="light-gray-caption" > 900 ,08 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-only.svg" shape ="circle" >
<span > AT</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Airplane Tickets</h2 >
<span slot ="subtitle" > Jun 21 , 06 :15 , Declined because your card is inactive</span >
<div slot ="end" className ="stock-price" >
<span className ="line-through" > 985 ,00 $</span >
<span className ="light-gray-caption" > 980 ,00 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/building.svg" shape ="circle" >
<span > H</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Hotel</h2 >
<span slot ="subtitle" > Jun 21 , 06 :15 </span >
<div slot ="end" className ="stock-price" >
<span > - 400 ,00 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/atm.svg" shape ="circle" >
<span > ATM</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Cash at ATM 000000 </h2 >
<span slot ="subtitle" > 14 :40 </span >
<div slot ="end" className ="stock-price" >
<span > - 140 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-1.svg" shape ="circle" >
<span > U</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Utilities</h2 >
<span slot ="subtitle" > 21 /06 /2021 16 :00 </span >
<div slot ="end" className ="stock-price" >
<span > - 200 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/atm.svg" shape ="circle" >
<span > ATM</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Cash at ATM 000001 </h2 >
<span slot ="subtitle" > 10 :10 </span >
<div slot ="end" className ="stock-price" >
<span > - 280 $</span >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-2.svg" shape ="circle" >
<span > MA</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Money added via **0000 </h2 >
<span slot ="subtitle" > 14 :40 </span >
<div slot ="end" className ="stock-price" >
<span > + 2000 $</span >
</div >
</IgrListItem >
</IgrList >
</div >
<div slot ="popularStocksHeader" className ="header" >
<span > POPULAR STOCKS</span >
{}
</div >
<div slot ="popularStocksFloatingHeader" className ="floatingHeader" >
<span > POPULAR STOCKS</span >
<button id ="close" className ="closeButton" >
<IgrIcon name ="close" />
</button >
</div >
<div className ="dockManagerFull" slot ="content4" >
<IgrList id ="list" className ="auto-y-overflow" >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/tesla.png" shape ="circle" >
<span > TSLA</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Tesla</h2 >
<span slot ="subtitle" > TSLA - Electric Vehicles</span >
<div slot ="end" className ="stock-price" >
<span > 1017 ,08 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 12 ,54 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/apple.png" shape ="circle" >
<span > APPL</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Apple</h2 >
<span slot ="subtitle" > APPL - iPhones and Macs</span >
<div slot ="end" className ="stock-price" >
<span > 150 ,47 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 0 ,2 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/nio.png" shape ="circle" >
<span > NIO</span >
</IgrAvatar >
</div >
<h2 slot ="title" > NIO</h2 >
<span slot ="subtitle" > NIO - Electric Vehicles</span >
<div slot ="end" className ="stock-price" >
<span > 40 ,07 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 7 ,25 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/amazon.png" shape ="circle" >
<span > AMZN</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Amazon</h2 >
<span slot ="subtitle" > AMZN - E-Commerce</span >
<div slot ="end" className ="stock-price" >
<span > 3582 ,32 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 2 ,68 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/gme.png" shape ="circle" >
<span > GME</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Game Stop</h2 >
<span slot ="subtitle" > GME - Video Games Retail</span >
<div slot ="end" className ="stock-price" >
<span > 205 ,60 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 5 ,96 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/amc.png" shape ="circle" >
<span > AMC</span >
</IgrAvatar >
</div >
<h2 slot ="title" > AMC</h2 >
<span slot ="subtitle" > AMC - Entertainment</span >
<div slot ="end" className ="stock-price" >
<span > 39 ,33 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 12 ,72 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/microsoft.png" shape ="circle" >
<span > MSFT</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Microsoft</h2 >
<span slot ="subtitle" > MSFT - Tech Giant</span >
<div slot ="end" className ="stock-price" >
<span > 335 ,66 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 0 ,39 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/spce.png" shape ="circle" >
<span > SPCE</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Virgin Galactic</h2 >
<span slot ="subtitle" > SPCE - Space Tourism</span >
<div slot ="end" className ="stock-price" >
<span > 18 ,90 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 1 ,66 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/pfizer.png" shape ="circle" >
<span > PFE</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Pfizer</h2 >
<span slot ="subtitle" > PFE - Pharmaceuticals</span >
<div slot ="end" className ="stock-price" >
<span > 49 ,43 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 0 ,60 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/google.png" shape ="circle" >
<span > GOOGL</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Alpabet (Class A)</h2 >
<span slot ="subtitle" > GOOGL - Tech Giant</span >
<div slot ="end" className ="stock-price" >
<span > 2972 ,88 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 0 ,02 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/meta.png" shape ="circle" >
<span > FB</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Meta Platforms</h2 >
<span slot ="subtitle" > FB - Tech Giant</span >
<div slot ="end" className ="stock-price" >
<span > 347 ,86 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 2 ,04 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/palantir.png" shape ="circle" >
<span > PLTR</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Palantir</h2 >
<span slot ="subtitle" > PLTR - Data Analytics</span >
<div slot ="end" className ="stock-price" >
<span > 23 ,30 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 2 ,06 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/aa.png" shape ="circle" >
<span > AAL</span >
</IgrAvatar >
</div >
<h2 slot ="title" > American Airlines</h2 >
<span slot ="subtitle" > AAL - Airline Service</span >
<div slot ="end" className ="stock-price" >
<span > 20 ,45 $</span >
<div className ="stock-item-movement-up" > <IgrIcon name ="arrow-up" collection ="material" > </IgrIcon > 0.79 %</div >
</div >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://static.infragistics.com/xplatform/images/company/netflix.png" shape ="circle" >
<span > NFLX</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Netflix</h2 >
<span slot ="subtitle" > NFLX - TV Streaming</span >
<div slot ="end" className ="stock-price" >
<span > 679 ,39 $</span >
<div className ="stock-item-movement-down" > <IgrIcon name ="arrow-down" collection ="material" > </IgrIcon > 0 ,47 %</div >
</div >
</IgrListItem >
</IgrList >
</div >
<div slot ="cardsHeader" className ="header" >
<span > PHYSICAL CARDS</span >
{}
</div >
<div slot ="cardsFloatingHeader" className ="floatingHeader" >
<span > TODAY'S TOP MOVERS</span >
<button id ="close" className ="closeButton" >
<IgrIcon name ="close" />
</button >
</div >
<div className ="dockManagerFull" slot ="content5" >
<IgrCard className ="auto-y-overflow" elevated >
<IgrCardContent >
<IgrButton className ="add-card-btn size-small" variant ="flat" >
<span > + Add Card</span >
</IgrButton >
<IgrList id ="list" className ="auto-y-overflow" >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/mastercard.svg" shape ="circle" >
<span > MC</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Standard **0000 </h2 >
<span slot ="subtitle" > Expires on 11 /26 </span >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/visa.svg" shape ="circle" >
<span > VISA</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Rose gold **0000 </h2 >
<span slot ="subtitle" > Expires on 11 /24 </span >
</IgrListItem >
<IgrListItem >
<div slot ="start" >
<IgrAvatar src ="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/visa.svg" shape ="circle" >
<span > VISA</span >
</IgrAvatar >
</div >
<h2 slot ="title" > Virtual card **0000 </h2 >
<span slot ="subtitle" > Expires on 10 /22 </span >
</IgrListItem >
</IgrList >
</IgrCardContent >
</IgrCard >
</div >
</igc-dockmanager >
</div >
);
}
public getContentPane(header: string , contentId: string , headerId: string , floatingHeaderId: string ): IgcContentPane {
const pane : IgcContentPane = {
type: IgcDockManagerPaneType.contentPane,
header: header,
contentId: contentId,
headerId: headerId,
floatingHeaderId: floatingHeaderId,
isPinned: true ,
allowMaximize: false ,
allowPinning: false ,
allowClose: false
};
return pane;
}
public getLayout1() : IgcDockManagerLayout{
const accountPane = this .getContentPane("ACCOUNTS" , "content1" , "accountHeader" , "accountFloatingHeader" );
const topMoversPane = this .getContentPane("TODAY'S TOP MOVERS" , "content2" , "todayTopMovers" , "todayTopMoversFloatingHeader" );
const transactionsPane = this .getContentPane("TRANSACTIONS" , "content3" , "transactionsHeader" , "transactionsFloatingHeader" );
const popularStocksPane = this .getContentPane("POPULAR STOCKS" , "content4" , "popularStocksHeader" , "popularStocksFloatingHeader" );
const cardsPane = this .getContentPane("PHYSICAL CARDS" , "content5" , "cardsHeader" , "cardsFloatingHeader" );
const splitPane1 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: []
};
const splitPane2 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane3 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 300 ,
panes: []
};
const splitPane4 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane5 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane6 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 130 ,
panes: []
};
const splitPane7 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 200 ,
panes: []
};
splitPane4.panes.push(accountPane);
splitPane4.panes.push(cardsPane);
splitPane5.panes.push(transactionsPane);
splitPane6.panes.push(topMoversPane);
splitPane7.panes.push(popularStocksPane);
splitPane3.panes.push(splitPane4);
splitPane3.panes.push(splitPane5);
splitPane2.panes.push(splitPane3);
splitPane2.panes.push(splitPane6);
splitPane1.panes.push(splitPane2);
splitPane1.panes.push(splitPane7);
const layout : IgcDockManagerLayout = {
rootPane: splitPane1
}
return layout;
}
public getLayout2() : IgcDockManagerLayout
{
const accountPane = this .getContentPane("ACCOUNTS" , "content1" , "accountHeader" , "accountFloatingHeader" );
const topMoversPane = this .getContentPane("TODAY'S TOP MOVERS" , "content2" , "todayTopMovers" , "todayTopMoversFloatingHeader" );
const transactionsPane = this .getContentPane("TRANSACTIONS" , "content3" , "transactionsHeader" , "transactionsFloatingHeader" );
const popularStocksPane = this .getContentPane("POPULAR STOCKS" , "content4" , "popularStocksHeader" , "popularStocksFloatingHeader" );
const cardsPane = this .getContentPane("PHYSICAL CARDS" , "content5" , "cardsHeader" , "cardsFloatingHeader" );
const splitPane1 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: []
};
const splitPane2 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane3 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 300 ,
panes: []
};
const splitPane4 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane5 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300 ,
panes: []
};
const splitPane6 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 130 ,
panes: []
};
const tabGroupPane1 : IgcTabGroupPane =
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 100 ,
panes: []
};
tabGroupPane1.panes.push(accountPane);
tabGroupPane1.panes.push(cardsPane);
splitPane4.panes.push(tabGroupPane1);
splitPane4.panes.push(transactionsPane);
splitPane5.panes.push(popularStocksPane);
splitPane6.panes.push(topMoversPane);
splitPane3.panes.push(splitPane4);
splitPane3.panes.push(splitPane5);
splitPane2.panes.push(splitPane3);
splitPane2.panes.push(splitPane6);
splitPane1.panes.push(splitPane2);
const layout : IgcDockManagerLayout = {
rootPane: splitPane1
};
return layout;
}
public getLayout3() : IgcDockManagerLayout
{
const accountPane = this .getContentPane("ACCOUNTS" , "content1" , "accountHeader" , "accountFloatingHeader" );
const topMoversPane = this .getContentPane("TODAY'S TOP MOVERS" , "content2" , "todayTopMovers" , "todayTopMoversFloatingHeader" );
const transactionsPane = this .getContentPane("TRANSACTIONS" , "content3" , "transactionsHeader" , "transactionsFloatingHeader" );
const popularStocksPane = this .getContentPane("POPULAR STOCKS" , "content4" , "popularStocksHeader" , "popularStocksFloatingHeader" );
const cardsPane = this .getContentPane("PHYSICAL CARDS" , "content5" , "cardsHeader" , "cardsFloatingHeader" );
const splitPane1 : IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
panes: []
};
const tabGroupPane1 : IgcTabGroupPane =
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 200 ,
panes: []
};
const tabGroupPane2 : IgcTabGroupPane =
{
type: IgcDockManagerPaneType.tabGroupPane,
size: 300 ,
panes: []
};
tabGroupPane1.panes.push(accountPane);
tabGroupPane1.panes.push(cardsPane);
tabGroupPane1.panes.push(transactionsPane);
tabGroupPane2.panes.push(popularStocksPane);
tabGroupPane2.panes.push(topMoversPane);
splitPane1.panes.push(tabGroupPane1);
splitPane1.panes.push(tabGroupPane2);
const layout : IgcDockManagerLayout = {
rootPane: splitPane1
};
return layout;
}
public onSampleResize() {
const width = this .dockManager.offsetWidth;
if (width > 1200 ) {
this .dockManager.layout = this .layouts[0 ];
}
if (width <= 1200) {
this.dockManager.layout = this.layouts[1];
}
if (width <= 800) {
this.dockManager.layout = this.layouts[2];
}
}
public componentDidMount() {
const layout1: IgcDockManagerLayout = this.getLayout1();
const layout2: IgcDockManagerLayout = this.getLayout2();
const layout3: IgcDockManagerLayout = this.getLayout3();
this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent;
window.onresize = this.onSampleResize;
this.dockManager.layout = layout1;
this.layouts = [layout1, layout2, layout3];
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DockManagerStyling /> );
tsx コピー .auto-y-overflow {
overflow-y : auto;
}
.line-through {
text-decoration : line-through;
}
.light-gray-caption {
color : lightgray;
}
.usd-caption {
font-size : 12pt ;
}
.margin-avatar {
margin : 0.5rem ;
}
:root {
--main -color : rgb (227 ,230 ,233 );
--secondary-color : rgb (113 ,115 ,116 );
--white: #ffffff ;
--font -color : rgb (113 ,115 ,116 );
display : flex;
flex-direction : column;
height : 100% ;
}
igc-dockmanager {
background-color : var (--main-color);
padding : 20px ;
}
igc-dockmanager::part (pane-header ) {
background-color : var (--white);
border-bottom : 2px solid var (--main-color);
}
igc-dockmanager::part (pane-header active) {
font-weight : 700 ;
color : var (--secondary-color);
box-shadow : none;
border-bottom : 2px solid var (--secondary-color);
}
igc-dockmanager::part (pane-header -content ) {
color : rgba (104 , 97 , 97 , 0.938 );
}
igc-dockmanager::part (splitter) {
flex : 0 0 15px ;
}
igc-dockmanager::part (splitter-base) {
background : transparent;
}
igc-dockmanager::part (splitter-base)::after {
content : none;
}
igc-dockmanager::part (content -pane) {
border-radius : 10px ;
}
igc-dockmanager::part (tab-header bottom ) {
border-bottom-right-radius : 10px ;
border-bottom-left-radius : 10px ;
background-color : var (--main-color);
}
igc-dockmanager::part (tab-header active selected bottom ) {
font-weight : 700 ;
color : var (--secondary-color);
box-shadow : inset 0 2px 0 0 var (--secondary-color);
}
igc-dockmanager::part (tab-strip-area bottom ) {
border-radius : 0 0 10px 10px ;
border-bottom : 2px solid var (--main-color);
background-color : var (--white);
}
igc-dockmanager::part (tab-strip-actions bottom ) {
display : none;
}
igc-dockmanager::part (tabs-content ) {
border-radius : 10px 10px 0 0 ;
background-color : var (--white);
}
igc-dockmanager::part (root-docking-indicator),
igc-dockmanager::part (docking-indicator) {
background-color : rgba (49 , 45 , 49 , 0.733 );
color : var (--white);
border : none;
border-radius : 5px ;
margin : 2px
}
igc-dockmanager::part (docking-preview) {
background-color : var (--main-color);
opacity : 0.7 ;
}
igc-dockmanager::part (unpinned-pane-header ) {
border-radius : 5px ;
margin-bottom : 5px ;
box-shadow : inset 0 2px 0 0 var (--secondary-color);
background-color : var (--white);
}
igc-dockmanager::part (floating-window) {
border-radius : 10px ;
}
.header {
display : flex;
flex-direction : row;
justify-content : space-between;
}
.floatingHeader {
display : flex;
justify-content : space-between;
}
.dockManagerFull {
padding : 0rem ;
margin : 0rem ;
height : 100% ;
width : 100% ;
display : flex;
flex-direction : column;
overflow : hidden;
}
.closeButton {
width : inherit;
border : none;
background : transparent;
color : var (--font-color);
font-size : 14px ;
}
.stock-price {
display : flex;
flex-direction : column;
align-items : flex-end;
}
.stock-item-movement-up {
display : flex;
color : rgb (0 ,153 ,255 );
}
.stock-item-movement-down {
display : flex;
color : rgb (233 , 80 , 164 );
}
igc-avatar::part (image) {
background-color : white;
}
igc-card {
height : inherit;
}
igc-card-content {
padding-top : 5px ;
padding-bottom : 0px ;
}
.account-content {
display : flex;
flex-direction : row;
justify-content : space-between;
}
.top-movers-content {
margin : 0 auto;
width : 100% ;
display : grid;
grid-template-columns : repeat (auto-fit, 150px );
justify-content : space-evenly;
}
.top-move-stock-item {
margin : 1rem ;
display : flex;
flex-direction : column;
align-items : center;
}
.add-card-btn {
display : flex;
justify-content : flex-end;
margin-bottom : 0.5rem ;
}
.size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
css コピー
Partes CSS
Nombre de la pieza
Descripción
content-pane
El componente del panel de contenido.
pane-header
El componente de encabezado del panel de contenido.
pane-header-content
El área de contenido del encabezado del panel de contenido.
pane-header-actions
El área de acciones del encabezado del panel de contenido.
active
Indica un estado activo. Se aplica apane-header
,pane-header-content
,pane-header-actions
,tab-header
.
floating
Indica una ubicación de panel flotante. Se aplica apane-header
,pane-header-content
,pane-header-actions
.
window
Indica una ubicación de ventana flotante. Se aplica apane-header
,pane-header-content
,pane-header-actions
.
split-pane
El componente de panel dividido.
splitter
El componente divisor de cambio de tamaño.
splitter-base
El elemento base del componente divisor.
splitter-ghost
El elemento fantasma del componente divisor.
unpinned-pane-header
El componente de encabezado del panel no fijado.
tab-header
El componente de encabezado de pestaña.
tab-header-more-options-button
El botón de más opciones en el encabezado de la pestaña.
tab-header-close-button
El botón de cerrar en el encabezado de la pestaña.
selected
Indica un estado seleccionado. Se aplica atab-header
ytab-header-close-button
.
hovered
Indica un estado suspendido. Se aplica atab-header-close-button
.
header-title
El título de texto del encabezado de la pestaña.
tab-strip-area
El área de la tira de pestañas que contiene los encabezados de las pestañas.
tab-strip-actions
El área de la barra de pestañas que contiene las acciones de la pestaña.
top
Indica una posición de pestañas superiores. Se aplica atab-header
,tab-strip-area
,tab-strip-actions
.
bottom
Indica la posición de las pestañas inferiores. Se aplica atab-header
,tab-strip-area
,tab-strip-actions
.
context-menu
El componente del menú contextual.
context-menu-item
Un elemento en el componente del menú contextual.
docking-preview
El área de vista previa del acoplamiento.
docking-indicator
El indicador de acoplamiento no raíz.
root-docking-indicator
El indicador de acoplamiento de raíz.
pane-navigator
El componente del navegador de panel.
pane-navigator-header
El área del encabezado del navegador del panel.
pane-navigator-body
El área del cuerpo del navegador de panel.
pane-navigator-items-group
Un grupo de elementos en el componente del navegador de panel.
pane-navigator-items-group-title
El elemento de título de un grupo de elementos en el navegador del panel.
pane-navigator-item
Un elemento en el navegador del panel.
pane-header-close-button
El botón de cerrar en el encabezado del panel.
pane-header-maximize-button
El botón maximizar en el encabezado del panel.
pane-header-minimize-button
El botón minimizar en el encabezado del panel.
pane-header-pin-button
El botón de anclar en el encabezado del panel.
pane-header-unpin-button
El botón para desanclar en el encabezado del panel.
tabs-maximize-button
El botón de maximizar las pestañas.
tabs-minimize-button
Las pestañas minimizan el botón.
tabs-more-button
El botón de más pestañas.
context-menu-unpin-button
El botón desanclar en el menú contextual.
context-menu-close-button
El botón de cerrar en el menú contextual.
splitter-handle
El mango divisor.
horizontal
Indica una posición horizontal. Se aplica asplitter-handle
.
vertical
Indica una posición vertical. Se aplica asplitter-handle
.
Referencias de API