Добавление mat-divider к mat-select / mat-option - PullRequest
Новая
       30

Добавление mat-divider к mat-select / mat-option

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

Возможно ли иметь разделитель матов (горизонтальная линия, разделяющая два варианта матов)?

Я пробовал: 

<mat-form-field>
  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <mat-divider></mat-divider>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</mat-form-field>

Плохой обходной путь, который у меня сейчас есть: 

<mat-option>--------------------------</mat-option>

Однако это не идеально.

Ответы [ 4 ]

1 голос
/ 21 сентября 2019

Я не уверен, как именно вы хотите, чтобы делитель отображался, но простой подход CSS заключался бы в перезаписи класса .mat-option на вашем основном styles.css, использовании псевдоэлемента :after , и добавьте значение к свойству border-bottom CSS. 

.mat-option:after {
  content: '';
  width: 100%;
  border-bottom: solid 2px black;
  position: absolute;
  left: 0;
  z-index: 1;
  top: calc(3em - 2px);
}

Я создал демо поверх здесь .

0 голосов
/ 23 сентября 2019

Да, можно добавить разделитель матов в mat-select / mat-option 

<mat-form-field>
  <mat-label> Cars </mat-label>
  <mat-select>
    <mat-option value="volvo"> Volvo </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="saab"> Saab </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="mercedes"> Mercedes </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="audi"> Audi </mat-option>
  </mat-select>

Надеюсь, это поможет вам

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

Вы можете достичь этого, используя mat-divider, просто добавив ng-container для переноса mat-option и mat-divider.Затем используйте локальную переменную last ngFor , чтобы условно удалить mat-divider из последнего mat-option. 

<mat-select>
    <ng-container *ngFor="let food of foods; let last = last">
        <mat-option [value]="food.value">
            {{food.viewValue}}
        </mat-option>
        <mat-divider *ngIf="!last"></mat-divider>
    </ng-container>
</mat-select>

Вот рабочий пример для StackBlitz.

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

Угловой материал. Выберите документацию, в которой вы можете помочь, вы можете использовать директиву panelClass, как в примере, который они показывают: 

<mat-form-field>
  <mat-label>Panel color</mat-label>
  <mat-select [formControl]="panelColor"
              panelClass="example-panel-{{panelColor.value}}">//panelColor.value if you want to handle some class dinamycally
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>

, и это классы CSS, которые они обрабатывают 

.example-panel-red.mat-select-panel {
  background: rgba(255, 0, 0, 0.5);
}

.example-panel-green.mat-select-panel {
  background: rgba(0, 255, 0, 0.5);
}

.example-panel-blue.mat-select-panel {
  background: rgba(0, 0, 255, 0.5);
}

Таким образом, вы можете применять свойства GoSjun CSS в классе

...