آموزش مولفه ها در برنامه نویسی انگولار

erfan molaei
3 سال پیش

آموزش مولفه ها در برنامه نویسی انگولار

 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مولفه ها در برنامه نویسی انگولار خواهیم پرداخت.

در این فصل، ما می خواهیم اجزای مهم رابط کاربری انگولار را درک کنیم. آنها به شرح زیر هستند –

  • Navbars
  • Sidebars
  • Modals
  • Overlays

Navbars

Navbars از قسمت بالا و پایین صفحه دستگاه استفاده می کند. ما می توانیم از نوار بالا برای نمایش موارد منو یا بخش سرصفحه استفاده کنیم. از نوار پایین می توان برای نمایش قسمت پاورقی استفاده کرد.

یک نمایش ساده Navbar روی صفحه به شرح زیر است –

Navbars
نوار را می توان به دو روش ثابت و رویش سرریز نشان داد.

کلاس های مهم CSS

در رابط کاربری Angular Mobile برای نشان دادن navbar باید از کلاس های css استفاده کنید – navbar، .navbar-app.

کلاسها برای رویکرد سرریز بالا / پایین
برای navbar بالا کلاس css – .navbar-absolute-top.

برای نوار پایین کلاس css – .navbar – مطلق – پایین.

کلاسها برای رویکرد ثابت بالا / پایین
برای navbar بالا کلاس css – .navbar-fixed-top.

برای نوار پایین کلاس css – .navbar-fixed-bottom.

 

در زیر کد HTML برای همان مورد آورده شده است –

 

Navbar-Top

<div class="navbar navbar-app navbar-absolute-top">
   <div class="btn-group pull-left">
      <div class="btn">
         <i class="fa fa-th-large "></i> Library
      </div>
   </div>
   <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      TutorialsPoint
   </div>
   <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <div class="btn">
         <i class="fal fa-search"></i> eBooks
      </div>
   </div>
</div>

 

Navbar-Bottom

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

 

صفحه نمایش به این شکل است –

Navbars Bottom

Sidebars

نوارهای کناری سمت چپ و راست صفحه را اشغال می کنند. با کلیک روی مورد متصل به سمت چپ یا راست ، آنها همیشه مخفی و فعال می شوند. این بهترین راه برای استفاده از فضای صفحه است.

تا کنون شاهد کار ناوبری ها بوده ایم. بیایید اکنون از قسمت navbar در سمت چپ و سمت راست برای باز کردن ستون های فرعی استفاده کنیم.

می توانید ستون های کناری را در سمت چپ یا سمت راست قرار دهید.

کلاس های مهم CSS

کلاس های css برای نوار کناری سمت چپ – نوار کناری نوار کناری سمت چپ.

کلاس های css برای نوار کناری سمت راست – نوار کناری نوار کناری سمت راست.

ظرف div برای نوار کناری به شرح زیر است –

<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>

 

تعامل با Sidebars

برای باز و بسته شدن ستون های کناری اضافه شده در سمت چپ و سمت راست، باید موارد زیر را به تگ html اضافه کنید که ستون های فرعی را باز می کند.

به عنوان مثال ، برای باز کردن نوار کناری سمت چپ با کلیک بر روی پیوند ، می توانید موارد زیر را اضافه کنید –

نوار کناری برای تغییر وضعیت موارد نوار کناری از uiSidebarLeft و uiSidebarRiststatestatestate استفاده می کند.

ما می خواهیم از نوار بالایی که قبلا اضافه کردیم استفاده کنیم. ui-toggle = ”uiSidebarLeft” و ui-toggle = ”uiSidebarRight” و همچنین نوار کناری کلاس و sidebar-right-toggle را اضافه کنید.

<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div>

 

<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>

 

حالا اجازه دهید یک ظرف div برای نوار کناری سمت چپ و نوار کناری سمت راست اضافه کنیم.

نوار کناری سمت چپ

<div class="sidebar sidebar-left">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">Tutorials</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-turn-off='uiSidebarLeft'>
            <a class="list-group-item" href="/">Home Page </a>
            <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
            <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
            <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
            <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
            <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
            <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
         </div>
      </div>
   </div>
