NgWireframe

This library provides a wireframe for Angular applications.

Usage

$3

The following CSS variables are available for theming. Just add them to the body selector.

#### ppw-left-sidenav

| Variable name | Extra info |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| --ppw-sidenav-close-button-color | |
| --ppw-sidenav-navigation-item-child-margin | The default margin to apply to children have a collapsible navigation item. |
| --ppw-sidenav-navigation-item-hover-background-color | |
| --ppw-sidenav-navigation-item-icon-color | |
| --ppw-sidenav-navigation-item-icon-font-size | |
| --ppw-sidenav-navigation-item-margin-left | The default margin of a navigation item. The greater the margin, the more space between two navigation items. |
| --ppw-sidenav-navigation-item-radius | The border radius applied to the navigation items, visible on hover. |
| --ppw-sidenav-navigation-item-text-color | |
| --ppw-sidenav-navigation-item-text-font-size | |
| --ppw-sidenav-navigation-item-text-font-weight | |
| --ppw-sidenav-navigation-item-children-wrapper-background | |
| --ppw-sidenav-navigation-item-children-wrapper-border | |
| --ppw-sidenav-navigation-item-children-wrapper-border-radius | |
| --ppw-sidenav-navigation-item-children-wrapper-margin | |
| --ppw-sidenav-navigation-item-children-wrapper-padding | |
| --ppw-sidenav-navigation-item-external-icon-color | The color for the icon indicating that the navigation item links to an external link. By default, this is the same as the navigation item text color. |

#### ppw-toolbar

| Variable name | Extra info |
| --------------------------------------- | ---------- |
| --ppw-toolbar-border-bottom | |
| --ppw-toolbar-box-shadow | |
| --ppw-toolbar-button-background | |
| --ppw-toolbar-button-hover-background | |
| --ppw-toolbar-button-hover-text-color | |
| --ppw-toolbar-button-padding | |
| --ppw-toolbar-page-title-font-size | |
| --ppw-toolbar-page-title-padding | |
| --ppw-toolbar-page-title-text-color | |

#### ppw-wireframe

| Variable name | Extra info |
| ----------------------------------- | ---------- |
| --ppw-app-wireframe-drawer-width | |
| --ppw-app-wireframe-drawer-border | |
| --ppw-page-container-background | |
| --ppw-sidenav-background-color | |

$3

The wireframe places an application layout with responsive left navigation and a toolbar on your web page.
You can hide the wireframe by adding a flag in the route configuration - In data add the 'showWireframe: false' flag - If this flag is not added it will by default be true and show the wireframe

#### Parameters

- navigationItems: An array of NavigationItem objects.
- sidebarOptions: The options for the sidebar.
- toolbarHeightPx: The height of the toolbar in pixels.
- hideSidenavWhenNoNavigationItems: If true, the sidenav will be hidden when there are no navigation items.
- showBreadcrumb: If true, the breadcrumb will be shown.

#### Content

Content can be added in 5 places:

- The left side of the toolbar: ppw-toolbar-left-content
- The right side of the toolbar: ppw-toolbar-right-content
- Above the navigation menu items: ppw-sidebar-top-content
- At the bottom of the drawer: ppw-sidebar-bottom-content
- The breadcrumb home link: ppw-breadcrumb-home

Complete example:

class="toolbar-left-logo"
ngSrc="{{ toolbarLogoUrl() }}"
alt="Logo"
height="{{ toolbarLogoHeight() }}"
width="{{ toolbarLogoWidth() }}"
priority="eager"
/>
person

Go Home

#### Logo

A logo can be added to the sidebar using the sidebarOptions.

#### Navigation items

Navigation links can be added using navigationItems.