File tree Expand file tree Collapse file tree 7 files changed +93
-1
lines changed Expand file tree Collapse file tree 7 files changed +93
-1
lines changed Original file line number Diff line number Diff line change 119
119
/src /demo-app /live-announcer /** @ jelbourn
120
120
/src /demo-app /menu /** @ kara @ crisbeto
121
121
/src /demo-app /overlay /** @ jelbourn @ crisbeto
122
+ /src /demo-app /paginator /** @ andrewseguin
122
123
/src /demo-app /platform /** @ jelbourn @ devversion
123
124
/src /demo-app /portal /** @ jelbourn
124
125
/src /demo-app /progress-bar /** @ jelbourn @ crisbeto @ josephperrott
Original file line number Diff line number Diff line change @@ -71,6 +71,7 @@ export class DemoApp {
71
71
{ name : 'Live Announcer' , route : '/live-announcer' } ,
72
72
{ name : 'Menu' , route : '/menu' } ,
73
73
{ name : 'Overlay' , route : '/overlay' } ,
74
+ { name : 'Paginator' , route : '/paginator' } ,
74
75
{ name : 'Platform' , route : '/platform' } ,
75
76
{ name : 'Portal' , route : '/portal' } ,
76
77
{ name : 'Progress Bar' , route : '/progress-bar' } ,
Original file line number Diff line number Diff line change @@ -64,7 +64,7 @@ import {TreeDemoModule} from '../tree/tree-demo-module';
64
64
import { TypographyDemo } from '../typography/typography-demo' ;
65
65
import { DemoApp , Home } from './demo-app' ;
66
66
import { DEMO_APP_ROUTES } from './routes' ;
67
-
67
+ import { PaginatorDemo } from '../paginator/paginator-demo' ;
68
68
69
69
@NgModule ( {
70
70
imports : [
@@ -114,6 +114,7 @@ import {DEMO_APP_ROUTES} from './routes';
114
114
MatCheckboxDemoNestedChecklist ,
115
115
MenuDemo ,
116
116
OverlayDemo ,
117
+ PaginatorDemo ,
117
118
PlatformDemo ,
118
119
PortalDemo ,
119
120
ProgressBarDemo ,
Original file line number Diff line number Diff line change @@ -54,6 +54,7 @@ import {TableDemoPage} from '../table/table-demo-page';
54
54
import { TABLE_DEMO_ROUTES } from '../table/routes' ;
55
55
import { BadgeDemo } from '../badge/badge-demo' ;
56
56
import { ConnectedOverlayDemo } from '../connected-overlay/connected-overlay-demo' ;
57
+ import { PaginatorDemo } from '../paginator/paginator-demo' ;
57
58
58
59
59
60
export const DEMO_APP_ROUTES : Routes = [
@@ -81,6 +82,7 @@ export const DEMO_APP_ROUTES: Routes = [
81
82
{ path : 'live-announcer' , component : LiveAnnouncerDemo } ,
82
83
{ path : 'menu' , component : MenuDemo } ,
83
84
{ path : 'overlay' , component : OverlayDemo } ,
85
+ { path : 'paginator' , component : PaginatorDemo } ,
84
86
{ path : 'platform' , component : PlatformDemo } ,
85
87
{ path : 'portal' , component : PortalDemo } ,
86
88
{ path : 'progress-bar' , component : ProgressBarDemo } ,
Original file line number Diff line number Diff line change
1
+ < mat-card class ="demo-section ">
2
+ < h2 > No inputs</ h2 >
3
+ < mat-paginator > </ mat-paginator >
4
+ </ mat-card >
5
+
6
+ < mat-card class ="demo-section ">
7
+ < div class ="demo-options ">
8
+ < mat-form-field >
9
+ < input matInput placeholder ="Length " type ="number " [(ngModel)] ="length ">
10
+ </ mat-form-field >
11
+
12
+ < mat-form-field >
13
+ < input matInput placeholder ="Page Size " type ="number " [(ngModel)] ="pageSize ">
14
+ </ mat-form-field >
15
+
16
+ < mat-form-field >
17
+ < input matInput placeholder ="Page Index " type ="number " [(ngModel)] ="pageIndex ">
18
+ </ mat-form-field >
19
+
20
+ < mat-slide-toggle [(ngModel)] ="hidePageSize "> Hide page size</ mat-slide-toggle >
21
+ < mat-slide-toggle [(ngModel)] ="showPageSizeOptions "> Show multiple page size options</ mat-slide-toggle >
22
+ < mat-slide-toggle [(ngModel)] ="showFirstLastButtons "> Show first/last buttons</ mat-slide-toggle >
23
+ </ div >
24
+
25
+ < mat-paginator (page) ="handlePageEvent($event) "
26
+ [length] ="length "
27
+ [pageSize] ="pageSize "
28
+ [showFirstLastButtons] ="showFirstLastButtons "
29
+ [pageSizeOptions] ="showPageSizeOptions ? pageSizeOptions : [] "
30
+ [hidePageSize] ="hidePageSize "
31
+ [pageIndex] ="pageIndex ">
32
+ </ mat-paginator >
33
+
34
+ < div > Output event: {{pageEvent | json}} </ div >
35
+ </ mat-card >
Original file line number Diff line number Diff line change
1
+ .demo-section {
2
+ max-width : 500px ;
3
+ margin-bottom : 24px ;
4
+ background : #efefef !important ;
5
+
6
+ & > * {
7
+ margin : 32px 0 ;
8
+ }
9
+ }
10
+
11
+ .demo-options {
12
+ display : flex ;
13
+ flex-direction : column ;
14
+ max-width : 300px ;
15
+ }
Original file line number Diff line number Diff line change
1
+ /**
2
+ * @license
3
+ * Copyright Google LLC All Rights Reserved.
4
+ *
5
+ * Use of this source code is governed by an MIT-style license that can be
6
+ * found in the LICENSE file at https://angular.io/license
7
+ */
8
+
9
+ import { Component , ViewEncapsulation } from '@angular/core' ;
10
+ import { PageEvent } from '@angular/material' ;
11
+
12
+ @Component ( {
13
+ moduleId : module . id ,
14
+ selector : 'paginator-demo' ,
15
+ templateUrl : 'paginator-demo.html' ,
16
+ styleUrls : [ 'paginator-demo.css' ] ,
17
+ encapsulation : ViewEncapsulation . None ,
18
+ } )
19
+ export class PaginatorDemo {
20
+ length = 50 ;
21
+ pageSize = 10 ;
22
+ pageIndex = 0 ;
23
+ pageSizeOptions = [ 5 , 10 , 25 ] ;
24
+
25
+ hidePageSize = false ;
26
+ showPageSizeOptions = true ;
27
+ showFirstLastButtons = true ;
28
+
29
+ pageEvent : PageEvent ;
30
+
31
+ handlePageEvent ( e : PageEvent ) {
32
+ this . pageEvent = e ;
33
+ this . length = e . length ;
34
+ this . pageSize = e . pageSize ;
35
+ this . pageIndex = e . pageIndex ;
36
+ }
37
+ }
You can’t perform that action at this time.
0 commit comments