pip-webui2-layouts-temp v1.0.0-beta.3

Responsive content layouts

Development responsible applications requires to organization content the way that can fit available screen from small phones to large desktops. In Line-of-Business applications with tens screens and dialogs implementaing responsive layouts can be time consuming and error prone task. To make it more productive Pip.WebUI.Layouts module provides a set of universal responsible layouts that can help to organize content in number of different ways: as full-screen content, documents, tiles, dialogs and more.

The structural parts of the application page

App bar is a special kind of toolbar that’s used for branding, navigation, search, and actions.

Side nav is left side panel that shows ideally navigation- or identity-based content.

Right nav is right side panel that should show secondary content to the main content on a page.

Mobile structure

Note that root layout has no paddings.

Real example with closed sidenav and rightnav.

Phablet structure

Real example with closed rightnav.

Tablet structure

Tablet structure with expanded side nav

Tablet structure with not expanded side nav

Real example with closed rightnav and expanded side nav.

Desktop structure

Real example with closed rightnav.

Layouts

Root layout is root component that contains floating side nav, right nav and root content. Root content contains appbar and main layout.

Main layout contains fixed sidenav and main content. Main content is placed under app bar, beetween side nav and right nav.

Card layout places small content at the center of the screen in a card. On phones the content is extended to the whole screen.

Document layout places content as a document with fixed width and full height centered on the screen. On tables and phones the content occupies the whole screen.

Tiles layout is used to present multiple items in tiles that arranged on the screen in one or several columns.

Menu layout combines menu that adds on the left hand side to switch between documents and Document layout, Tile layout. On phones the menu occupies the entire screen and user switches between menu and document back and forth.

Scrollable layout provides container for elements and makes inclusions scrollable or not scrollable.

Services

Media is used to evaluate whether a given media query is true or false given the current size of layout internal part. Internal part consist of main layout and its width calculated without including side nav and right nav.

Layouts serves to control app bar, side nav, right nav.

Installation

To install this module using npm:

npm install pip-webui2-layouts --save

Using

Structure of application using layouts:

<pip-root-layout>
  <pip-sidenav-floating >
    <!-- Side nav content of application is here -->
  </pip-sidenav-floating>
  <pip-rightnav-floating >
    <!-- Right nav content of application is here -->
  </pip-rightnav-floating>
  <pip-root-content>
    <pip-appbar >
      <!-- App bar content of application is here -->
    </pip-appbar>
    <pip-main-layout >
      <pip-sidenav-fixed >
        <pip-sidenav-expander></pip-sidenav-expander>
        <!-- Side nav content of application is here -->
      </pip-sidenav-fixed>
      <pip-main-content>
        <!-- Main content of application is here -->
         <!-- Shadows -->
         <pip-shadow visible="true" attachmentSide="left"></pip-shadow>
         <pip-shadow visible="true" attachmentSide="right"></pip-shadow>
         <!-- For example using document layout -->
         <pip-document-layout toolbar="true">
            <pip-document-content>
                <!-- Document content here -->
            </pip-document-content>
            <pip-document-footer >
                <!-- Document footer here -->
            </pip-document-footer>
         </pip-document-layout>
      </pip-main-content>
    </pip-main-layout>
  </pip-root-content>
</pip-root-layout>

Media service (subscribe on main part width changing)

this.media.asObservableMain().subscribe((change: MediaMainChange) => {
      // Do anything...
      // MediaMainChange contains aliases - string array of active at this moment media query aliases
});

Media service in template (add media service to component before)

<div *ngIf="media.isMainActive('lt-sm')">
    <!-- Show current div only for phablet and mobile -->
</div>

Media queries in styles

In component's styles:

::ng-deep .pip-xs .xs-black {
    background: black;
}

In component's template:

<div class="xs-black">
    <!-- Black background on mobile screen -->
</div>

License

This module is released under MIT license and totally free for commercial and non-commercial use.