libs/upp-wdgt/src/components/upp-select/upp-select.ts
Represents a list of upp-select-option components.
AfterViewInit
OnDestroy
| selector | upp-select-list |
| styleUrls | ./upp-select.scss |
| templateUrl | ./parts/upp-list.html |
Properties |
Methods |
Outputs |
Accessors |
| Select |
Type : EventEmitter
|
|
Event emitted when an option is selected from the list. |
| Expand | ||||||
Expand(value: boolean)
|
||||||
|
Expands or collapses the list.
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Lifecycle hook that sets up option listeners after the view initializes.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Lifecycle hook that unsubscribes from subscriptions when the component is destroyed.
Returns :
void
|
| options |
Type : QueryList<UppSelectOptionComponent>
|
Decorators :
@ContentChildren(UppSelectOptionComponent)
|
|
Query list of |
| IsExpand | ||||||
getIsExpand()
|
||||||
|
Whether the list is expanded.
Returns :
boolean
|
||||||
setIsExpand(value: boolean)
|
||||||
|
Parameters :
Returns :
void
|
<div style="position: relative;">
<div class="list-box" [ngClass]="{ 'visible': IsExpand }">
<div class="inner">
<upp-scrollable>
<ion-list>
<ng-content></ng-content>
</ion-list>
</upp-scrollable>
</div>
</div>
<div class="list-sep" [ngClass]="{ 'visible': IsExpand }"></div>
</div>
./upp-select.scss
:host {
.item-box {
position: relative;
margin: 0px 6px;
ion-icon {
font-size: 40px;
position: absolute;
top: 6px;
right: 10px;
}
::ng-deep ion-item {
--border-style: none;
--inner-padding-start: 10px;
}
}
.list-sep {
position: absolute;
width: 100%;
z-index: 4;
clear: both;
height: 40px;
background: linear-gradient(180deg, var(--ion-background-color) 30%, transparent 100%);
transition: all ease-in .3s;
top: 0px;
visibility: hidden;
&.visible {
visibility: visible;
top: calc(25vh - 10px);
}
}
.list-box {
position: absolute;
height: 100vh;
top: 0px;
left: 10px;
right: 10px;
overflow: hidden;
background: var(--ion-color-light);
border-radius: 8px;
z-index: 5;
transition: all ease-in .3s;
max-height: 0px;
&.visible {
max-height: 25vh;
}
.inner {
height: 25vh;
ion-list {
margin: 0px !important;
border-radius: 0px !important;
background: transparent !important;
}
upp-scrollable {
::ng-deep .content {
background: transparent !important;
}
}
}
}
/*
.options-box {
position: absolute;
top: 0px;
bottom: 0px;
left: 10px;
right: 10px;
height: 100vh;
background: var(--ion-color-light);
border-radius: 8px;
overflow: hidden;
z-index: 5;
.list-box {
transition: all ease-in .3s;
max-height: 0px;
&.visible {
max-height: 20vh;
}
}
}
*/
}