如何设置垫子分页器角度的样式，如图所示 [英] How can i style mat paginator angular as shown

问题描述

我有一个角垫分页器的图形设计。如何设置图形中所示的角垫分页器角度的样式？

推荐答案

要创建带省略号的分页按钮，我们可以在Internet上查找必要的算法。我不想重新发明轮子，但是，遗憾的是，我找不到一个我喜欢的分页器和轮子(然后添加省略号，我不能总是得到相同数量的元素(按钮和省略号)。因此，如果我们有"；getNumberOfPages(总页数)"；，"；countPages"；(按钮数)，"；pageIndex"；(实际的页面-0是第一页，1是第二页.)我们可以使用以下函数返回字符串数组：

createButtonsPage() {
    const last = this.getNumberOfPages() - 1;
    const b = new Array(
      last < this.countPages ? last + 1 : this.countPages
    ).fill('.');

    if (last < this.countPages) return b.map((_x, i) => '' + i);

    const links0_5 = (this.countPages - 1) / 2;
    let start = this.pageIndex - links0_5 < 0 ? 0 : 
                this.pageIndex - links0_5;
    let end =start == 0? this.countPages - 1:
             this.pageIndex + links0_5 > last ? last:
             this.pageIndex + links0_5;

    if (end == last) start = end - this.countPages + 1;

    return b.map((_x, i) => {
      return i == 0 ? '0':
             i == this.countPages - 1? '' + last:
             (i == 1 && start) || (i == this.countPages - 2 && end != last)? '...':
             '' + (i + start);
    });
  }

我们可以使用fromEvent的方式根据屏幕的大小选择显示按钮

   fromEvent(window, 'resize')
        .pipe(
          startWith({ target: { innerWidth: window.innerWidth } }),
          debounceTime(200),
          distinctUntilChanged(),
          takeUntil(this.active),
          map((e: any) => {
            const countPage =
              e.target.innerWidth > 620 ? (e.target.innerWidth > 750 ? 9 : 7) : 5;
            return this.countPage
              ? countPage < this.countPage
                ? countPage
                : this.countPage
              : countPage;
          })
        )
        .subscribe((x: number) => {
          this.countPages = this.countPagesOld = x;
          this._buttons = this.createButtonsPage();
        });

在我们的分页器中，我们可以使用按钮的getter。由于我们不希望"；重新计算按钮，因此我们可以将旧值存储在变量中，其中一些类似

  get buttons() {
    if (
      !this._buttons ||
      this.pageIndexOld != this.pageIndex ||
      this.countPagesOld != this.countPages ||
      this.pageSizeOld != this.pageSize ||
      this.lengthOld != this.length
    ) {
      this._buttons = this.createButtonsPage();
      this.pageIndexOld = this.pageIndex;
      this.countPagesOld = this.countPages;
      this.pageSizeOld = this.pageSize;
      const last = this.getNumberOfPages();
      if (last && +this.control.value > last)
        this.control.setValue(last, { emitEvent: false });
    }
    return this._buttons;
  }

嗯，我做了一个new stackblitz。在堆叠闪电战中，您还可以

1. 为按钮"；prev"；和"；Next"；赋值
2. 选择JUSTIFY-CONTENT-分页器包装在div中 FLEX-
3. 更改按钮的颜色-为此，我使用如下CSS变量 在this article中显示基本Netanet(参见表-filter-example.css)

这篇关于如何设置垫子分页器角度的样式，如图所示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！