استخدام مكونات الـ Angular Material
أمر إضافة ملفات مكتبة Angular Material إلى المشروع:
ng generate @angular/material:navigation <component-name>
أوامر مختصرة للـ Angular Material:
مصدر هذا الجدول هنا
ملاحظة هامة:
أضف الكود التالي لإرسال المكون المطلوب أن يمرر من خلال التوجيه:
| <router-outlet></router-outlet> |
محتوى ملف التوجيه يكون بهذا النحو:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CyperSecurityComponent } from './pages/cyper-security/cyper-security.component';
import { ProgrammingComponent } from './pages/programming/programming.component';
import { HomeComponent } from './shared/home/home.component';
const routes: Routes = [
// { path: '', redirectTo: '/home', pathMatch: 'full' },
{path: '', component: CyperSecurityComponent},
{path: 'home', component: HomeComponent},
{path: 'cyperSecurity', component: CyperSecurityComponent},
{path: 'programming', component: ProgrammingComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
من الضروري إنشاء ملف Scss فيه كل المتغيرات المطلوبة لكل الصفحات المطلوب إنشاؤها في المشروع ومن خلال ذلك سنوحد كافة الألوان وأحجام الخطوط وغير ذلك الكثير في ملف اسمه لا بد أن يكون بهذا الاسم: _variables.scss
يمكنكم انتقاء الألوان عن طريق هذه الأداة: ColorPick Eyedropper
/*
@import "src/assets/scss/_variables";
*/
$primary-color: #455A64;
$primary-color-light: lighten($primary-color, 5%);
$primary-color-dark: darken($primary-color, 15%);
$accent-color: #4caf50;
$accent-color-light: lighten($accent-color, 7%);
$accent-color-dark: darken($accent-color, 7%);
$overlay: rgba(0, 0, 0, 0.5);
$body-color: #fafafa;
$divider-color: #dddddd;
$font-color-light: #d5d5d5;
$font-color-dark: #606060;
$p-color: #606060;
$font-weight-thin:100;
$font-weight-extra-light:200;
$font-weight-light:300;
$font-weight-normal:400;
$font-weight-medium:500;
$font-weight-semi-bold:600;
$font-weight-bold:700;
$font-weight-extra-bold:800;
$font-weight-ultra-bold:900;
$hover-box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.16), 0 10px 15px 0 rgba(0, 0, 0, 0.12);
$navigation-box-shadow: 0px 0px 3px 1px $primary-color-dark;
$box-shadow: 0px 1px 5px 2px #7d7d7d;
$text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.29);
$card-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
الآن بعد إنشاء ملف يحمل المتغيرات الأساسية سنقوم بإضافة ملفات الـ Bootstrap 5.1 وهي ثلاث ملفات ثم سنضعها في المجلد assets:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss",
"src/assets/bootstrap/bootstrap.min.css"
],
"scripts": [
"src/assets/bootstrap/bootstrap.min.js",
"src/assets/bootstrap/popper.min.js"
]
ومن خلال هذا الرابط يمكننا تصفح الرموز التابعة لـ Angular
لإضافة المزيد من الأيقونات يمكنك إضافة هذا الكود إلى صفحة index.html
<link rel="stylesheet"
href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
ولتصفح الرموز الخاصة بالكود أعلاه اضغط هنا
الملف الذي يجب حفظه للبدء في استخدام مكونات الـ Angular Material:
اسم الملف المطلوب إنشاؤه: material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from "@angular/material/button";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatRadioModule } from "@angular/material/radio";
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge'
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { MatSlideToggleModule } from "@angular/material/slide-toggle";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatDividerModule } from "@angular/material/divider";
import { MatExpansionModule } from "@angular/material/expansion";
import { MatTabsModule } from "@angular/material/tabs";
import { MatStepperModule } from "@angular/material/stepper";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from "@angular/material/select";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from '@angular/material/core';
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatDialogModule } from "@angular/material/dialog";
import { MatTableModule } from "@angular/material/table";
import {MatSortModule} from "@angular/material/sort";
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatChipsModule} from '@angular/material/chips';
const material = [
MatButtonModule,
MatButtonToggleModule,
MatToolbarModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
MatSnackBarModule,
MatSlideToggleModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatBadgeModule,
MatDividerModule,
MatExpansionModule,
MatTabsModule,
MatStepperModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatAutocompleteModule,
MatCheckboxModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatTooltipModule,
MatDialogModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatChipsModule
];
@NgModule({
imports: [material],
exports: [material]
})
export class MaterialModule { }
ثم سنقوم باستدعاء الملف في ملف app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
MaterialModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
شرط الجوال والكمبيوتر:
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(
private categoriesService: CategoriesService,
private breakpointObserver: BreakpointObserver,
private mainMenuService: MainMenuService) { }
المكتبات:
import { Component } from '@angular/core';
import { Observable, map, shareReplay } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
كيفية استخدام الشرط:
<div [dir]="translateService.currentLang === 'ar'? 'rtl':'ltr'">
<img [src]="((isHandset$| async) === false)? '../assets/img/TEST_WEBSITE_BAKERY_DESGIN.jpg': '../assets/img/I_phon.jpg'"
style="width: 100%; height: 100vh !important; margin-top: -20px !important; margin-bottom: 0 !important; " alt="">
<div class="parent">
<!-- <h1 class="text-center text-black mt-5"></h1> -->
<div class="text-center text-black mt-5">
<app-lang></app-lang>
</div>
<h6 *ngIf="(isHandset$| async) === false" class="text-left text-black margin-top lh-lg ml-5">{{'SOON.COMING_SOON_TITLE_1' | translate}}</h6>
<div *ngIf="(isHandset$| async) === false" class="row mt-4 child margin-top ml-6" style="width: 20%;">
<div class="col-4">
<a href="http://al-yahya.sa" class="text-decoration-none">
<img src="../assets/icons/home.png" class="icon mx-auto d-block" alt="">
<h6 class="text-black text-center mt-3 lh-lg">{{'MAIN_MENU.HOME' | translate}}</h6>
</a>
</div>
<div class="col-4">
<a href="javascript:(0)" class="text-decoration-none" (click)="showMenu()">
<img src="../assets/icons/menu.png" class="icon mx-auto d-block" data-toggle="modal" data-target="#myModal"
alt="">
<h6 class="text-black text-center mt-3 lh-lg">{{'MAIN_MENU.MANAKISH_LIST' | translate}}</h6>
</a>
</div>
<div class="col-4">
<a href="javascript:(0)" class="text-decoration-none" (click)="showVideos()">
<img src="../assets/icons/multimedia.png" class="icon mx-auto d-block mt-2" alt="">
<h6 class="text-black mt-3 text-center lh-lg">{{'MAIN_MENU.MARKETING_VIDEOS' | translate}}</h6>
</a>
</div>
</div>
<!-- <h2 class="text-center text-black mt-5 lh-lg">{{'SOON.COMING_SOON_TITLE_2' | translate}}</h2> -->
</div>
</div>
تعليقات
إرسال تعليق