Пользовательский интерфейс чата в ионном 3

Question

Я попытался создать интерфейс чата. У меня проблемы с размещением пузырей в чате. Это как

Это мой HTML код

<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg left" *ngIf="userId != msg.id">
      {{ msg.reply }}
    </div>
    <div class="innermsg right" *ngIf="userId == msg.id">
        {{ msg.reply }}
    </div>
</ion-list>

Это мой код scss

.innermsg {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        font-weight: 500;
        font-size: 16px;
        border-radius: 15px;
        margin-bottom: 5px;
    }

    .innermsg.left {
        float: left;
        background-color: #F1F0F0;
        color: black;
    }

    .innermsg.right {
        float: right;
        //margin-right: 10%;
        background-color: #0084FF;
        color: white;
    }

    .msgbubble {
        margin-bottom: 10px;
    }

Может ли кто-нибудь помочь мне в отображении пузырей чата за другим, но не в той же строке, как показано на рисунке выше.

Answer 1

Используйте flexbox, flex-direction: column, и дайте каждому человеку отличающиеся align-self значения.

В Angular я думаю, что синтаксис для элемента будет:

<div [ngClass]="userId === msg.id ? 'me' : 'you'">{{msg.reply}}</div>

Вот пример со статическими элементами:

.chat {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

.message {
  border-radius: 5px;
  margin: 0.2em 0;
  padding: 0.5em;
  max-width: 50%;
}

.me {
  align-self: flex-start;
  background-color: blue;
  color: white;
}

.you {
  align-self: flex-end;
  background-color: green;
  color: white;
}

<div class="chat">
  <div class="message me">Hello</div>
  <div class="message you">Hello</div>
  <div class="message me">How are you?</div>
  <div class="message you">I'm fine</div>
  <div class="message you">How about you?</div>
  <div class="message me">I'm doing so amazingly you wouldn't believe all the things that are happening right now it would take up at least 50% of the width of the page to discuss all the things that I want to tell you.</div>
</div>

Answer 2

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

<ion-list>
  <div text-right *ngFor="let message of messages; let i = index; let first = first;">

    <div *ngIf = "message.from == this.user">

        <span *ngIf = "i==0" > 
            <ion-label stacked> {{message?.from}} </ion-label>
          <p text-right> {{message?.msg}}</p>
        </span>

        <span *ngIf = "i>0 && message.from == messages[i-1].from" > 
          <p text-right> {{message?.msg}}</p>
        </span>

        <span *ngIf = "i>0 && message.from != messages[i-1].from" > 
            <ion-label stacked> {{message?.from}} </ion-label>
          <p text-right> {{message?.msg}}</p>
        </span>

    </div>

    <div *ngIf = "message.from != this.user">

        <span *ngIf = "i==0" > 
            <ion-label stacked text-left> {{message?.from}} </ion-label>
          <p text-left> {{message?.msg}}</p>
        </span>

        <span *ngIf = "i>0 && message.from == messages[i-1].from" > 
          <p text-left> {{message?.msg}}</p>
        </span>

        <span *ngIf = "i>0 && message.from != messages[i-1].from" > 
            <ion-label stacked text-left> {{message?.from}} </ion-label>
          <p text-left> {{message?.msg}}</p>
        </span>

    </div>


  </div>
</ion-list>

Answer 3

Структура HTML должна немного измениться, каждый пузырь чата должен занимать строку, и только содержимое внутри строки должно иметь форматирование, которое у вас есть.

Как это:

  <ion-list no-lines class="msgbubble" >
    <ion-item *ngFor="let msg of messages">
      <span [ngClass]="userId == msg.id ? 'innermsg right':'innermsg left'">{{ msg.reply }}</span>
    </ion-item>
  </ion-list>

Проверьте реализацию здесь