@ppwcode/ng-wireframe

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.