Три пролета внутри коврик-вариант

Question

У меня есть требование, чтобы показать опции мата, как показано ниже

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

Пожалуйста, помогите.

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
                <span style="display: inline-block">{{acc.accountProductDesc}}</span>
                <span style="display: inline-block">{{acc.maskedAccountNumber}}</span>
                <span style="display: inline-block">{{acc.balance}}</span>
              </mat-option>

Answer 1

Если вы просто хотите изменить отображение контента <mat-option>, тогда все, что вам нужно, - это поиграться с scss.

Конечно, решения CSS в значительной степени бесконечны, и есть много способовчтобы достичь того, что вы хотите, вы просто должны выбрать то, что вы думаете:

• масштабируется (при необходимости)
• достигает того, что вы хотите правильно
• легко понять/ read / debug

Вот простой подход, который я бы предложил:

Шаблон:

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
  <div class="account-details">
    <span class="description">{{acc?.accountProductDesc}}</span>
    <span class="number">{{acc?.maskedAccountNumber}}</span>
    <span class="balance">{{acc?.balance | currency}}</span>
  </div>
</mat-option>

SCSS:

.account-details{
  display: flex;
  *{
    padding: 0 3px;
  }
}
.description{
  font-weight: bold;
}
.number{
  font-size: small
}
.balance{
  margin-left: auto;
}