libs/upp-wdgt/src/components/upp-header/upp-header.ts
A reusable header component for panels in an Ionic application.
The UppHeaderComponent is designed to serve as a customizable header
with support for a menu button, dynamic content, and action buttons.
<upp-header [menu]="'show'">
<upp-header-content>
<ion-label>Main Header</ion-label>
</upp-header-content>
<upp-header-buttons>
<ion-button (click)="onEdit()">Edit</ion-button>
<ion-button (click)="onDelete()">Delete</ion-button>
</upp-header-buttons>
</upp-header>See UppHeaderContentComponent See UppHeaderButtonsComponent
| selector | upp-header |
| styleUrls | ./upp-header.scss |
| templateUrl | ./upp-header.html |
Properties |
|
Inputs |
Accessors |
constructor(view: viewService)
|
||||||||
|
Creates an instance of
Parameters :
|
| color |
Type : string
|
Default value : 'warning'
|
|
Determines the header background color (primary, success, warning..). |
| height |
Type : string
|
Default value : '50px'
|
|
Determines the header height. |
| lines |
Type : string | null
|
Default value : null
|
|
Determines the color of the bottom border (primary, success, warning..). null for no border at all |
| Public view |
Type : viewService
|
|
- The service that provides information about the current view (e.g., mobile or desktop).
|
| ShowMenu |
getShowMenu()
|
|
Indicates whether the menu button should be displayed based on the |
<ion-item class="header" [color]="color" lines="none"
[ngStyle]="{ '--min-height': height, 'border-bottom': lines ? '3px solid var(--ion-color-' + lines + ')' : 'none' }"
[ngClass]="{ 'mobile': view.Mobile, 'light': view.LightTheme }">
<ion-buttons class="menu-icon" *ngIf="ShowMenu" slot="start" >
<ion-menu-button uppDataid="main-menu-button" auto-hide="true"></ion-menu-button>
</ion-buttons>
<ng-content select="upp-header-title"></ng-content>
<ng-content select="upp-header-content"></ng-content>
<ion-buttons slot="end">
<ng-content></ng-content>
</ion-buttons>
</ion-item>
./upp-header.scss
:host {
ion-item.header {
position: relative;
--padding-start: 0px;
--inner-padding-start: 15px;
--padding-end: 0px;
--inner-padding-end: 5px;
&.border {
border-bottom: 3px solid red;
}
&.mobile {
--inner-padding-start: 0px;
ion-buttons {
margin-right: 5px;
}
}
ion-buttons.menu-icon {
margin-right: 0px;
}
/************************************/
/* TITLE, CONTENT, BUTTONS */
/************************************/
::ng-deep upp-header-title {
ion-label {
font-size: var(--upp-font-size, 15px);
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: inherit;
}
}
::ng-deep upp-header-button {
ion-button {
margin: 0px;
ion-icon {
font-size: 22px;
color: inherit;
}
&.small {
--padding-top: 0px;
--padding-bottom: 0px;
--padding-start: 0px;
--padding-end: 0px;
height: 40px;
width: 40px;
border-radius: 50%;
background: var(--ion-color-light);
color: var(--ion-color-light-contrast);
ion-icon {
font-size: 38px;
}
}
&.large {
height: 40px;
width: 40px;
margin-left: 2px;
border-radius: 50%;
border: 1px solid var(--ion-color-light-contrast);
background: var(--ion-color-light);
color: var(--ion-color-light-contrast);
ion-icon {
font-size: 38px;
}
}
}
}
::ng-deep upp-header-content {
ion-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: inherit;
}
}
}
}