Расширение панели поиска при нажатии внешней кнопки - PullRequest
Новая
       19

Расширение панели поиска при нажатии внешней кнопки

0 голосов
/ 07 декабря 2018

Я хочу, чтобы поисковый ввод расширялся и переход по нажатию внешней кнопки (значка) вместо того, чтобы просто появляться / исчезать при щелчке.Как можно поступить так?Либо с чистым CSS, либо с помощью Angular 7.Я изучаю Angular впервые.

Спасибо

Я хочу, чтобы он делал что-то похожее на панель поиска на этом сайте.

https://theother98.com/

Что у меня есть до сих пор с Angular 7

NAV.COMPONENT.HTML // для переключения скрытого или показанногопанель поиска 

<div href="#" (click)="onToggleSearch()" class="search-icon"><i class="fa fa-search"></i></div>
<input type="text" [ngClass]="toggleSearch ? 'show' : 'hide'" name="search" placeholder="What are you looking for?">

NAV.COMPONENT.TS // некоторые JS, которые позволяют методу переключения работать 

export class NavComponent implements OnInit {

  toggleSearch: boolean = false;
  constructor() { }

  ngOnInit() {
  }

  onToggleSearch() {
    this.toggleSearch = !this.toggleSearch;
  }

NAV.COMPONENT.SCSS // базовый scss моей панели поиска 

input {
  flex: 1;
  z-index: 999;
  font-size: 14px;
  width: 180px;
  border: none;
  outline: none;
  padding: 8px;
  margin-right: 10px;
  transition: all 0.15s ease-in-out;
}

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Я понял это для всех, у кого была подобная дилемма.То, что я сделал, было это. 

.show {
  display: block;
  max-width: 200px;
  transform: scale(1);
}

.hide {
  display: none;
  max-width: 0px;
  transform: scale(0);
}

input {
  flex: 1;
  z-index: 999;
  font-size: 14px;
  width: 180px;
  border: none;
  outline: none;
  padding: 10px 8px;
  margin-right: 10px;
  display: block;
  transition: all 0.3s ease-in-out;
}

При определении CSS без transform: scale () ввод не будет полностью скрыт при добавлении .hide к элементу.Кроме того, когда вы добавляете максимальную высоту и максимальную ширину, а затем нажимаете кнопку, чтобы отобразить панель поиска ... Ввод не будет плавно переходить, вместо этого он расширяется до максимальной высоты, а затем до максимальной ширины, очень неэкранированным образом.Наконец, добавление display: block к элементу ввода является существенным.

Спасибо за помощь всем!

0 голосов
/ 07 декабря 2018

Вы добавляете классы прятки и показа.Следовательно, определение максимальной высоты в этих классах и отображение блока на элементе, который будет «перемещаться», должны позволить вашему переходу работать.Например: 

.hide {
    max-height: 0;
}

.show {
    max-height: 1000px;
}

input {
  flex: 1;
  z-index: 999;
  font-size: 14px;
  width: 180px;
  border: none;
  outline: none;
  padding: 8px;
  margin-right: 10px;
  transition: all 0.15s ease-in-out;
  display: block;
}
...