Угловые материалы - раскрывающийся список в поле ввода - PullRequest
Новая
       22

Угловые материалы - раскрывающийся список в поле ввода

0 голосов
/ 21 сентября 2018

Используя Angular Materials, мы пытаемся достичь чего-то связанного с компонентом Bootstrap button with dropdowns - т.е. https://getbootstrap.com/docs/4.0/components/input-group/#buttons-with-dropdowns

Точнее, это поиск Input Field в сочетании с dropdownвариантов поиска.В проволочной рамке это выглядит так:

Input with dropdown indicator

т.е. при нажатии на белую стрелку вниз

Dropdown

Это то, что они придумали, используя только «Выбор материала»;однако вопрос на самом деле таков: можно ли это сделать, когда поле ввода комбинируется с выпадающим списком?

.search-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
  }
  
.search-full-width {
width: 100%;
}

:host ::ng-deep .mat-tab-body-content{
  min-height:500px;
  padding:5px;
}
.pad-left {
  margin-left: 5px; 
}
.mat-select-panel {
  background-color: blue;
}
<mat-form-field appearance="outline" class="search-full-width">
    <mat-select panelClass="mat-select-panel" [(value)]="selected"  disableOptionCentering=true> 
          <mat-option value="Basic">Basic</mat-option>
          <mat-option value="Advanced">Advanced</mat-option>
    </mat-select>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

Вот кое-что для начала (содержит выбор) -

https://stackblitz.com/edit/angular-mat-select-drpdwn

1 Ответ

0 голосов
/ 22 сентября 2018

Используя комбинацию boostrap 4 и mat-select, я получаю то, что хочу.Это просто нужно правильно оформить. 

<div class="input-group" style="margin: 15px 0 0 10px !important; ">
    <input type="text" id="basic_filter" #basicFilter placeholder="Search" class="form-control" value="{{searchOptions?.filter}}">
    <div class="input-group-append">
        <mat-select [(value)]="selected" class="pat-search" disableOptionCentering=true> 
            <mat-option value="Basic">Basic</mat-option>
            <mat-option value="Advanced">Advanced</mat-option>
        </mat-select>        
    </div>
    <mat-icon class="search-icon" matSuffix>arrow</mat-icon>
</div>
...