comments

Author: andrewseguin

src/lib/paginator/_paginator-theme.scss

@@ -7,7 +7,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-paginator,
-  .mat-paginator-page-length-select .mat-select-trigger {
+  .mat-paginator-page-size .mat-select-trigger {
     color: mat-color($foreground, secondary-text);
   }
 
@@ -33,7 +33,7 @@
     }
   }
 
-  .mat-paginator-page-length-select .mat-select-trigger {
+  .mat-paginator-page-size .mat-select-trigger {
     font: {
       family: mat-font-family($config);
       size: mat-font-size($config, caption);

src/lib/paginator/paginator.html

@@ -1,9 +1,10 @@
-<div class="mat-paginator-page-length-select">
-  <div class="mat-paginator-items-per-page-label">
+<div class="mat-paginator-page-size">
+  <div class="mat-paginator-page-size-label">
     {{_intl.itemsPerPageLabel}}
   </div>
 
   <md-select *ngIf="_displayedPageSizeOptions.length > 1"
+             class="mat-paginator-page-size-select"
              [ngModel]="pageSize"
              [aria-label]="_intl.itemsPerPageLabel"
              (change)="_changePageSize($event.value)">

src/lib/paginator/paginator.md

@@ -4,17 +4,20 @@
 
 ### Basic use
 Each paginator instance requires:
-* The current page index
 * The number of items per page
 * The total number of items being paged
 
+The current page index defaults to 0, but can be explicitly set via pageIndex.
+
 When the user interacts with the paginator, a `PageEvent` will be fired that can be used to update
 any associated data view.
 
 ### Page size options
 The paginator displays a dropdown of page sizes for the user to choose from. The options for this
 dropdown can be set via `pageSizeOptions`
 
+The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions.
+
 ### Internationalization
 The labels for the paginator can be customized by providing your own instance of `MdPaginatorIntl`.
 This will allow you to change the following:

src/lib/paginator/paginator.scss

@@ -22,17 +22,17 @@ $mat-paginator-button-increment-icon-margin: 16px;
   padding: $mat-paginator-padding;
 }
 
-.mat-paginator-items-per-page-label {
-  margin: $mat-paginator-items-per-page-label-margin;
-}
-
-.mat-paginator-page-length-select {
+.mat-paginator-page-size {
   display: flex;
   align-items: center;
+}
 
-  .mat-select {
-    margin: $mat-paginator-selector-margin;
-  }
+.mat-paginator-page-size-label {
+  margin: $mat-paginator-items-per-page-label-margin;
+}
+
+.mat-paginator-page-size-select {
+  margin: $mat-paginator-selector-margin;
 
   .mat-select-trigger {
     min-width: $mat-paginator-selector-trigger-min-width;

src/lib/paginator/paginator.ts

@@ -63,7 +63,7 @@ export class MdPaginator implements OnInit {
     this._pageSize = pageSize;
     this._updateDisplayedPageSizeOptions();
   }
-  private _pageSize: number;
+  private _pageSize: number = 0;
 
   /** The set of provided page size options to display to the user. */
   @Input()