logo أكاديمية أكسبورت للتطوير والبرمجة logo-alt أكاديمية أكسبورت للتطوير والبرمجة
تسجيل الدخول  أو  تسجيل حساب
  • الرئيسية
  • دروس برمجية
    • HTML
    • CSS
    • ANGULAR
    • IONIC / MOBILE
    • YII 2.0
    • Odoo /epen ERP
  • مفاهيم برمجية
  • من نحـن
  • اتصل بنا

تصميم القائمة الرئيسية menu

side menu

Mobile development الصفحة الرئيسية

سنقوم بوضع تصميم للقائمة الجانبية  لتطبيقنا  حيث ستظهر القائمة بهدا الشكل 

 

 

أول شيء يتعين فعله هو تغيير الألوان الافتراضية التي يقدمها التطبيق ولتغيير هده الألوان الافتراضية ندخل الى ملف 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

دائما ننصح باعادة  كتابة الكود من أجل تقوى مستواك افضل من تحميل الكود جاهز 

 

ماهو تقييمك للدرس
تقييم الزوار للدرس
الدرس السابق : انشاء مكونات الصفحة الرئيسية للتطبيق الدرس القادم : انشاء صفحة محتوى السيارة - تفاصيل المنتج-
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • انشاء صفحة محتوى السيارة - تفاصيل المنتج-
    detail page
  • تجهيز صفحة add to cart
    add to cart
  • كيفية تغيير كمية المنتج في السلة Change in Quantity
    ionic quantity
  • تجهيز قائمة البحث عن المنتج search item
    search bar
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved