libs/upp-wdgt/src/components/upp-dropdown/upp-dropdown.ts
Main dropdown component that handles the projection and rendering of dropdown content, separators, and title. The component preserves the order of the child elements and dynamically renders them.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | upp-dropdown |
| styleUrls | ./upp-dropdown.scss |
| templateUrl | ./upp-dropdown.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(change: ChangeDetectorRef)
|
||||||||
|
Constructor for the UppDropdownComponent.
Parameters :
|
| expand |
Type : boolean
|
Default value : false
|
|
Indicates whether the dropdown is expanded or collapsed. |
| Closed |
Type : EventEmitter
|
|
Emits an event when the dropdown is closed. |
| OnCloseDropdown |
OnCloseDropdown()
|
|
Closes the dropdown and triggers the
Returns :
void
|
| _title |
Type : UppDropdownTitleComponent | null
|
Default value : null
|
Decorators :
@ContentChild(UppDropdownTitleComponent)
|
| HasTitle |
getHasTitle()
|
<div class="fixed" *ngIf="expand" tabindex="0" (click)="OnCloseDropdown()" (keydown.esc)="OnCloseDropdown()"></div>
<div style="position: relative">
<div class="dropdown" [ngClass]="{ 'visible': expand }" role="menu">
<ng-content select="upp-dropdown-title"></ng-content>
<div *ngIf="!HasTitle" style="clear:both; height:20px"></div>
<ion-list>
<ng-content select="upp-dropdown-content, upp-dropdown-separate"></ng-content>
</ion-list>
<div style="clear:both; height:20px"></div>
</div>
</div>
./upp-dropdown.scss
:host {
.fixed {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dropdown {
position: absolute;
width: 100%;
padding: 0px 10px;
background: var(--ion-color-light);
z-index: 101;
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.2s ease-in-out;
&.visible {
transform: scaleY(1);
}
ion-item {
--padding-start: 10px;
--background: transparent;
}
ion-list {
background: var(--ion-background-color);
margin: 0px 10px;
padding: 0px 0px;
border-radius: 10px;
overflow: hidden;
}
}
/* encapsulation: items inside upp-dropdown-title */
::ng-deep upp-dropdown-title {
ion-item {
--background: transparent;
}
}
/* encapsulation: items inside upp-dropdown-content */
::ng-deep .dropdown ion-list ion-item {
--padding-start: 0px;
--inner-padding-start: 15px;
--background: transparent;
&:last-of-type {
--border-style: none;
}
}
}