目录
前言
注意:项目本身用的是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);
},
};
效果图: