UIPage

The main page content element can be one of the following

ui-content, ui-datagrid, ui-tab-panel

Usage

• Page: Typically each route module should contain a single page

  <ui-page page-title="" page-class="">...</ui-page>

• Section: Define page flow

  <ui-section row-layout|column-layout>...</ui-section>

• Content: Content holder

  <ui-content padded scroll>...</ui-content>

• Loader: Load indicator overlay

  <ui-loader big|small|normal busy.bind="isLoading">...</ui-loader>

  Add loader element to pages, panels, dialog or forms

  This replaces the global app level loader for every http request

  export class MyView {
    isLoading = false;
    
    makeRequest() {
      this.isLoading = true;
      this.httpClient.get(url)
        .then(resp=> {
          doSomething();
          this.isLoading = false;
        })
        .catch(ex=> {
          showError();
          this.isLoading = false;
        });
    }
  }

• Simple Page

<ui-page page-title="" page-class="">
  <ui-content scroll padded> ... </ui-content>
</ui-page>

• Page with Toolbars

<ui-page page-title="" page-class="">
  <ui-section column-layout>
    <ui-form padded> <!-- Auto height content --> </ui-form>

    <ui-content scroll padded> ... </ui-content>

    <ui-toolbar> ... </ui-toolbar>
  </ui-section>
</ui-page>

• Page with Sidebar

<ui-page page-title="" page-class="">
  <ui-section row-layout>

    <ui-sidebar position="start" padded scroll> ... </ui-sidebar>

    <ui-content scroll padded> ... </ui-content>

  </ui-section>
</ui-page>

• Page with Complex Layout

<ui-page page-title="" page-class="">
  <ui-section row-layout>

    <ui-sidebar position="start" padded scroll> ... </ui-sidebar>

    <ui-section column-layout>
      <ui-content padded> <!-- Auto height content --> </ui-content>

      <!-- Main content of page can be content, datagrid or tabpanel -->
      <ui-datagrid scroll virtual> ... </ui-datagrid>

      <ui-toolbar> ... </ui-toolbar>
    </ui-section>

  </ui-section>
</ui-page>