Как выровнять левый и правый текст mat-card-header в угловых 4? - PullRequest
Новая
       33

Как выровнять левый и правый текст mat-card-header в угловых 4?

0 голосов
/ 24 августа 2018

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

 <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

Ответы [ 3 ]

0 голосов
/ 24 августа 2018

Вы также можете сделать это, если хотите продолжать использовать элементы mat-title:

См. Рабочий Пример StackBlitz

В вашем (Iназову это) файл example-card.component.html 

<mat-card  >
<mat-card-header>
 <mat-card-title class="card-container-left"> Test left</mat-card-title>
 <mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>

Тогда в вашем example-card.component.css 

.card-container-right{
  display: inline;
  float: right;
}

.card-container-left{
  display: inline;
}

... и, наконец, в ваших styles.css 

.mat-card-header-text{
  width: 100% !important;
}

Хитрость в этом заключается в том, чтобы переопределить угловые материалы .mat-card-header-text, чтобы они составляли 100% ширины mat-card-header.В противном случае он ведет себя как встроенный элемент и занимает только ширину текста его дочерних элементов.Запрещает вам их разносить.

0 голосов
/ 20 февраля 2019

добавить пользовательские CSS на .mat-card-header class 

 .mat-card-header{
        justify-content: flex-end /* for right*/
        justify-content: flex-start /* for left*/
        justify-content: centre /* for center*/

    }
0 голосов
/ 24 августа 2018

Вы можете использовать то, что дизайн материала использует на панели инструментов мат 

<mat-card-title>
   <span>Test left</span>
   <span class="fill-remaining-space"></span>
   <span>Test right</span>
</mat-card-title>

в вашем .css 

.fill-remaining-space {
   flex: 1 1 auto;
}

Извините, это не работает !!!!!Работает в Mat-Toolbar, но не в Mat-card Title.

Вот как это работает, я знал, что использовал его где-то 

<mat-card>
  <mat-card-title-group>
    <span>Test left</span>
    <span class="fill-remaining-space"></span>
    <span>Test right</span>
  </mat-card-title-group>
</mat-card>

см .: https://stackblitz.com/edit/angular-rb5vmuдля рабочего примера

...