jqwidgets-framework/demos/Angular/src/dockinglayout/defaultfunctionality/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxDockingLayout #dockingLayoutReference [width]="getWidth()" [height]='600' [layout]='layout'>
    <!--The panel content divs can have a flat structure-->
    <!--autoHideGroup-->
    <div data-container="ToolboxPanel">
      List of tools
    </div>
    <div data-container="HelpPanel">
      Help topics
    </div>
    <!--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>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel">
      <div id="treeContainer" style="border: none;"></div>
    </div>
    <div data-container="PropertiesPanel">
      List of properties
    </div>
    <!--floatGroup-->
    <div data-container="OutputPanel">
      <div style="font-family: Consolas;">
        <p>
          Themes installation complete.
        </p>
        <p>
          List of installed stylesheet files. Include at least one stylesheet Theme file and
          the images folder:
        </p>
        <ul>
          <li>
            styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
            be always included in your project.
          </li>
          <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
          <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
          <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
          <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
          <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
          <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
          <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
          <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
          <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
          <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
          <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
          <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
          <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
          <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
          <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
          <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
          <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
          <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
          <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
          <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
          <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
          <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
          <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
          <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
          <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
          <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
          <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
          <li>styles/images: contains images referenced in the stylesheet files</li>
        </ul>
      </div>
    </div>
</jqxDockingLayout>