Add: Adds ion-toast to the todo-edit component

TFPower-app/src/app/app.component.html

@@ -1,3 +1,3 @@
 <ion-app>
   <ion-router-outlet></ion-router-outlet>
-</ion-app>
+</ion-app>

TFPower-app/src/app/tab1/tab1.page.html

@@ -11,7 +11,7 @@
       <ion-content class="ion-padding">
         <ion-list [inset]="true">
           <ion-item>
-            <ion-label><a (click)="gotoTodolistpage()">Full</a></ion-label>
+            <ion-label><a (click)="gotoTodolistpage()">Todolist</a></ion-label>
           </ion-item>
           <ion-item>
             <ion-label>Pokémon Yellow</ion-label>

TFPower-app/src/app/todo-edit/todo-edit.component.html

@@ -12,12 +12,13 @@
         label-placement="floating" fill="outline" placeholder="Enter text" class="input-place input"></ion-input>
     </ion-col>
     <ion-col size="3">
-      <ion-button fill="outline" class="btn-size" (click)="addTodoList()">添加</ion-button>
+      <ion-button fill="outline" class="btn-size" (click)="addTodoList()" id="footerAnchor">添加</ion-button>
+      <ion-toast trigger="footerAnchor" position="bottom" message="添加成功!" duration="3000" color="success"
+        class="text-white"></ion-toast>
     </ion-col>
   </ion-row>
 </ion-grid>
 
-
 <!-- todolist -->
 <!-- <ion-card color="light">
   <ion-list [inset]="true">

TFPower-app/src/app/todo-edit/todo-edit.component.scss

@@ -10,3 +10,7 @@
 .text-red {
   color: red;
 }
+
+.text-white {
+  color: white;
+}

TFPower-app/src/app/todo-edit/todo-edit.component.ts

@@ -13,6 +13,7 @@ import {
   IonGrid,
   IonCol,
   IonRow,
+  IonToast,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -34,6 +35,7 @@ import {
     IonGrid,
     IonCol,
     IonRow,
+    IonToast,
   ],
 })
 export class TodoEditComponent implements OnInit {

TFPower-app/src/app/todolist-page/todolist-page.component.html

@@ -21,5 +21,4 @@
     </ion-list>
   </ion-card>
   }
-
 </ion-content>