jqwidgets-scripts-custom/demos/Angular/splitter/multiplesplitpanelswithjqxtabs/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
             [width]="getWidth()" [height]="600" [orientation]="'horizontal'"
             [panels]="[{ size: '50%', collapsible: false }, { size: '50%' }]">
  <div>
    <jqxTabs [theme]="'material'" class="jqx-hideborder jqx-hidescrollbars" #tabs1
             [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>
  <div>
    <jqxSplitter [theme]="'material'"  #splitter
             [width]="'100%'" [height]="300"
             [panels]="[{ size: '50%' }]">
      <div>
        <jqxTabs [theme]="'material'" class="jqx-hideborder jqx-hidescrollbars" #tabs2
                 [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>
      <div>
        <jqxTabs [theme]="'material'" class="jqx-hideborder jqx-hidescrollbars" #tabs3
                 [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>