I need to place an icon on the right most corner of a PrimeNG TabView

我需要在PrimeNG TabView的最右角放置一个图标

i looking for something like this

我在找这样的东西

for demonstration purposes i opened the stackblitz in the docs and hardcoded the css but it will not be resposive when screen size changes

出于演示目的，我在文档中打开了Stackblitz并硬编码了css，但当屏幕大小改变时，它将不会响应

    <p-tabView>
        <p-tabPanel header="Header I">
            <p>
                Lorem ipsum
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header II">
            <p>
                Sed ut perspiciatis
            </p>
        </p-tabPanel>
        <p-tabPanel header="Header III">
            <p>
                At vero eos et
            </p>
        </p-tabPanel>
        <i class="pi pi-sort-alt icon-position"></i>
    </p-tabView>

.icon-position {
  position: absolute;
  left: 30rem;
  top: 3rem;
}

1 - Inject renderer2 in your constructor.

1-在构造函数中注入render2。

constructor(private _renderer2:Renderer2){}

2 - Add template reference on p-tabView like #tabView and read with @ViewChild

2-在p-tabView上添加模板引用，如#tabView并使用@ViewChild阅读

<p-tabView #tabView>

@ViewChild('tabView') tabView:TabView;

3 - Implments AfterViewInIt

3-实现AfterView Init

4 - Create function which create icon using renderer and listen to the click event of the icon:

4-创建使用渲染器创建图标并监听图标的点击事件的函数：

  createSortIcon(){
    const icon = this._renderer2.createElement('i');
    this._renderer2.addClass(icon,'pi')
    this._renderer2.addClass(icon,'pi-sort-alt');
    this._renderer2.setStyle(icon,'position','absolute');
    this._renderer2.setStyle(icon,'cursor','pointer');
    this._renderer2.setStyle(icon,'right','0')
    const nav_header = (this.tabView.content.nativeElement as HTMLElement).firstChild;
    this._renderer2.appendChild(nav_header,icon);
    this._renderer2.listen(icon,'click',() =>{
      this.myFunc() // put here your function
    })
  }

5- Call createSortIcon() inside the ngAfterViewInIt()

5-在ngAfterViewInIt()中调用createSortIcon()

It's not ideal but you can set display flex to card container and add the icon outside of the panel. see stackblitz working example

这并不理想，但您可以设置显示灵活的卡片容器，并添加到面板外的图标。请参阅Stackblitz工作示例

<div class="card">
  <div class="tabs">
    <p-tabView>
      <p-tabPanel header="Header I">
        <p> Tab 1 </p>
      </p-tabPanel>
      <p-tabPanel header="Header II">
        <p> Tab 2 </p>
      </p-tabPanel>
      <p-tabPanel header="Header III">
        <p> Tab 3</p>
      </p-tabPanel>
    </p-tabView>
  </div>

  <div class="sort">
    <i class="pi pi-sort-alt" (click)="onSortClick()"></i>
  </div>
</div>

Overwrite .p-tabview-panels class with z-index and width to be displayed over the sort element allocated content and add a border-bottom to sort icon, to make it like it's part of the tab element

用z索引和宽度覆盖.p-tabview-panels类，将其显示在已分配内容的排序元素上，并添加一个底部边框来排序图标，使其看起来像是选项卡元素的一部分

:host ::ng-deep {
  .p-tabview-panels {
    z-index: 2;
    position: relative;
    width: 110%;
  }
}

.card {
  display: inline-flex;

  .tabs {
    flex-grow: 1;
  }

  .sort {
    margin-left: 8px;
    padding: 1.1rem;
    position: relative;

    &::after {
      content: '';
      border-bottom: 2px solid #dee2e6;
      display: block;
      margin-top: 1.1rem;
      margin-left: -24px;
      width: 52px;
    }
  }
}

You can of course adjust the css values to fit your context

当然，您可以调整CSS值以适应您的上下文

wrap the code in <span> and add class in <p-tabView class="example-class">.

将代码包装在中，并在 中添加类。

<p-tabView class="example-class">
  <span>
    <p-tabPanel header="Header I">
      <p>Lorem ipsum</p>
    </p-tabPanel>
    <p-tabPanel header="Header II">
      <p>Sed ut perspiciatis</p>
    </p-tabPanel>
    <p-tabPanel header="Header III">
      <p>At vero eos et</p>
    </p-tabPanel>
  </span>
  <span>
    <i class="pi pi-sort-alt"></i>
  </span>
</p-tabView>

.example-class {
  display: flex;
  justify-content: space-between;
}

You can use a full prime solution, mixing tabview template and wrapping ina prime grid flex both the tabview and the icon:

您可以使用完整的主要解决方案，混合选项卡视图模板并在主要网格中包装选项卡视图和图标：

<div class="card">
  <div class="grid">
    <div class="col-11">
      <p-tabView styleClass="tabview-custom">
        <p-tabPanel>
          <ng-template pTemplate="header">
            <span>Header I</span>
          </ng-template>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </p-tabPanel>
        <p-tabPanel header="Header II">
          <ng-template pTemplate="header">
            <span>Header II</span>
          </ng-template>
          <p>Sed ut perspiciatis unde omnis iste natus error</p>
        </p-tabPanel>
        <p-tabPanel header="Header III">
          <ng-template pTemplate="header">
            <span>Header III</span>
          </ng-template>
          <p>At vero eos et accusamus et iusto odio</p>
        </p-tabPanel>
      </p-tabView>
    </div>
    <div class="col-1">
      <i class="pi pi-sort-alt"></i>
    </div>
  </div>
</div>

See working fiddle

请参阅工作小提琴

<div class="card icon-wrapper">
    <p-tabView>
      <p-tabPanel header="Header I">
        <p>
          Lorem ipsum dolor sit amet
        </p>
      </p-tabPanel>
      <p-tabPanel header="Header II">
        <p>
          Sed ut perspiciatis unde omnis iste natus error
        </p>
      </p-tabPanel>
      <p-tabPanel header="Header III">
        <p>
          At vero eos et accusamus et iusto odio
        </p>
      </p-tabPanel>
    </p-tabView>
  <div class="icon-position">
    <i class="pi pi-sort-alt" (click)="onSortClick()"></i>
  </div>
</div>

.icon-wrapper {
  position: relative;
}

.icon-position {
  position: absolute;
  top: 3rem;
  right: 3rem;
}