upp-application

The application shell component that provides the top-level layout structure for an unpispas application. It manages three content regions: a collapsible side menu, a main content area, and a detail page pane. The menu visibility is toggled via the menu input, and the shell automatically adapts to mobile and desktop viewports.

When to Use

Use upp-application as the root layout wrapper when building a full application with side navigation. It is designed to be used once per application and contains the menu, main area, and page pane through dedicated sub-components.

Demo

Source Code

HTML

<h2>upp-application — App Shell</h2>
<p class="demo-description">A miniature application shell with sidebar navigation and a main content area using <code>upp-application</code>.</p>

<div class="demo-controls">
    <ion-button size="small" (click)="toggleMenu()">Menu: {{ menuMode }}</ion-button>
</div>

<div class="app-container">
    <upp-application [menu]="menuMode">
        <upp-application-menu>
            <ion-list>
                <ion-list-header>
                    <ion-label>MyApp</ion-label>
                </ion-list-header>
                <ion-item *ngFor="let nav of navItems"
                    button
                    [lines]="nav === navItems[navItems.length - 1] ? 'none' : 'full'"
                    [color]="activeNav === nav.id ? 'light' : ''"
                    (click)="selectNav(nav.id)">
                    <ion-icon [name]="nav.icon" slot="start"></ion-icon>
                    <ion-label>{{ nav.label }}</ion-label>
                </ion-item>
            </ion-list>
        </upp-application-menu>
        <upp-application-main>
            <upp-application-page>
                <upp-header color="primary" menu="hide" height="44px">
                    <upp-header-title>{{ activeNav | titlecase }}</upp-header-title>
                    <upp-header-button>
                        <ion-icon name="notifications-outline"></ion-icon>
                    </upp-header-button>
                </upp-header>
                <div class="page-content">
                    <upp-panel size="auto" lines="show">
                        <upp-panel-header>
                            <ion-item lines="none">
                                <ion-label><strong>Welcome</strong></ion-label>
                            </ion-item>
                        </upp-panel-header>
                        <upp-panel-content>
                            <ion-item lines="none">
                                <ion-label class="ion-text-wrap">
                                    You are viewing the <strong>{{ activeNav }}</strong> section.
                                    Toggle the menu or click a nav item to see the shell respond.
                                </ion-label>
                            </ion-item>
                        </upp-panel-content>
                    </upp-panel>
                </div>
            </upp-application-page>
        </upp-application-main>
    </upp-application>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'demo-upp-application',
    templateUrl: './demo-upp-application.html',
    styleUrls: ['../demo-common.scss', './demo-upp-application.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppApplicationComponent {
    menuMode: 'show' | 'hide' = 'show';
    activeNav = 'dashboard';

    navItems = [
        { id: 'dashboard', label: 'Dashboard', icon: 'grid-outline' },
        { id: 'products', label: 'Products', icon: 'pricetag-outline' },
        { id: 'orders', label: 'Orders', icon: 'receipt-outline' },
        { id: 'settings', label: 'Settings', icon: 'settings-outline' }
    ];

    toggleMenu() {
        this.menuMode = this.menuMode === 'show' ? 'hide' : 'show';
    }

    selectNav(id: string) {
        this.activeNav = id;
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.app-container {
    display: block;
    height: 450px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.page-content {
    padding: 16px;
}

API Reference

upp-application

The root shell component. Place the three sub-components inside it to define the layout regions.

Property	Type	Default	Description
menu	'show' | 'hide'	'hide'	Controls visibility of the side menu pane.

upp-application-menu

Content-projection wrapper for the side menu. Place navigation items (e.g. ion-list) inside this component.

No inputs or outputs.

upp-application-main

Content-projection wrapper for the main content area. This is where the primary view of the application is rendered.

No inputs or outputs.

upp-application-page

Content-projection wrapper for the detail/page pane. Use this for secondary views such as detail pages that slide in alongside the main area.

No inputs or outputs.