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
-
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>