Skip to content
This repository has been archived by the owner on Jul 26, 2022. It is now read-only.
Adarsh Pastakia edited this page Mar 30, 2017 · 6 revisions

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>

Getting Started

Core Elements
Input Elements
  • UIButton
  • UIFieldset
  • UIForm
  • UIInputGroup
  • UIInput
  • UITextarea
  • UIDate
  • UIPhone
  • UICheckbox
  • UIRadio
  • UISwitch
  • UICombo
  • UITag
  • UIList
  • UIReorder
  • UILanguage
  • UIMarkdown
Components
API Classes
Clone this wiki locally