九宫格

最新推荐文章于 2025-04-21 09:06:05 发布

原创最新推荐文章于 2025-04-21 09:06:05 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了一个使用Ionic框架设计的教学班级用户界面，包括头部工具栏、课程名称显示、学生输入数字区域、数字按钮选择器及学生信息展示部分。文章深入探讨了各组件的样式设置与交互逻辑，为开发者提供了一套完整的UI实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ion-header>
  <ion-toolbar style="text-align:center;--background: #6495ED;--color:#FFFFFF">
    <ion-buttons slot="start">
      <ion-back-button  defaultHref=""></ion-back-button>
    </ion-buttons>
    <ion-title style="margin-left:-44px">{{teachClassName}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content style="--background:#EEEEEE" padding>
  <div class="tips">
    <span style="text-align:center;display: block;color: gray;font-size: 15px;font-weight: bold">同学们输入同样的四个数字，</span>
    <span style="text-align:center;display: block;color: gray;font-size: 15px;font-weight: bold">便可进入上课班</span>
  </div>

  <div style="margin-top: 5%;margin-bottom: 5%;margin-left:20%;margin-right: 20%;">
    <ion-button class="btnText" >{{oneText}}</ion-button>
    <ion-button class="btnText" >{{twoText}}</ion-button>
    <ion-button class="btnText" >{{threeText}}</ion-button>
    <ion-button class="btnText" >{{fourText}}</ion-button>
  </div>

  <ion-item style="--background:#EEEEEE" *ngIf = "users != null">
    <label slot="end">学生:{{students}}人</label>
  </ion-item>

  <div class="btnDiv">
    <hr style="margin-left: 0px; clear:both;">
    <ion-button class="btn" (click)="ChoiceNumber('1')">1</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('2')">2</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('3')">3</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('4')">4</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('5')">5</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('6')">6</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('7')">7</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('8')">8</ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('9')">9</ion-button>
        
    <ion-button type="button" class="btn" (click)="clearText()">
      <ion-icon name="md-refresh"></ion-icon>
    </ion-button>
    <ion-button class="btn" (click)="ChoiceNumber('0')">0</ion-button>
    <ion-button class="btn" (click)="deleteText()">
      <ion-icon name="md-backspace"></ion-icon>
    </ion-button>
  </div>
  <div *ngIf = "users == null" style="text-align:center">等待学生加入.....</div>
  <div class="userDiv" *ngFor="let user of users;let u = index">
    <div style="float: left;" class="plusimgs" >
        <img src="assets/images/头像.png">
        <img class="deleteimg" style="width:20px" (click)="removeStudent(u)" src="assets/images/删除按钮.png">
      <span #uName style="font-size: 15px;" class="userName">{{user.name}}</span>
    </div>
  </div>
  <div style="float: left" class="plusimgs" >
    <img src="assets/images/添加图标.png" (click)="addStudent()">
    <span #uName style="font-size: 15px;" class="userName">添加</span>
  </div>
</ion-content>
<ion-button id="coming" full large (click) = "createTeachClass()">进入该上课班</ion-button>