كيفية إنشاء مربع حوّار MatDialog
الخطوة الأولى: محتوى صفحة فتح مربع الحوار:
<button mat-raised-button color="primary" (click)="openDialog(item)">Open dialog</button>
محتوى الـ ts :
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from '../dialog-content/dialog-content.component';
@Component({
selector: 'app-bootstrap-carsousel',
templateUrl: './bootstrap-carsousel.component.html',
styleUrls: ['./bootstrap-carsousel.component.scss']
})
export class BootstrapCarsouselComponent implements OnInit {
@Input('items') items: any = [];
constructor(public dialog: MatDialog) { }
openDialog(item:any) {
const dialogRef = this.dialog.open(DialogContentComponent, {
data: {item: item},
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
ngOnInit(): void {
}
}
الخطوة الثانية: نقوم بإنشاء مكوّن جديد لصفحة الحوّار كالتالي:
<h2 mat-dialog-title>{{data.item.NAME_AR}}</h2>
<mat-dialog-content
class="mat-typography mat-dialog-full-width mat-dialog-full-height"
style="overflow: auto;">
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">video_library</mat-icon>
قائمة التشغيل
</ng-template>
<ul class="list-group mt-3 mb-2">
<li class="list-group-item d-flex justify-content-between align-items-center">
تاريخ آخر تحديث
<span class="badge bg-primary rounded-pill">{{data.item.UPDATED | date}}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
اسم مدرب المقرر
<span class="badge bg-primary rounded-pill">{{data.item.TEACHER_AR}}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
رابط قائمة التشغيل
<span class="badge"> <a [href]="data.item.LINK" target="_blank" mat-raised-button color="warn">
الاطلاع على كافة المحاضرات</a>
</span>
</li>
</ul>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">file_copy</mat-icon>
الملفات المساعدة
</ng-template>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">محتوى الملف المساعد</th>
<th scope="col">الأيقونة</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data.item.HELP;let i=index">
<th scope="row">{{i+1}}</th>
<td><a [matTooltip]="item.DESC_AR" target="_blank" [href]="item.LINK">{{item.NAME_AR}}</a>
</td>
<td><i [class]="item.ICON"></i>
</td>
</tbody>
</table>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
الاختبارات المتوقعة
</ng-template>
<table class="table" *ngIf="data.item.EXAMS.length != 0; else elseBlock">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">محتوى الملف المساعد</th>
<th scope="col">الأيقونة</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data.item.EXAMS;let i=index">
<th scope="row">{{i+1}}</th>
<td><a [matTooltip]="item.DESC_AR" target="_blank" [href]="item.LINK">{{item.NAME_AR}}</a>
</td>
<td><i [class]="item.ICON"></i>
</td>
</tbody>
</table>
<ng-template #elseBlock>
<mat-card class="example-card mx-auto d-block mt-3 mb-2 pt-3">
<!-- <mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header> -->
<!-- <mat-icon class="sad-face mx-auto d-block">sentiment_very_dissatisfied</mat-icon> -->
<!-- <i class="mdi mdi-emoticon-sad-outline sad-face text-center"></i> -->
<br>
<svg mat-card-image class="mt-2 mb-2" xmlns="http://www.w3.org/2000/svg" width="90" height="90"
fill="currentColor" class="bi bi-emoji-frown" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z" />
</svg>
<!-- <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> -->
<mat-card-content>
<h4 class="text-justify lh-lg">
نأسف ما من اختبارات محتملة، راسلنا إن كنت تمتلك إحداها!
<!-- من المؤسف أنه لا توجد اختبارات محتملة لهذا المقرر ولكن يمكنك مراسلتنا لتزويدنا باختبار متوقع من قِبلك! -->
</h4>
</mat-card-content>
<mat-card-actions>
<a href="http://wa.me/966508532127" target="_blank" mat-raised-button color="accent">مراستنا</a>
<a href="https://abdullah-alsalem-cv.netlify.app/" target="_blank" mat-raised-button
color="accent">زيارة موقع مهندس الموقع</a>
</mat-card-actions>
</mat-card>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-stroked-button mat-dialog-close cdkFocusInitial>إغلاق</button>
</mat-dialog-actions>
محتوى الـ ts:
import { Component, Inject, Input, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
export interface DialogData {
item: any;
}
@Component({
selector: 'app-dialog-content',
templateUrl: './dialog-content.component.html',
styleUrls: ['./dialog-content.component.scss']
})
export class DialogContentComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<DialogContentComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData,
) {}
ngOnInit(): void {
}
}
محتوى الـ css:
.example-tab-icon {
margin-left: 8px;
}
.example-card {
max-width: 400px;
}
.example-header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}
.sad-face{
width: auto !important;
height: 50px !important;
}
//-------------------------------------------------------------------------------------------------------------------------//
مربع الحوار الداخلي:
ملف الـ HTML
<ng-template #leaveDialog class="card cardchild">
<div class="warn-border" [dir]="(translateService.currentLang === 'ar')?'rtl' : 'ltr'">
<h1 class="back-primary text-white" mat-dialog-title>{{'LABELS.CONFIRM_LEAVING_PAGE' | translate}}</h1>
<p mat-dialog-content class="mt-4">{{'WARNING.UNSAVED_CHANGES' | translate}}</p>
<div mat-dialog-actions class="text-center">
<button [mat-dialog-close]="true" class="back-accent mx-auto d-block text-white" mat-button mat-dialog-close
[routerLink]="'/maintenance_tickets'"><span class="text-white">{{'BUTTONS.LEAVE_PAGE' |
translate}}</span></button>
<button [mat-dialog-close]="false" class="back-primary mx-auto d-block text-white" mat-button
mat-dialog-close (click)="closeDialog()"><span class="text-white">{{'BUTTONS.CANCELE' |
translate}}</span></button>
</div>
</div>
</ng-template>
ملف الـ ts:
@Component({
selector: 'app-add-new-maintenance-ticket',
templateUrl: './add-new-maintenance-ticket.component.html',
styleUrls: ['./add-new-maintenance-ticket.component.scss']
})
export class AddNewMaintenanceTicketComponent {
@ViewChild('leaveDialog', { static: true }) leaveDialog: TemplateRef<any>;
leaveDialogRef: MatDialogRef<any>;
constructor(
public dialog: MatDialog,
public translateService: TranslateService,
) { }
onLeave() {
this.leaveDialogRef = this.dialog.open(this.leaveDialog);
}
}
//-------------------------------------------------------------- العرض الكامل:
_notHasTelegramChat() {
const dialogRef = this.dialog.open(NotHasTelegramChatComponent, {
width: '100%',
height: '80%'
});
dialogRef.afterClosed().subscribe(result => {
this.refresh();
});
}
في MyDialogComponent، قم بتعيين فئات mat-dialog-full-width وmat-dialog-full-height للتأكد من أنها تمتد على إطار العرض بالكامل:
<mat-dialog-content class="mat-dialog-full-width mat-dialog-full-height">
</mat-dialog-content>
ملء الشاشة مع Dialog:
تجربة ممتازة.
deleteItem(item: Ingredient) {
let config = {
data: item,
disableClose: true,
height: '98%',
width: '98%',
panelClass: 'full-screen-modal',
};
if (this.crudPermission('DELETE')) {
this.current = item;
const dialogRef = this.dialog.open(this.deleteDialog, config);
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._deleteItem(item);
setTimeout(() => {
this.getItems();
}, 500);
}
});
} else {
this.snackBarService.warning(this.translateService.instant('ERRORS._ACCESS_DENIED'));
}
}
محتوى css:
.full-screen-modal {
max-width: unset !important;
width: 100%;
height: 100%;
.mat-dialog-container {
max-width: 100vw;
max-height: 100vh;
height: 100%;
width: 100%;
.mat-dialog-content {
max-height: unset !important;
}
}
}
المصدر:
https://g.co/gemini/share/08e5d9a4e759
تعليقات
إرسال تعليق