NgWireframe

This library provides a wireframe for Angular applications.

Usage

Theming

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

Wireframe

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:

<ppw-wireframe [navigationItems]="getNavigationItems()" [sidebarOptions]="sidebarOptions" [toolbarHeightPx]="60" [hideSidenavWhenNoNavigationItems]="true" [showBreadcrumb]="true">
    <ng-container ppw-toolbar-left-content><img
            class="toolbar-left-logo"
            ngSrc="{{ toolbarLogoUrl() }}"
            alt="Logo"
            height="{{ toolbarLogoHeight() }}"
            width="{{ toolbarLogoWidth() }}"
            priority="eager"
    /></ng-container>
    <ng-container ppw-toolbar-right-content><mat-icon>person</mat-icon></ng-container>
    <ng-container ppw-sidebar-top-content></ng-container>
    <ng-container ppw-sidebar-bottom-content><div class="version-info"><div>v0.0.2</div></div></ng-container>
    <ng-container ppw-breadcrumb-home><a routerLink="/" class="ppw-home-page-breadcrumb">Go Home</a></ng-container>
</ppw-wireframe>

Logo

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

Navigation items

Navigation links can be added using navigationItems.