React Dock Manager (ドック マネージャー) の概要
Infragistics React Dock Manager は、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、最大化、非表示にすることでカスタマイズできます。
React ドック マネージャーの例
この例は、アプリケーションで使用できる IgrDockManager
のほとんどの機能とドッキング オプションを示しています。
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 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 = {
// size: 150,
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, // or:
// {
// type: IgcDockManagerPaneType.splitPane,
// orientation: IgcSplitPaneOrientation.vertical,
// panes: [ pane1, pane2 ]
// },
splitPane2, // or:
// {
// type: IgcDockManagerPaneType.splitPane,
// orientation: IgcSplitPaneOrientation.vertical,
// size: 200,
// panes: [
// tabPane1,
// contentPane5
// ]
// },
{
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 ]
}
]
};
}
}
// rendering above class to the React DOM
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;
/* 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
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
ドック マネージャー パッケージをインストールするには、以下のコマンドを実行します。
npm install --save igniteui-dockmanager
cmd
次に defineCustomElements() 関数をインポートして呼び出します。
import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();
ts
PaneClose
イベントのイベント リスナーを追加する方法は以下の通りです。
this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));
ts
カスタマイズ
Dock Manager コンポーネントは、スロットとパーツを使用してすべてのボタンをカスタマイズするオプションを提供します。ボタンを変更するには、Dock Manager 内で独自の要素を定義し、slot 属性を対応する識別子に設定します。
これらのスロットとパーツを使用して、カスタマイズされた Dock Manager レイアウトを作成してみましょう。最初に、closeButton
、maximizeButton
、minimizeButton
、pinButton
、および unpinButton
スロットを使用して独自のアイコンを提供します。
次に、スタイルシートで公開されたパーツを使用します。このようにして、コンポーネントのスタイル設定を完全に制御できます。
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
すべて適切に設定できると、カスタマイズされたアイコンとタブ領域を持つ DockManager が表示されます。以下は結果です。
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 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 = {
// size: 150,
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, // or:
// {
// type: IgcDockManagerPaneType.splitPane,
// orientation: IgcSplitPaneOrientation.vertical,
// panes: [ pane1, pane2 ]
// },
splitPane2, // or:
// {
// type: IgcDockManagerPaneType.splitPane,
// orientation: IgcSplitPaneOrientation.vertical,
// size: 200,
// panes: [
// tabPane1,
// contentPane5
// ]
// },
{
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 ]
}
]
};
}
}
// rendering above class to the React DOM
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;
/* background: orange; */
}
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
以下は、すべてのボタンとスプリッター ハンドルのスロット名のリストです。
スロット名 | 説明 |
---|---|
closeButton |
閉じるボタン。 |
paneHeaderCloseButton |
ペイン ヘッダーの閉じるボタン。 |
tabHeaderCloseButton |
タブ ヘッダーの閉じるボタン。 |
moreTabsButton |
その他のタブボタン。 |
moreOptionsButton |
その他のオプションボタン。 |
maximizeButton |
最大化ボタン。 |
minimizeButton |
最小化ボタン。 |
pinButton |
ピン固定ボタン。 |
unpinButton |
ピン固定解除ボタン。 |
splitterHandle |
スプリッターのハンドル。 |
各スロットの対応するパーツは、このページのスタイル設定セクションの CSS パーツにあります。
CSS 変数
次の表では、ドック マネージャー コンポーネントのスタイル設定に使用されるすべての CSS 変数について説明します。
CSS 変数 | 説明 |
---|---|
--igc-background-color |
ペイン ナビゲーター コンポーネント内のヘッダーの背景色。 |
--igc-accent-color |
フォーカスされているペイン ヘッダー アクション パーツ内のボタンの背景色。 |
--igc-active-color |
アクティブな状態のコンポーネントに使用されるテキストとボックス シャドウの色。 |
--igc-border-color |
ペイン ヘッダー コンポーネントのボーダー下線の色。 |
--igc-font-family |
ドック マネージャー コンポーネントの font-family。 |
--igc-dock-background |
ドック マネージャー、タブ、およびフローティング ペイン コンポーネントの背景色。 |
--igc-dock-text |
ドック マネージャーおよびフローティング ペイン コンポーネントのテキストの色。 |
--igc-pane-header-background |
ペイン ヘッダー コンポーネントの背景色。 |
--igc-pane-header-text |
ペイン ヘッダー コンポーネントのテキストの色。 |
--igc-pane-content-background |
ドック マネージャーおよびタブ パネル コンポーネント内のコンテンツの背景色。 |
--igc-pane-content-text |
ドック マネージャーおよびタブ パネル コンポーネント内のコンテンツのテキストの色。 |
--igc-tab-text |
タブ ヘッダー コンポーネントのテキストの色。 |
--igc-tab-background |
タブ ヘッダー コンポーネントの背景色。 |
--igc-tab-border-color |
タブ ヘッダー コンポーネントの境界線の色。 |
--igc-tab-text-active |
選択したタブ ヘッダー コンポーネントのテキストの色。 |
--igc-tab-background-active |
選択したタブ ヘッダー コンポーネントの背景色。 |
--igc-tab-border-color-active |
選択したタブ ヘッダー コンポーネントのボーダーの色。 |
--igc-pinned-header-background |
ピン固定されていないペイン ヘッダー コンポーネントの背景色。 |
--igc-pinned-header-text |
ピン固定されていないペイン ヘッダー コンポーネントのテキストの色。 |
--igc-splitter-background |
スプリッター コンポーネントの背景色。 |
--igc-splitter-handle |
スプリッター ハンドルの背景色。 |
--igc-button-text |
ペイン ヘッダー アクション パーツ内のボタンの色。 |
--igc-flyout-shadow-color |
コンテンツ ペイン コンポーネントのボックス シャドウの色。 |
--igc-joystick-background |
ジョイスティックとルート ドッキング インジケーター コンポーネントの背景色。 |
--igc-joystick-border-color |
ジョイスティックとルート ドッキング インジケーター コンポーネントのボーダーの色。 |
--igc-joystick-icon-color |
ジョイスティックとルート ドッキング インジケーター コンポーネントのアイコンの色。 |
--igc-joystick-background-active |
ジョイスティックとルート ドッキング インジケーター コンポーネントのホバー背景色。 |
--igc-joystick-icon-color-active |
ジョイスティックとルート ドッキング インジケーター コンポーネントのホバー アイコンの色。 |
--igc-floating-pane-border-color |
フローティング ペインのボーダーの色。 |
--igc-context-menu-background |
コンテキスト メニュー項目の背景色。 |
--igc-context-menu-background-active |
ホバーおよびフォーカス時のコンテキスト メニュー項目の背景色。 |
--igc-context-menu-color |
コンテキスト メニュー項目のテキストの色。 |
--igc-context-menu-color-active |
ホバーおよびフォーカス時のコンテキスト メニュー項目のテキストの色。 |
--igc-drop-shadow-background |
ドロップ シャドウの背景色。 |
--igc-disabled-color |
無効状態のコンポーネントのテキストの色。 |
キーボード ナビゲーション
キーボード ナビゲーションは、ドック マネージャーのアクセシビリティを強化し、すべてのペインをナビゲートしたり、アクティブなペインをドッキングしてビューを複数の方向に分割したりするなど、エンドユーザーにさまざまな操作を提供します。
ショートカットは以下のとおりです。
ドッキング
- Cmd/Ctrl + Shift + ↑ グローバルの上へのドック。
- Cmd/Ctrl + Shift + ↓ グローバルの下へのドック。
- Cmd/Ctrl + Shift + → グローバルの右へのドック。
- Cmd/Ctrl + Shift + ← グローバルのの左へのドック。
- Shift + ↑ タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが上にドッキングされます。
- Shift + ↓ タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが下にドッキングされます。
- Shift + → タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが右にドッキングされます。
- Shift + ← タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが左にドッキングされます。
ナビゲーション
- Cmd/Ctrl + F6 または Cmd/Ctrl + → ドキュメント ホストの次のタブにフォーカスします。
- Cmd/Ctrl + Shift + F6 または Cmd/Ctrl + ← ドキュメント ホストの前のタブにフォーカスします。
- Alt + F6 次のコンテンツ ペインにフォーカスします。
- Alt + Shift + F6 前のコンテンツ ペインにフォーカスします。
ペイン ナビゲーター
次のキーボード ショートカットは、ペインやドキュメントをを反復できるナビゲーターを示しています。
- Cmd/Ctrl + F7 または Cmd/Ctrl + F8 最初のドキュメントから開始します。
- Alt + F7 または Alt + F8 最初のペインから開始します。
- Cmd/Ctrl + Shift + F7 または Cmd/Ctrl + Shift + F8 最後のドキュメントから逆方向に開始します。
- Alt + Shift + F7 または Alt + Shift + F8 最後のペインから逆方向に開始します。
その他
- Alt + F3 アクティブなペインを閉じます。
サンプル demo で上記のすべてのアクションを練習しましょう。
スタイル設定
ドック マネージャーは、シャドウ DOM を使用してスタイルと動作をカプセル化します。その結果、通常の CSS セレクターでその内部要素を単純にターゲットにすることはできません。そのため :: part CSS セレクターでターゲットにできるコンポーネント parts を公開しています。
igc-dockmanager::part(content-pane) {
border-radius: 10px;
}
css
次の例では、公開した CSS パーツのいくつかを使用してドック マネージャーをカスタマイズする機能を紹介します。
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();
/* eslint-disable */
declare global {
namespace JSX {
// tslint:disable-next-line:interface-name
interface IntrinsicElements {
"igc-dockmanager": any;
}
}
}
/* eslint-enable */
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>
{/* <menu-component></menu-component> */}
</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>
{/* <menu-component></menu-component> */}
</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>
{/* <menu-component></menu-component> */}
</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>
{/* <menu-component></menu-component> */}
</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>
{/* <menu-component></menu-component> */}
</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: []
};
//AccountPane, CardsPane
const splitPane4: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300,
panes: []
};
//TransactionsPane
const splitPane5: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300,
panes: []
};
//Top Movers
const splitPane6: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 130,
panes: []
};
//Popular Stocks
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: []
};
//Transactions Pane, TGP1
const splitPane4: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300,
panes: []
};
//Popular Stocks Pane
const splitPane5: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.vertical,
size: 300,
panes: []
};
//Top Movers
const splitPane6: IgcSplitPane =
{
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
size: 130,
panes: []
};
//AccountPane, CardsPane
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;
}
/* ACCOUNTS */
.account-content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* TOP MOVERS */
.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;
}
/* PHYSICAL CARDS */
.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
CSS パーツ
パーツ名 | 説明 |
---|---|
content-pane |
コンテンツ ペイン コンポーネント。 |
pane-header |
コンテンツ ペインのヘッダー コンポーネント。 |
pane-header-content |
コンテンツ ペイン ヘッダーのコンテンツ領域。 |
pane-header-actions |
コンテンツ ペイン ヘッダーのアクション領域。 |
active |
アクティブ状態を示します。pane-header 、pane-header-content 、pane-header-actions 、tab-header に適用されます。 |
floating |
フローティング ペインの配置を示します。pane-header 、pane-header-content 、pane-header-actions に適用されます。 |
window |
フローティング ウィンドウの配置を示します。pane-header 、pane-header-content 、pane-header-actions に適用されます。 |
split-pane |
スプリット ペイン コンポーネント。 |
splitter |
サイズ変更スプリッター コンポーネント。 |
splitter-base |
スプリッター コンポーネントの基本要素。 |
splitter-ghost |
スプリッター コンポーネントのゴースト要素。 |
unpinned-pane-header |
固定されていないペイン ヘッダー コンポーネント。 |
tab-header |
タブ ヘッダー コンポーネント。 |
tab-header-more-options-button |
タブ ヘッダーのその他のオプション ボタン。 |
tab-header-close-button |
タブ ヘッダーの閉じるボタン。 |
selected |
選択状態を示します。tab-header および tab-header-close-button に適用されます。 |
hovered |
ホバー状態を示します。tab-header-close-button に適用されます。 |
header-title |
タブ ヘッダーのテキスト タイトル。 |
tab-strip-area |
タブ ヘッダーを含むタブ ストリップ領域。 |
tab-strip-actions |
タブ アクションを含むタブ ストリップ領域。 |
top |
タブの上位置を示します。tab-header 、tab-strip-area 、tab-strip-actions に適用されます。 |
bottom |
タブの下位置を示します。tab-header 、tab-strip-area 、tab-strip-actions に適用されます。 |
context-menu |
コンテキスト メニュー コンポーネント。 |
context-menu-item |
コンテキスト メニュー コンポーネントの項目。 |
docking-preview |
ドッキング プレビュー地域。 |
docking-indicator |
非ルート ドッキング インジケーター。 |
root-docking-indicator |
ルート ドッキング インジケーター。 |
pane-navigator |
ペイン ナビゲーター コンポーネント。 |
pane-navigator-header |
ペイン ナビゲーターのヘッダー領域。 |
pane-navigator-body |
ペイン ナビゲーターの本体領域。 |
pane-navigator-items-group |
ペイン ナビゲーター コンポーネントの項目グループ。 |
pane-navigator-items-group-title |
ペイン ナビゲーターの項目グループのタイトル要素。 |
pane-navigator-item |
ペイン ナビゲーターの項目。 |
pane-header-close-button |
ペイン ヘッダーの閉じるボタン。 |
pane-header-maximize-button |
ペイン ヘッダーの最大化ボタン。 |
pane-header-minimize-button |
ペイン ヘッダーの最小化ボタン。 |
pane-header-pin-button |
ペイン ヘッダーのピン固定ボタン。 |
pane-header-unpin-button |
ペイン ヘッダーのピン固定解除ボタン。 |
tabs-maximize-button |
タブの最大化ボタン。 |
tabs-minimize-button |
タブの最小化ボタン。 |
tabs-more-button |
その他のタブ ボタン。 |
context-menu-unpin-button |
コンテキスト メニューのピン固定解除ボタン。 |
context-menu-close-button |
コンテキスト メニューの閉じるボタン。 |
splitter-handle |
スプリッターのハンドル。 |
horizontal |
水平位置を示します。splitter-handle に適用されます。 |
vertical |
垂直位置を示します。splitter-handle に適用されます。 |