如何添加输入字段？

Question

我只是想添加一个输入字段，并在 Tab 2 旁边添加一个按钮，如图所示。那么，有谁知道如何使用PrimeNG做到这一点？提前非常感谢！

这里是Live Demo Code

<p-tabView>
   <p-tabPanel header="Tab 1" *ngIf="showTabs && showTabs['one']">
   Tab 1 content
   </p-tabPanel>
   <p-tabPanel header="Tab 2" *ngIf="showTabs && showTabs['three']">
    Tab 2 content
  </p-tabPanel>
</p-tabView>

这就是我要完成的工作：

Answer 1

您可以使用CSS来实现该目标：

<div style="position: relative">
    <p-tabView>
        <p-tabPanel header="Tab 1" *ngIf="showTabs && showTabs['one']">
            Tab 1 content
        </p-tabPanel>
        <p-tabPanel header="Tab 2" *ngIf="showTabs && showTabs['three']">
            Tab 2 content
        </p-tabPanel>
    </p-tabView>
  <div style="position: absolute; top: 13px; right: 10px;">
    <input pInputText type="text"><button pButton type="button" label="GO" ></button>
  </div>
</div>

Here is a running fork of your stackblitz.

Answer 2

根据您的要求：

<div>
<div style="position:absolute; padding-left:11rem; padding-top:1rem;">Lorem Ipsum: 
  <input type="text" name="fname"><br></div>
  <p-tabView>
  <p-tabPanel header="Tab 1" *ngIf="showTabs && showTabs['one']">
  Tab 1 content
</p-tabPanel>
<p-tabPanel header="Tab 2" *ngIf="showTabs && showTabs['three']">
  Tab 2 content
  </p-tabPanel>
  </p-tabView>
</div>

这是叉子：fork