Angular中使用ionic组件

目录

前言

一、ion-input组件使用

二、ion-toast提示框

三、ion-loading加载框效果

四、ion-search搜索框

---

前言

注意:项目本身用的是ionic6 而不能使用ionic7的相关组件内容 否则会报错

在项目的编写中除了使用ng-zorro组件来绘制pc端界面，同样可以使用ionic来绘制简单的移动端界面。此文章则是对一些简单的ionic的组件进行使用

---

一、ion-input组件使用

常用作登录以及一些表单的使用，与ion-list结合使用。

注意:在项目中使用ionic自带的例子时，由于项目和实际引用组件的版本不一样,在ion-input上添加label不起效果。需重新设置ion-label标签来表示。

如以下例子，在angular项目中不能起到效果

应该使用如下方法，以下是常用的几种input框

                  
                    
                        
                            姓名
                        
                        
                        
                    
                    
                        年龄
                        
                    
                    
                        密码
                         
                        
                    
                    
                        
                            浮动
                        
                        
                        
                    
                    
                        
                            固定
                        
                        
                    
                

二、ion-toast提示框

提示框可以用来对日常获取数据/修改数据后的提示效果

HTML:

           toast普通效果
            toast成功效果
            toast警告效果

 TS:

  constructor(private toast: ToastController) {}

  practiceIfy = {
        onShowToast: async (
            color: 'primary' | 'danger' | 'success',
            position: 'top' | 'middle' | 'bottom'
        ) => {
            const toast = await this.toast.create({
                message: '这是一个普通toast提示框',
                duration: 1 * 1000,
                position: position,
                color: color,
            });
            toast.present();
        },
       
    };

效果图：

 

三、ion-loading加载框效果

HTML:

 loading效果

 TS:

 constructor(private loading: LoadingController) {}

  practiceIfy = {
        onShowLoading: async () => {
            const loading = await this.loading.create({
                message: '加载ing，请稍等1秒......',
                duration: 1 * 1000,
            });
            loading.present();
        },
    };

效果图:

四、ion-search搜索框

其中debounce是来控制每一次搜索的间隔时间，以下案例的为500ms搜索一次

HTML:

 TS:

      practiceIfy = {
        value: '',
        onModelChange: (value: any) => {
            console.log(value);
        },
    };

 效果图: