src/app/components/qr-scanner-ios/qr-scanner-ios.component.ts
| selector | app-qr-scanner-ios |
| styleUrls | ./qr-scanner-ios.component.scss |
| templateUrl | ./qr-scanner-ios.component.html |
Methods |
constructor(modalCtrl: ModalController)
|
||||||
|
Parameters :
|
| closeModal |
closeModal()
|
|
Returns :
void
|
| ionViewDidLeave |
ionViewDidLeave()
|
|
Returns :
void
|
| ionViewWillEnter |
ionViewWillEnter()
|
|
Returns :
void
|
| Private toggleQRScanner | ||||||
toggleQRScanner(action: "add" | "remove")
|
||||||
|
Parameters :
Returns :
void
|
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-qr-scanner-ios',
templateUrl: './qr-scanner-ios.component.html',
styleUrls: ['./qr-scanner-ios.component.scss'],
})
export class QrScannerIOSComponent {
constructor(private modalCtrl: ModalController) { }
ionViewWillEnter() {
this.toggleQRScanner("add");
}
closeModal() {
this.modalCtrl.dismiss();
}
private toggleQRScanner(action: "add" | "remove") {
const mainContent = window.document.querySelector('ion-app>ion-split-pane');
if (mainContent) {
mainContent.classList[action]('hide');
}
}
ionViewDidLeave() {
this.toggleQRScanner("remove");
}
}
<ion-header>
<ion-toolbar>
<ion-title>{{ 'SCAN_QR_CODE' | translate }}</ion-title>
<ion-buttons class="sb-hamburger" slot="start">
<ion-button icon-only (click)="closeModal()">
<ion-icon class="arrow-icon" role="button" aria-label="back" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content no-scroll class="qrscanner" fullscreen>
<div class="ui-container" style="position: relative"></div>
<div class="ui-content">
<div class="text-center">{{ 'SCAN_QR_INSTRUCTION' | translate }}</div>
<img class="qr-img" src="assets/imgs/qr_with_book.svg" alt="qr_with_book">
</div>
<div class="qrscanner-area">
</div>
</ion-content>
./qr-scanner-ios.component.scss
.qrscanner {
--background: transparent !important;
background: transparent !important;
}
.qr-img {
display: block;
margin: auto;
}