时间戳

首页 > 解决方案 > 分页引导当前页面角度的颜色

angular - 分页引导当前页面角度的颜色

问题描述

我想改变分页的颜色当在当前页面和当你在第一页或最后一页时分页将禁用

像这样禁用：

在此处输入图像描述

应用程序.html

<ul *ngIf="(ticket$| async)?.length != 0" class="pagination justify-content-end">
  <li class="page-item">
    <a class="page-link" (click)="previousIndex()">Previous<span aria-hidden="true">&laquo;</span></a>
  </li>
  <li *ngFor="let i of getArrayFromNumber((ticket$| async)?.length); let in = index" class="page-item">
    <a class="page-link" (click)="updateIndex(in)">{{in+1}}<span class="sr-only">(current)</span></a>
  </li>
  <li class="page-item">
    <a class="page-link" (click)="nextIndex()">Next</a>
  </li>
</ul>

应用程序.ts

  getArrayFromNumber(length) {
    this.max = (Math.ceil(length / 7))
    return new Array(Math.ceil(this.max));
  }

  updateIndex(pageIndex) {
    this.startIndex = pageIndex * 7;
    this.endIndex = this.startIndex + 7;
  }

  previousIndex() {
    if (this.tabindex > 0) {
      this.tabindex -= 1
    }
    this.startIndex = this.tabindex * 7;
    this.endIndex = this.startIndex + 7;
  }

  nextIndex() {
    if (this.tabindex < this.max - 1) {
      this.tabindex += 1
    }
    this.startIndex = this.tabindex * 7;
    this.endIndex = this.startIndex + 7;

  }

标签： angularpaginationangular8

解决方案

在您的 css 文件中添加以下 CSS。例如，我为当前活动页面使用了橙色背景色，您可以根据需要更改为任何颜色。

.pagination > .active > a , .pagination > .active > a:hover, .pagination > .active > a:focus {
    background-color: orange;
    border-color: orange;
}

推荐阅读