سنقوم بوضع تصميم للقائمة الجانبية لتطبيقنا حيث ستظهر القائمة بهدا الشكل
أول شيء يتعين فعله هو تغيير الألوان الافتراضية التي يقدمها التطبيق ولتغيير هده الألوان الافتراضية ندخل الى ملف src/theme/variables.scss
ونقوم باستبدال متغيرات الألوان الافتراضية بهده الألوان
$colors: (
primary: #50a2a7,
secondary: #98aa7c,
danger: #f53d3d,
light: #f4f4f4,
dark: #37474f,
);
نتوجه الى ملف src/app/app.html
ونعدل على القائمة الرئيسية الافتراضية ليصبح محتوى الملف بهدا الشكل
<ion-menu [content]="content">
<ion-header>
<ion-toolbar class="user-profile">
<ion-grid>
<ion-row>
<ion-col col-4>
<div class="logo-box">
<img src="../assets/icon/favicon.ico">
</div>
</ion-col>
<ion-col padding-top col-8>
<h2 ion-text>Main Menu</h2>
</ion-col>
</ion-row>
<ion-row no-padding padding-top padding-bottom>
<ion-col no-padding>
<button color="primary" ion-button icon-left small full menuClose>
<ion-icon name="contact"></ion-icon>
Register
</button>
</ion-col>
<ion-col no-padding>
<button color="secondary" ion-button icon-left small full menuClose (click)="logint()">
<ion-icon name="lock"></ion-icon>
Login
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
نضف هدا التنسيق كالعادة بملف src/app/app.scss
ion-menu{
// رأس القائمة
ion-header{
h2{
margin-top: 5px;
}
h2,div{
font-family: $font-family-base;
color: #000 !important;
}
}
// محتويات القائمة
ion-content{
background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
font-family: $font-family-base ;
}
.item {
background-color: transparent;
}
.list .item-block .item-inner {
border-bottom: 1px solid #cbcba8;
}
}
لاننسى اضافة عناصر القائمة بملف الكود src/app/app.component.ts
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// مثال عن القائمة الرئيسية .
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'Cars', component: ListPage },
{ title: 'My Cart', component: ListPage },
{ title: 'About', component: ListPage },
{ title: 'Settings', component: ListPage },
];
}
النتيجة
المرفقات :
ستجد جميع ملفات الدرس الخاصة بالمجلد src هنا
ملفات الخطوط الصور ملف cars.js وملف الخدمة والصفحات الخ..
https://www.mediafire.com/file/aow9dwane0qwbk4/cars-auto-v0.0.1.zip/file
دائما ننصح باعادة كتابة الكود من أجل تقوى مستواك افضل من تحميل الكود جاهز