{"id":21089366,"url":"https://github.com/id1945/ngx-flexlayout","last_synced_at":"2025-05-16T12:32:09.409Z","repository":{"id":65609503,"uuid":"425534037","full_name":"id1945/ngx-flexlayout","owner":"id1945","description":"Docked management angular","archived":false,"fork":false,"pushed_at":"2023-11-26T12:11:19.000Z","size":2839,"stargazers_count":14,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-01T11:05:50.947Z","etag":null,"topics":["angular","angular16","angular2","angular6","builder","charting","dashboard","dock","dock-manager","dock-panel","dock-spawn","flexbox","flexible","grid-layout","layout","reporting","resize","smart","typescript","vscode"],"latest_commit_sha":null,"homepage":"https://id1945.github.io/ngx-flexlayout/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/id1945.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-11-07T15:01:13.000Z","updated_at":"2024-12-31T14:39:49.000Z","dependencies_parsed_at":"2023-12-16T11:07:20.916Z","dependency_job_id":"9dd05e1e-c6c7-401b-b5b8-794d7c6e98e3","html_url":"https://github.com/id1945/ngx-flexlayout","commit_stats":{"total_commits":2,"total_committers":2,"mean_commits":1.0,"dds":0.5,"last_synced_commit":"e65326257a5117d3ca77b53f158c78435286615f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-flexlayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-flexlayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-flexlayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-flexlayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/id1945","download_url":"https://codeload.github.com/id1945/ngx-flexlayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254530333,"owners_count":22086593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular16","angular2","angular6","builder","charting","dashboard","dock","dock-manager","dock-panel","dock-spawn","flexbox","flexible","grid-layout","layout","reporting","resize","smart","typescript","vscode"],"created_at":"2024-11-19T21:28:35.003Z","updated_at":"2025-05-16T12:32:04.386Z","avatar_url":"https://github.com/id1945.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-flexlayout\n\nThis library is built to provide a solution for Angular enables the creation of complex layouts consisting of panels that can be floated, docked, nested, resized, pinned, unpinned and closed. Additional components can be integrated to create an IDE-like layout.\\\nDemo on the [Stackblitz](https://stackblitz.com/edit/angular-ngx-flexlayout?file=src/app/app.component.ts) or [Codesandbox](https://codesandbox.io/s/ngx-flexlayout-tl7br?file=/src/app/app.component.ts)\n\n![Logo](https://raw.githubusercontent.com/id1945/ngx-flexlayout/master/ngx-flexlayout.gif)\n\n## Installation\nInstall `ngx-flexlayout` from `npm`:\n```bash\nnpm install ngx-flexlayout --save\n```\n\nAdd wanted package to NgModule imports:\n```typescript\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from \"@angular/platform-browser/animations\";\n\nimport { defineCustomElements } from 'ngx-flexlayout/loader';\ndefineCustomElements();\n\n@NgModule({\n  imports: [\n    BrowserAnimationsModule\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\n```\nComponent\n```typescript\npublic layout  = {\n    rootPane: {\n        type: 'splitPane',\n        orientation: 'horizontal',\n        panes: [\n            {\n                type: 'contentPane',\n                contentId: 'content1',\n                header: 'Pane 1'\n            }\n        ]\n    }\n};\n```\nHtml \n```html\n\u003cngx-flexlayout [layout]=\"layout\"\u003e\n  \u003cdiv slot=\"content1\" class=\"dockManagerContent\"\u003eContent 1\u003c/div\u003e\n  ...\n\u003c/ngx-flexlayout\u003e\n```\n## API Documentation\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eContent pane :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n  \n[\u0026#128279;](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igccontentpane.html)\nThe main building blocks in the Dock Manager are the panes. `IgcContentPane`\nProperty                |Type                       |Default    |Description\n------------------------|---------------------------|-----------|-----------------------------------------------------\nid                      |string                     |           |The id of the pane. If not set the Dock Manager generates it automatically.\ntype                    |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') |'contentPane' |The type of the pane.\ncontentId               |string                     |           |The slot attribute's value of the content element.\nheader                  |string                     |           |The text header of the content pane. Even if header slot templates are used, the text header is used for aria label.\nheaderId                |string                     |           |The slot attribute's value of the content pane header element. If not set, the `header` property value is used.\ntabHeaderId             |string                     |           |The slot attribute's value of the tab header element. If not set, the `header` property value is used.\nunpinnedHeaderId        |string                     |           |The slot attribute's value of the unpinned header element. If not set, the `header` property value is used.\nsize                    |number                     |    100    |The size of the pane relative to its sibling panes' sizes.\n\n#\n```typescript\nconst contentPane: IgcContentPane = {\n    type: 'contentPane',\n    contentId: 'content1',\n    header: 'Pane 1',\n    isPinned: false\n    tabHeaderId: 'tabHeader1'\n}\n```\n```typescript\npublic layout  = {\n    rootPane: contentPane\n};\n```\n```html\n\u003cngx-flexlayout [layout]=\"layout\"\u003e\n    \u003cdiv slot=\"content1\" class=\"dockManagerContent\"\u003eContent 1\u003c/div\u003e\n    \u003cspan slot=\"tabHeader1\"\u003ePane 1 Tab\u003c/span\u003e\n\u003c/ngx-flexlayout\u003e\n```\n  \n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eSplit pane :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n  \n[\u0026#128279;](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igcsplitpane.html)\nThe content pane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. `IgcSplitPane`\nProperty                |Type                       |Default    |Description\n------------------------|---------------------------|-----------|-----------------------------------------------------\nid                      |string                     |           |The id of the pane. If not set the Dock Manager generates it automatically.\ntype                    |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') | 'splitPane' |The type of the pane.\norientation             |string ('horizontal', 'vertical') |            |The orientation of the split pane.\npanes                   |IgcDockManagerPane[]       |         |The child panes of the split pane.\nsize                    |number                     |   100     |The size of the pane relative to its sibling panes' sizes.\nfloatingLocation        |IgcDockManagerPoint        |           |The absolute location point of the pane. Applies only for floating panes.\nfloatingWidth           |number                     |   100     |The absolute width of the pane. Applies only for floating panes.\nfloatingHeight          |number                     |   100     |The absolute height of the pane. Applies only for floating panes.\nfloatingResizable       |boolean                    |           |Determines whether floating pane resizing is allowed. Applies only for floating panes.\n\n#\n```typescript\nconst splitPane: IgcSplitPane = {\n    type: 'splitPane',\n    orientation: 'horizontal',\n    panes: [\n        {\n            type: 'contentPane',\n            contentId: 'content1',\n            header: 'Pane 1'\n        },\n        {\n            type: 'contentPane',\n            contentId: 'content2',\n            header: 'Pane 2'\n        }\n    ]\n}\n```\n```typescript\npublic layout  = {\n    rootPane: splitPane\n};\n```\n  \n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eTab group pane  :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n\n[\u0026#128279;](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igctabgrouppane.html)\nThe split pane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. `IgcTabGroupPane`\nProperty                |Type                       |Default    |Description\n------------------------|---------------------------|-----------|-----------------------------------------------------\nid                      |string                     |           |The id of the pane. If not set the Dock Manager generates it automatically.\ntype                    |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') |'tabGroupPane' |The type of the pane.\npanes                   |IgcContentPane[]           |           |The child content panes of the tab group.\nsize                    |number                     |   100     |The size of the pane relative to its sibling panes' sizes.\nselectedIndex           |number                     |           |The index of the selected tab.\n\n#\n```typescript\nconst tabGroupPane: IgcTabGroupPane = {\n    type: 'tabGroupPane',\n    panes: [\n        {\n            type: 'contentPane',\n            contentId: 'content1',\n            header: 'Pane 1'\n        },\n        {\n            type: 'contentPane',\n            contentId: 'content2',\n            header: 'Pane 2'\n        }\n    ]\n}\n```\n```typescript\npublic layout  = {\n    rootPane: tabGroupPane\n};\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eDocument host  :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n\n[\u0026#128279;](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igcdocumenthost.html)\nThe floating pane is a split pane rendered above all other ones in a floating window.`IgcDocumentHost`\nProperty                |Type                       |Default    |Description\n------------------------|---------------------------|-----------|-----------------------------------------------------\nid                      |string                     |           |The id of the pane. If not set the Dock Manager generates it automatically.\ntype                    |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') |'documentHost' |The type of the pane.\nrootPane                |IgcSplitPane               |           |The root split pane of the document host.\nsize                    |number                     |   100     |The size of the pane relative to its sibling panes' sizes.\n\n#\n```typescript\nconst docHost: IgcDocumentHost = {\n    type: 'documentHost',\n    rootPane: {\n        type: 'splitPane',\n        orientation: 'horizontal',\n        panes: [\n            {\n                type: 'tabGroupPane',\n                panes: [\n                    {\n                        type: 'contentPane',\n                        contentId: 'content1',\n                        header: 'Grid'\n                    },\n                    {\n                        type: 'contentPane',\n                        contentId: 'content4',\n                        header: 'List'\n                    }\n                ]\n            }\n        ]\n    }\n}\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFloating pane   :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n  \n  \n[\u0026#128279;](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igcdockmanagerlayout.html)\nThe tab group pane displays its child content panes as the tabs of a tab component. `IgcSplitPane`\n\n```typescript\nconst layout: IgcDockManagerLayout = {\n    rootPane: {\n        // ...\n    },\n    floatingPanes: [\n        {\n            type: 'splitPane',\n            orientation: 'horizontal',\n            floatingLocation: { x: 80, y: 80 },\n            floatingWidth: 200,\n            floatingHeight: 150,\n            floatingResizable: true,\n            panes: [\n                {\n                    type: 'contentPane',\n                    contentId: 'content1',\n                    header: 'Floating Pane 1'\n                }\n            ]\n        }\n    ]\n};\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eThemes :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n  \n \n```css\n@import '~ngx-flexlayout/dist/collection/styles/themes.css';\n```\n```html\n\u003cngx-flexlayout class=\"light-theme | dark-theme\"\u003e\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eLocalization :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n  \n\n```typescript\nimport { addResourceStrings } from 'ngx-flexlayout';\n\nconst dockManagerStringsFr: IgcDockManagerResourceStrings = {\n  close: 'Fermer',\n  // ...\n};\n\naddResourceStrings('fr', dockManagerStringsFr);\n```\n  \n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eInput :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n\nInput                   |Type                       |Default    |Description\n------------------------|---------------------------|-----------|-----------------------------------------------------\nlayout                  |IgcDockManagerLayout         |           |Gets/sets the layout configuration of the Dock Manager.\ndraggedPane             |IgcContentPane, IgcSplitPane, IgcTabGroupPane|           |Gets/sets the currently dragged pane.\ndropPosition            |IgcDockManagerPoint|          |Gets/sets the current drop position when performing custom drag/drop.\nactivePane              |IgcContentPane    |           |Gets/sets the active pane of the Dock Manager.\nallowMaximize           |boolean                    |   true    |Determines whether the end user is allowed to maximize panes.\nmaximizedPane           |IgcContentPane, IgcSplitPane, IgcTabGroupPane|           |Gets/sets the maximized pane.\nresourceStrings         |IgcDockManagerResourceStrings|             |Gets/sets the resource strings.\nallowFloatingPanesResize    |boolean                |   true     |Determines whether the end user is allowed to resize floating panes.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eOutput :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n\nInput                   |Type                       |Description\n------------------------|---------------------------|-----------------------------------------------------\nsplitterResizeStart     |CustomEvent                |An event raised when a splitter resizing starts.\nsplitterResizeEnd       |CustomEvent                |An event raised when a splitter resizing ends.\npaneHeaderConnected     |CustomEvent - IgcPaneHeaderConnectionEventArgs|An event raised when a pane header element is connected.\npaneHeaderDisconnected  |CustomEvent - IgcPaneHeaderConnectionEventArgs|An event raised when a pane header element is disconnected.\ntabHeaderConnected      |CustomEvent - IgcTabHeaderConnectionEventArgs |An event raised when a tab header element is connected.\ntabHeaderDisconnected   |CustomEvent - IgcTabHeaderConnectionEventArgs |An event raised when a tab header element is disconnected.\npaneClose               |CustomEvent - IgcPaneCloseEventArgs           |An event raised when panes are about to close.\npanePinnedToggle        |CustomEvent - IgcPanePinnedEventArgs          |An event raised when panes are about to get pinned/unpinned.\npaneDragStart           |CustomEvent - IgcPaneDragStartEventArgs       |An event raised when a pane drag starts.\npaneDragOver            |CustomEvent - IgcPaneDragOverEventArgs        |An event raised when a pane is dragged over.\npaneDragEnd             |CustomEvent - IgcPaneDragEndEventArgs         |An event raised when a pane drag ends.\nactivePaneChanged       |CustomEvent - IgcActivePaneEventArgs          |An event raised when a pane is selected/activated\nfloatingPaneResizeEnd   |CustomEvent - IgcFloatingPaneResizeEventArgs  |An event raised when a floating pane resize operation ends.\nfloatingPaneResizeStart |CustomEvent - IgcFloatingPaneResizeEventArgs      |An event raised when a floating pane resizing operation starts.\nfloatingPaneResizeMove  |CustomEvent - IgcFloatingPaneResizeMoveEventArgs  |An event raised when a floating pane resizing operation is in progress.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eMethod :hammer_and_wrench: \u003c/b\u003e\u003c/summary\u003e\n\nInput                   |Type                       |Description\n------------------------|---------------------------|-----------------------------------------------------\ndropPane                |Promise - boolean          |Performs drop of the `draggedPane` into the specified `dropPosition`. Returns true if the pane has been docked otherwise returns false.\nremovePane              |Promise - void             |Removes a pane from the layout.\naddEventListener        |void                       |\naddEventListener        |void                       |\nremoveEventListener     |void                       |\nremoveEventListener     |void                       |\n\n\u003c/details\u003e\n  \n  \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eAuthor Information\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAuthor\u003c/td\u003e\n    \u003ctd\u003eDaiDH\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ePhone\u003c/td\u003e\n    \u003ctd\u003e+84845882882\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCountry\u003c/td\u003e\n    \u003ctd\u003eVietnam\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### If you want donate for me!\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eBitcoin\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-bitcoin.png\" width=\"182px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n![Vietnam](https://raw.githubusercontent.com/id1945/id1945/master/vietnam.gif)\n  \n  \n### License\n\n[MIT License](https://github.com/id1945/ngx-flexlayout/blob/master/LICENSE). Copyright (c) 2021 DaiDH","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-flexlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fid1945%2Fngx-flexlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-flexlayout/lists"}