備忘錄_20160105(定位)
修改
回首頁
程式 2020-03-25 23:08:35 1585148915 100
閱讀 IONIC 4+ 的心得 PART 12 - popover
閱讀 IONIC 4+ 的心得 PART 12 - popover
[cmd] ionic g component pages/about
在 src/app/pages/about/about.component.html 裡面,編輯
<div style="text-align:cneter;" padding>
<h3>TITLE</h3>
<small>small words!</small>
<p>Author ......</p>
<small>© 2019</small>
</div>
在 app.module.ts 裡面,加入
import { AboutComponent } from './pages/about/about.component';
@NgModule
({
declarations: [AboutComponent, ......],
entryComponents:[AboutComponent], ......
})
在 app.component.ts 裡面,加入
import { PopoverController } from '@ionic/angular';
import { AboutComponent } from './pages/about/about.component';
export class AppComponent
{
constructor
(
private popoverCtrl:PopoverController
)
{}
async about()
{
const popover=await this.popoverCtrl.create
({
component:AboutComponent,
translucent:true
});
await popover.present();
}
}
在 app.component.html 裡面,加入
<ion-list>
<ion-menu-toggle *ngFor="let p of addPages"
</ion-menu-toggle>
<ion-item (click)="about()">
<ion-icon slot="start" name="information-circle"></ion-icon>
<ion-label>About this app</ion-label>
</ion-item>
</ion-list>