Как выровнять левый и правый текстовый заголовок мат-карты в angular 4?

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

 <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>

angular html alignment angular-material mat-card
person Sivabalakrishnan    schedule 24.08.2018    source источник
comment
Не могли бы вы поделиться с нами тем, что вы пробовали?   -  person Narm    schedule 24.08.2018
comment
использование ‹p›,‹div›,‹span› со стилем textalalign:left, right и т. д. @Narm   -  person Sivabalakrishnan    schedule 24.08.2018

Ответы (3)


arrow_upward
11
arrow_downward

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

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

В вашем (назовем его) файле 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;
}

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

person Narm    schedule 24.08.2018
comment
я пробовал свое собственное решение, не нужно минусовать! downvote за неправильный ответ. - person Fateme Fazli; 24.08.2018
comment
Привет @fatemefazli, это не я проголосовал за твой ответ. Хотя я только что посмотрел на вашу демонстрацию, и она не работает, кстати. - person Narm; 24.08.2018
comment
Это не работает с текущей версией. Любые другие идеи? - person Alex; 23.07.2019

arrow_upward
5
arrow_downward

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

<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.

person wFitz    schedule 24.08.2018

arrow_upward
4
arrow_downward

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

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

    }
person Codexxx    schedule 20.02.2019