角度材料选项卡，“搜索输入”作为最后一个选项卡

Question

我们如何创建“搜索输入”或“添加按钮”作为 Angular Material标签组件的最后一个标签？

我没有看到documentation表示可以做到这一点。有人可以确认这是否可行？解决方法也很受欢迎。

屏幕截图显示了我想要的示例：“搜索输入”作为最后一个标签项：

截图来自随机（即任意）YouTube频道。

谢谢！

Answer 1

虽然我不认为在没有编辑组件的情况下在mat-tab中有一个输入框，但你可以在mat-tab-group之后有一个输入框用于搜索，并将它带到同一行。 mat-tab-group，例如在CSS中使用flex。

示例：

HTML：

<div class="container">
<mat-tab-group class="tabs">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<mat-form-field class="input">
  <input matInput placeholder="Search" >
</mat-form-field>
</div>

CSS：

.container {
  display: flex;
}

.input {
margin-top: 0.5%;
}

会产生这个：

example image

Example on Stackblitz

可能需要一些修改才能在移动设备上显示。