Angular создание панели инструментов материала с панелью поиска - PullRequest
0 голосов
/ 31 января 2020

Я пытаюсь создать панель инструментов, которая включает в себя значок. После того, как этот значок был нажат, он должен открыть панель поиска, найдите оба скриншота:

normal state

after search was clicked

Веб-сайт, на котором я нашел эту хорошую анимацию, был https://material.io/resources/icons/?style=baseline

Я уже пытался настроить обычную панель инструментов и просто включить вход, но он не работал.

Итак, вот код, который я пробовал:

<mat-toolbar color="primary"  >
 <mat-toolbar-row>
  <span>
     <img class="logo" src="../assets/eatsmarticon.png">
  </span>
 <span>
  <p class="toolbarname"> L O C A T I O N S</p>
 </span>
 <mat-form-field class="example-full-width">
  <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<span class="example-spacer"></span>
<a routerLink="locations">
   <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">filter</mat-icon>
</a>
</mat-toolbar-row>
</mat-toolbar>

1 Ответ

0 голосов
/ 31 января 2020

Структура для добавления значка материала - <mat-icon class="material-icons">filter</mat-icon>, поэтому убедитесь, что вы уже импортировали библиотеку материалов angular в свое приложение и MatIconModule в app.module.ts

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