<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title style="font-size: large;">聊天窗口</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">chatter</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-header>
    <ion-toolbar>
      <ion-title>message.title</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <ion-content fullscreen>
    //other
    <ion-list lines="none" class="chat-container">
      <ion-item *ngFor="let message of messages" [class]="message.sender === 'user' ? 'user-message' : 'other-message'">
        <ion-card style="height: 100px;width: 50%;background-color: #0054e9;">
          <ion-avatar slot="start">
            <img src="../../assets/swiper/slider3.jpg" style="width: auto; height: auto;">
          </ion-avatar>
          <ion-label>
            <h2 style="color: #fff;font-size: large;">{{message.sender}}</h2>
            <p style="color: #fff;font-size: large;">{{message.text}}</p>
          </ion-label>
        </ion-card>
        </ion-item>

     
    
    //use
   
    </ion-list>

    
  </ion-content>
  
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-input placeholder="输入消息" [(ngModel)]="newMessage"></ion-input>
    <ion-button slot="end" style="width: 10%;" (click)="sendMessage()">发送</ion-button>
  </ion-toolbar>
</ion-footer>