@lesfabricants/ngx-flex-limitter
v4.0.0
Published
A library for limiting the number of lines in a flex container, complete with customizable expand and collapse.
Downloads
16
Keywords
Readme
ngx-flex-limitter
A library for limiting the number of lines in a flex container, complete with customizable expand and collapse.
<ngx-flex-limitter [items]="items" [totalLines]="3">
<ng-template ngxFlexLimitterItem let-item>
<div class="item">{{ item.value }}</div>
</ng-template>
<ng-template ngxFlexLimitterExpand let-amount>
<button (click)="expand()">+{{ amount }}</button>
</ng-template>
<ng-template ngxFlexLimitterCollapse>
<button (click)="collapse()">-</button>
</ng-template>
</ngx-flex-limitter>
items = [
{ value: "Leo" },
{ value: "Paul" },
{ value: "Marie" },
{ value: "Nathan" },
{ value: "Camilla" },
{ value: "Jeanne" },
{ value: "Raz" },
{ value: "Matt" },
{ value: "Laureen" },
{ value: "Augustin" },
{ value: "Katie" },
{ value: "Liam" },
{ value: "Emma" },
{ value: "Noah" },
{ value: "Olivia" },
{ value: "William" },
{ value: "Ava" },
{ value: "James" },
{ value: "Isabella" },
{ value: "Logan" },
{ value: "Sophia" },
];
baseTotalLines = 3;
totalLines = this.baseTotalLines;
expand() {
this.totalLines += 1;
}
collapse() {
this.totalLines = this.baseTotalLines;
}
How to use
The library documentation is available over at https://lesfabricants.github.io/libraries/#/flex-limitter
This library was generated with Angular CLI version 16.1.0.