Question

我想更改ngx-pagination的背景颜色

我的代码：

<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>

默认背景色是蓝色，我想更改为红色。

我怎么办？

解决方案：

在CSS中：

.custom-pagination /deep/ .ngx-pagination .current {background: red;}

然后在项目中安装jquery。

Answer 1

使用分页模板理解分页控件示例：

<pagination-template
          #p="paginationApi"
          (pageChange)="onPageChange($event)"
          *ngIf="myList">
    <div class="pagination-custom">
      <ul class="pagi">
        <li class="item">
          <a *ngIf="!p.isFirstPage()"
             [class.disabled]="p.isFirstPage()"
             (click)="p.previous()"
             class="page-link"
             aria-label="Previous">
            <span aria-hidden="true" class="la la-caret-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li *ngFor="let page of p.pages"
            [class.active]="p.getCurrent() === page.value"
            class="page-item">
          <a (click)="p.setCurrent(page.value)"
             class="page-link">  {{ page.label }}
          </a>
        </li>

      </ul>
    </div>
  </pagination-template>

Answer 2

您可以通过在CSS文件中编辑分页器来实现。例如（红色背景和红色边框）：

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

您可以为全局css文件添加它。

全红分页器的示例：

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

.page-link {
    color: red; 
}

.page-link:hover {
    color: red; 
}

Answer 3

(document.querySelector('.pagination-next') as HTMLElement).style.color = 'black'; (document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black';

用于角度

如何更改ngx分页的颜色？

3 个答案: