jqwidgets-scripts-custom/demos/Angular/dockinglayout/fluidsize/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxDockingLayout [theme]="'material'" #dockingLayoutReference [width]="'100%'" [height]="'90%'" [layout]="layout">
    <!--The panel content divs can have a flat structure-->
    <!--documentGroup-->
    <div data-container="Document1Panel">
      Document 1 content
    </div>
    <div data-container="Document2Panel">
      Document 2 content
    </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel">
      List of errors
    </div>
    <div data-container="OutputPanel">
      Output
    </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel">
      Solution structure
    </div>
    <div data-container="PropertiesPanel">
      List of properties
    </div>
</jqxDockingLayout>