jqwidgets-scripts-custom/demos/Angular/splitter/integrationwithjqxtabs/src/app/app.component.html

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

<jqxSplitter [theme]="'material'" #splitContainer
             [panels]="[{ size: '20%' }, { size: '80%' }]"
             [orientation]="'horizontal'"
             [height]="850" [width]="getWidth()">
  <div>
    Top Panel
  </div>
  <div>
    <jqxSplitter [theme]="'material'" #splitter
                 [width]="'100%'" [height]="'100%'"
                 [panels]="[{ size: 200 }, { size: 200}]">
      <div>
        Left Panel
      </div>
      <div>
        <jqxTabs [theme]="'material'" class="jqx-hideborder jqx-hidescrollbars" #tabswidget
                 [width]="'100%'" [height]="'100%'">
          <ul>
            <li style="margin-left: 30px;">Tab 1</li>
            <li>Tab 2</li>
          </ul>
          <div>
            Content 1
          </div>
          <div>
            Content 2
          </div>
        </jqxTabs>
      </div>
    </jqxSplitter>
  </div>
</jqxSplitter>