</div>

 

می توانید از ui-turn-off = ‘uiSidebarLeft’ یا ui-turn-off = ‘uiSidebarRight’ در الگوی نوار کناری خود استفاده کنید تا وقتی روی هر قسمت از نوار کناری کلیک می شود ، نوار کناری را ببندید. با کلیک بر روی هرجای خارج از الگوی نوار کناری ، نوار کناری به طور پیش فرض بسته خواهد شد.

در نوار سمت چپ وقتی کاربر روی پیوندها کلیک می کند ، نوار کناری بسته می شود زیرا ما ui-turn-off = ‘uiSidebarLeft’ را به الگوی نوار کناری سمت چپ اضافه کرده ایم.

نوار کناری سمت راست

<div class="sidebar sidebar-right">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">eBooks</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-toggle="uiSidebarRight">
            <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
            <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
         </div>
      </div>
   </div>
</div>

 

نمایش نوار کناری در مرورگر به شرح زیر است –

برای مشاهده منوی نوار کناری سمت چپ ، روی آموزشها کلیک کنید ، همانطور که در زیر نشان داده شده است –

Left Sidebar

بر روی کتابهای الکترونیکی کلیک کنید تا منوی سمت راست را ببینید همانطور که در زیر نشان داده شده است –

Right Sidebar

Modals و Overlays

Modals and Overlays یک پنجره نوع بازشو در صفحه شما نشان می دهد. تداخل ها فقط با نحوه نمایش ظرف برای آن متفاوت است.

برای فعال یا رد کردن پوشش یا حالت مادری ، باید از ngIf / uiIf یا ngHide / uiHide به همراه uiState استفاده کنید.

css برای modal .modal خواهد بود و برای overlay نیز .modal-overlay خواهد بود.

برای نشان دادن حالت عادی و همپوشانی ، ظرف div زیر را در داخل index.html خود اضافه کنید.

<div ui-yield-to = "modals"> </div>

 

اجازه دهید ما یک صفحه اصلی را به پاورقی navbar که قبلاً انجام داده ایم اختصاص دهیم.

navbar footer

تغییرات زیر را به پیوندهای درباره ما و تماس با ما اضافه کنید –

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

 

اگر روی این لینک کلیک کنیم، Modals و Overlays باز می شود.

محتوای مدال و پوشش در داخل پرونده src / home / home.html اضافه می شود.

محتوای اصلی برای مد و پوشش باید درون ظرف div زیر قرار گیرد –

<div ui-content-for="modals">
   <div class="modal"><!-- ... --></div>
</div>

 

اجازه دهید ما محتوا را به نمای مودال و همپوشانی اضافه کنیم. نامی که ما در پیوندها استفاده کرده ایم ، یعنی ui-turn-on = “aboutus_modal” و ui-turn-on = “contactus_overlay” ، همان مواردی که در داخل برای محتوای modus modus و محتوای overlay contactus استفاده می شود.

<div ui-content-for="modals">
   <div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <div class="modal-backdrop in"></div>
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
               <p>Testing Modal</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
               <button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
   <div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </div>
            <div class="modal-body">
               <p>Testing Overlay</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
               <button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</div>

صفحه نمایش برای حالت و پوشش به شرح زیر است –

با کلیک بر روی آن را به صورت زیر نشان می دهد –

Onclick
با کلیک بر روی CONTACT US  آن را به صورت زیر نشان می دهد –

Contact
برای بستن پنجره حالت بر روی دکمه بستن کلیک کنید.

 

منبع.

 

لیست جلسات قبل آموزش برنامه نویسی انگولار 

  1. آموزش برنامه نویسی انگولار
  2. بررسی اجمالی برنامه نویسی انگولار
  3. آموزش نصب انگولار 
  4. آموزش راه اندازی پروژه در برنامه نویسی انگولار
  5. آموزش اولین برنامه انگولار
  6. آموزش طرح بندی در برنامه نویسی انگولار
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه