- Angular
- Angular Material
- Tailwindcss
Last active
January 19, 2023 16:09
-
-
Save y-takagi/f09e05141ffa7ca38cd0018319455dd6 to your computer and use it in GitHub Desktop.
GoogleのPaginationっぽいやつ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ng-container *ngIf="state$ | async as state"> | |
<div class="flex items-start gap-2"> | |
<button [class.invisible]="!state.hasPrev" (click)="onNavigate(state.page - 1)"> | |
<mat-icon>navigate_before</mat-icon> | |
</button> | |
<ng-container *ngFor="let page of state.pages"> | |
<ng-container *ngIf="page === state.page; else otherPage"> | |
<div class="w-6 text-center">{{ page }}</div> | |
</ng-container> | |
<ng-template #otherPage> | |
<button class="tw-w-6 text-gray" (click)="onNavigate(page)">{{ page }}</button> | |
</ng-template> | |
</ng-container> | |
<button [class.invisible]="!state.hasNext" (click)="onNavigate(state.page + 1)"> | |
<mat-icon>navigate_next</mat-icon> | |
</button> | |
</div> | |
</ng-container> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface Pagination { | |
total: number | |
page: number; | |
limit: number; | |
hasPrev: boolean; | |
hasNext: boolean; | |
} | |
@Component({ | |
selector: 'app-paginator', | |
templateUrl: './paginator.component.html', | |
}) | |
export class PaginatorComponent { | |
private readonly pagination$$ = new BehaviorSubject<{ page: number; pages: number[]; hasPrev: boolean; hasNext: boolean } | null>(null); | |
readonly state$ = this.pagination$$.asObservable(); | |
@Input() maxPage = 10; | |
@Input() | |
set pagination(value: Pagination | undefined) { | |
if (value == null) return; | |
this.pagination$$.next({ | |
page: value.page, | |
pages: this.generatePages(value), | |
hasPrev: value.hasPrev, | |
hasNext: value.hasNext | |
}); | |
} | |
@Output() navigate = new EventEmitter<number>(); | |
onNavigate(page: number): void { | |
this.navigate.emit(page); | |
} | |
private generatePages(value: Pagination) { | |
const totalPage = Math.ceil(value.total / value.limit); | |
if (totalPage <= this.maxPage) return this.range(totalPage); | |
if (value.page <= Math.floor(this.maxPage / 2) + 1) { | |
return this.range(this.maxPage); | |
} else if (value.page >= totalPage - (Math.floor(this.maxPage / 2) - 1)) { | |
return this.range(this.maxPage, totalPage - this.maxPage + 1); | |
} else { | |
return this.range(this.maxPage, value.page - Math.ceil(this.maxPage / 2)); | |
} | |
} | |
private range(size: number, startAt: number = 1) { | |
return [...Array(size).keys()].map((i) => i + startAt); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment