Вкладка углового материала с «поиском» как последней

Question

Как создать «вход для поиска» или «кнопку добавления» в качестве последней вкладки компонента Угловой материал «?

»

Я не видел указания из документации , что это можно сделать. Может ли кто-нибудь подтвердить, возможно ли это? Обходные пути также приветствуются.

На снимке экрана показан пример того, что я хотел бы: "поисковый ввод" в качестве последнего элемента вкладки:

Скриншот взят со случайного (то есть с любого) канала YouTube.

Спасибо!

Answer 1

Хотя я не думаю, что наличие поля ввода внутри вкладки mat возможно без редактирования компонента, вы можете иметь поле ввода для поиска после группы mat-tab и поместить его в ту же строку, что и mat-tab-group, например используя flex в вашем CSS.

Пример:

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%;
}

будет производить это:

пример изображения

Пример использования Stackblitz

Возможно, потребуется немного повозиться для отображения на мобильных устройствах.