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项目中不能起到效果

  <ion-item>
    <ion-input label="Default input"></ion-input>
  </ion-item>

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

                  <ion-list>
                    <ion-item>
                        <ion-label>
                            <ion-text>姓名</ion-text>
                        </ion-label>
                        <ion-input placeholder="请输入姓名" [clearInput]="true">
                        </ion-input>
                    </ion-item>
                    <ion-item>
                        <ion-label>年龄</ion-label>
                        <ion-input
                            label="年龄"
                            placeholder="请输入年龄"
                            [clearInput]="true"
                        ></ion-input>
                    </ion-item>
                    <ion-item>
                        <ion-label>密码</ion-label>
                        <ion-input type="password" value="password" [clearInput]="true"> 
                        </ion-input>
                    </ion-item>
                    <ion-item>
                        <ion-label position="floating">
                            <ion-text>浮动</ion-text>
                        </ion-label>
                        <ion-input placeholder="Enter text" [clearInput]="true">
                        </ion-input>
                    </ion-item>
                    <ion-item>
                        <ion-label position="stacked">
                            <ion-text>固定</ion-text>
                        </ion-label>
                        <ion-input
                            placeholder="Enter text"
                            [clearInput]="true"
                            helperText="Helper text"
                        ></ion-input>
                    </ion-item>
                </ion-list>

二、ion-toast提示框

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

HTML:

           <ion-button (click)="practiceIfy.onShowToast('primary', 'top')"
                >toast普通效果</ion-button
            >
            <ion-button (click)="practiceIfy.onShowToast('success', 'middle')"
                >toast成功效果</ion-button
            >
            <ion-button (click)="practiceIfy.onShowToast('danger', 'bottom')"
                >toast警告效果</ion-button
            >

 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:

 <ion-button (click)="practiceIfy.onShowLoading()" expand="block"
                >loading效果</ion-button
            >

 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:

                 <ion-searchbar
                    value="Value"
                    placeholder="请输入搜索内容"
                    [(ngModel)]="practiceIfy.value"
                    [debounce]="500"
                    (ngModelChange)="practiceIfy.onModelChange($event)"
                ></ion-searchbar>

 TS:

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

 效果图: