UIPage - adarshpastakia/aurelia-ui-framework GitHub Wiki

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>
⚠️ **GitHub.com Fallback** ⚠️