angular-material-app documentation
  1. Components
  2. PaginationComponent

File

src/app/materials/pagination/pagination.component.ts

Implements

OnInit

Metadata

selector app-pagination
styleUrls ./pagination.component.scss
templateUrl ./pagination.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/materials/pagination/pagination.component.ts:10

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/pagination/pagination.component.ts:14
Returns : void
page
page(current)
Defined in src/app/materials/pagination/pagination.component.ts:17
Parameters :
Name Optional
current No
Returns : void

Properties

currentPage
Defined in src/app/materials/pagination/pagination.component.ts:10
 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {

  currentPage;

  constructor() { }

  ngOnInit() {
  }

  page(current) {
    this.currentPage=current;
  }

}
Copy
<mat-card>
  <mat-card-title>分页</mat-card-title>
  <mat-card-content>
    <div>left</div>
    <stbui-pagination align="start" total="1000"></stbui-pagination>
    <div>center</div>
    <stbui-pagination align="center" total="1000"></stbui-pagination>
    <div>right</div>
    <stbui-pagination align="end" total="1000"></stbui-pagination>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>分页</mat-card-title>
  <mat-card-content>
    <stbui-pagination total="1000" (onPage)="page($event)"></stbui-pagination>
    <div>当前页码：{{ currentPage }}</div>
  </mat-card-content>
</mat-card>
Copy

./pagination.component.scss 

:host {
  display: block;
}

mat-card {
  margin: 20px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""