时间戳

首页 > 解决方案 > ngx-bootstrap：如何改变分页按钮的外观

angular - ngx-bootstrap：如何改变分页按钮的外观

问题描述

我在我的项目中使用来自 ngx-bootstrap 的分页组件，并尝试更改按钮以及它的外观和失败方式。有没有办法改变它？

我的组件：

<div class="table-container">
  <table class="table">
    <thead>
      <tr class="table-nav">
        <th scope="col">שנה</th>
        <th scope="col">סוג הדוח</th>
        <th scope="col">ח.פ</th>
        <th scope="col">שם החברה</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let tax of currentPage">
        <tr>
          <td>{{tax.year}}</td>
          <td>{{tax.type}}</td>
          <td>{{tax.cid}}</td>
          <td>{{tax.company}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
  <div class="table-footer">
  <pagination class="pagination" nextText=">" previousText="<" [align]="true" 
    [totalItems]="totalItems" (pageChanged)="pageChanged($event)">
  </pagination>
</div>
</div>

这是默认样式：

在此处输入图像描述

我需要让它看起来像这样：

在此处输入图像描述

标签： angularngx-bootstrap

解决方案

我首先通过在我的分页元素中添加一个类 my-pagination 来修复它，例如

<pagination 
                                    [maxSize]="maxSizeBtn" 
                                    [firstText]="firstText" 
                                    [lastText]="lastText"   
                                    [previousText]="prevText"   
                                    [nextText]="nextText"   
                                    [itemsPerPage]="perPage"
                                    [boundaryLinks]="showBoundaryLinks" 
                                    [totalItems]="totalItems" 
                                    [(ngModel)]="currentPage" 
                                    (pageChanged)="pageChanged($event)" 
                                    (numPages)="smallnumPages = $event" 
                                    id="comp-pagination" 
                                    class="my-pagination" 
                                    ></pagination>

在此之后，我强制所选页面项目必须具有像这样的红色背景颜色。你把 CSS 指令放在你的 .css 组件文件中

// 改变分页背景选择按钮颜色

.my-pagination::ng-deep .page-item.active .page-link {
    z-index: 1;
    color: #FFFFFF;
    background-color:red !important;
    border-color: #009DA0;
}

不要忘记覆盖所选页面项目的默认背景颜色的 !important 指令

谢谢

推荐阅读