ngx-flexlayout v1.1.3

ngx-flexlayout

This 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.\ Demo on the Stackblitz or Codesandbox

Installation

Install ngx-flexlayout from npm:

npm install ngx-flexlayout --save

Add wanted package to NgModule imports:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { defineCustomElements } from 'ngx-flexlayout/loader';
defineCustomElements();

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Component

public layout  = {
    rootPane: {
        type: 'splitPane',
        orientation: 'horizontal',
        panes: [
            {
                type: 'contentPane',
                contentId: 'content1',
                header: 'Pane 1'
            }
        ]
    }
};

Html

<ngx-flexlayout [layout]="layout">
  <div slot="content1" class="dockManagerContent">Content 1</div>
  ...
</ngx-flexlayout>

API Documentation

const contentPane: IgcContentPane = {
    type: 'contentPane',
    contentId: 'content1',
    header: 'Pane 1',
    isPinned: false
    tabHeaderId: 'tabHeader1'
}

public layout  = {
    rootPane: contentPane
};

<ngx-flexlayout [layout]="layout">
    <div slot="content1" class="dockManagerContent">Content 1</div>
    <span slot="tabHeader1">Pane 1 Tab</span>
</ngx-flexlayout>

const splitPane: IgcSplitPane = {
    type: 'splitPane',
    orientation: 'horizontal',
    panes: [
        {
            type: 'contentPane',
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: 'contentPane',
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

public layout  = {
    rootPane: splitPane
};

🔗 The split pane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. IgcTabGroupPane Property |Type |Default |Description ------------------------|---------------------------|-----------|----------------------------------------------------- id |string | |The id of the pane. If not set the Dock Manager generates it automatically. type |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') |'tabGroupPane' |The type of the pane. panes |IgcContentPane[] | |The child content panes of the tab group. size |number | 100 |The size of the pane relative to its sibling panes' sizes. selectedIndex |number | |The index of the selected tab.

const tabGroupPane: IgcTabGroupPane = {
    type: 'tabGroupPane',
    panes: [
        {
            type: 'contentPane',
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: 'contentPane',
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

public layout  = {
    rootPane: tabGroupPane
};

🔗 The floating pane is a split pane rendered above all other ones in a floating window.IgcDocumentHost Property |Type |Default |Description ------------------------|---------------------------|-----------|----------------------------------------------------- id |string | |The id of the pane. If not set the Dock Manager generates it automatically. type |string ('splitPane', 'contentPane', 'tabGroupPane', 'documentHost') |'documentHost' |The type of the pane. rootPane |IgcSplitPane | |The root split pane of the document host. size |number | 100 |The size of the pane relative to its sibling panes' sizes.

const docHost: IgcDocumentHost = {
    type: 'documentHost',
    rootPane: {
        type: 'splitPane',
        orientation: 'horizontal',
        panes: [
            {
                type: 'tabGroupPane',
                panes: [
                    {
                        type: 'contentPane',
                        contentId: 'content1',
                        header: 'Grid'
                    },
                    {
                        type: 'contentPane',
                        contentId: 'content4',
                        header: 'List'
                    }
                ]
            }
        ]
    }
}

const layout: IgcDockManagerLayout = {
    rootPane: {
        // ...
    },
    floatingPanes: [
        {
            type: 'splitPane',
            orientation: 'horizontal',
            floatingLocation: { x: 80, y: 80 },
            floatingWidth: 200,
            floatingHeight: 150,
            floatingResizable: true,
            panes: [
                {
                    type: 'contentPane',
                    contentId: 'content1',
                    header: 'Floating Pane 1'
                }
            ]
        }
    ]
};

import { addResourceStrings } from 'ngx-flexlayout';

const dockManagerStringsFr: IgcDockManagerResourceStrings = {
  close: 'Fermer',
  // ...
};

addResourceStrings('fr', dockManagerStringsFr);

If you want donate for me!

License

MIT License. Copyright (c) 2021 DaiDH