inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

#70 pagination component (first cut), mdl directives

Browse Source
This commit is contained in:
Denys Vuika
2016-07-12 19:53:53 +01:00
parent 9c5ae7c05e
commit aa6c9a988f
13 changed files with 362 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html Normal file
View File

@@ -0,0 +1,23 @@
<div *ngIf="provider" class="mdl-paging">
<span class="mdl-paging__per-page">
<span class="mdl-paging__per-page-label">Rows per page:</span>
<span class="mdl-paging__per-page-value">{{pageSize}}</span>
<button alfresco-mdl-button id="pageSizePicker" class="mdl-button--icon mdl-paging__per-page-dropdown">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul alfresco-mdl-menu for="pageSizePicker" class="mdl-menu--bottom-right">
<li *ngFor="let size of supportedPageSizes"
tabindex="-1" [attr.data-value]="size" class="mdl-menu__item"
(click)="setPageSize(size)">
<span>{{size}}</span>
</li>
</ul>
</span>
<span class="mdl-paging__count">1-10 of 25</span>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-paging__prev">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-paging__next">
<i class="material-icons">keyboard_arrow_right</i>
</button>
</div>