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-border | The border applied to navigation items. | | --ppw-sidenav-navigation-item-active-background-color | The background color for the active navigation item. By default, this reuses the hover background color. | | --ppw-sidenav-navigation-item-active-border | The border applied to the active navigation item. By default, this reuses the regular navigation item border. | | --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 entirely by adding the showWireframe: false flag to the route data. If this flag is not added, the wireframe is shown by default. You can hide the toolbar while keeping the wireframe visible by adding the showToolbar: false flag to the route data. If this flag is not added, the toolbar is shown by default.

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.