آشنایی با Angular Material 1.0

در این مقاله قصد داریم شما را با Angular Material 1.0 آشنا کنیم ، و در آخر یاد خواهید گرفتم که چگونه می توان با استفاده از آن قالب وب سایت خود را به زیبایی طراحی کنید .

آشنایی با Angular Material 1.0

Angular Material چیست ؟

در سایت اصلی Angular Material  برای برنامه نویسان دو رفرنس AngularJS  ، Angular Material برای پیاده سازی Component UI فراهم شده است .

در واقع ، Angular Material مجموعه ای از Component هایی است که برای طراحی استفاده می شود و آنها شامل Directive های هستند که میتوان ازآن ها به صورت روزانه استفاده کنید . Component ها در Angular Material بسیار جالب و دراستفاده بسیار آسان هستند  و به ما کمک میکند وب سایت خود را سریع ، زیبا و responsive ایجاد کنیم .

وابستگی های مورد نیاز برای Angular Material

-Angular.js

-Angular-animate.js

-Angular-aria.js

-Angular-material

- فایل CSS

-Angular-material.css

 

حال میخواهیم برنامه خود را ایجاد کنیم .

مثال :


<html ng-app="MyApp">  
  
<head>  
    <title>First App Angular Material</title>  
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" />  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>  
    <script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>  
</head>  
  
<body>  
    <div ng-controller="AppCtrl">  
        <md-button class="md-raised md-primary" ng-click="buttonClick()">  
            {{ButtonText}}  
        </md-button>  
    </div>  
</body>  
  
</html>  
<script>  
    angular.module('MyApp', ['ngMaterial'])  
        .controller('AppCtrl', function($scope, $mdSidenav) {  
            $scope.ButtonText = "Test Button";  
  
            $scope.buttonClick = function() {  
                alert("First Angular Material App");  
            };  
        });  
</script>  
این مثال در Codepen
 

Component    Md-Toolbar  در Angular Material

<md-toolbar>

درواقع ، Tollbar شامل تیتر صفحه می باشد .مانند مثال زیر :

1. <md-toolbar>  
2.     <div class="md-toolbar-tools">  
3.         <h2 md-header-title flex>برنامه نویسان </h2>  
4.     </div>  
5. </md-toolbar>

کلاس های مفید :

md-tall

این کلاس برای نوار ابزار بزرگتر استفاده می  شود ، همچنین میتوان از md-medium-tall برای نوار ابزار متوسط استفاده کرد .

 

md-toolbar-bottom

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

md-toolbar-tools

تمامی بخش های نوار ابزار زیر این کلاس قرار دارند .

md-warn

این کلاس نوار ابزار را به رنگ warning تبدیل می کند .

md-accent

این کلاس نوار ابزار را به رنگ accent تبدیل می کند .

 

در مثال زیر یک نوار ابزار ایجاد می کنیم :

1. <html>  
2. <html>  
3.   
4. <head>  
5.     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">  
6.     <style>  
7.         [scroll] {  
8.             position: fixed;  
9.             top: 0;  
10.         }  
11.           
12.         section {  
13.             height: 1600px;  
14.         }  
15.           
16.         i {  
17.             font-size: 24px;  
18.         }  
19.     </style>  
20. </head>  
21.   
22. <body ng-app="myApp">  
23.     <md-toolbar scroll class="md-warn">  
24.         <div class="md-toolbar-tools">  
25.             <h2 md-header-title flex>تیتر</h2>  
26.         </div>  
27.     </md-toolbar>  
28.     <section id="page-section">  
29.         <md-content>  
30.             <!-- Here Your Content -->  
31.         </md-content>  
32.     </section>  
33.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>  
34.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>  
35.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>  
36.     <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>  
37. </body>  
38.   
39. </html> 

مثال بالا در Codepen

Sidenav(Md-Sidenav)  با Angular Material

<md-sidenav>

Sidenav برای ناوبری استفاده می شود . آن را اغلب در نرم افزار های تلفن همراه مشاهده کرده اید . معمولا از آن در Site-map استفاده می شود و شامل لیستی از لینک ها برای تابع های مختلف است .

در قسمت زیر یک مثال از نوار ابزار ایجاد کرده ایم.

<md-sidenav class="md-sidenav-left" md-is-locked-open=true>  
2.     <md-toolbar layout-padding class="md-medium-tall">  
3.         <h2> Sidenav</h2>  
4.     </md-toolbar>  

در این مثال ما با استفاده از کلاس md-sidenav-left ، Sidenav قسمت چب را باز می کنیم . اگر میخواهید آن را در سمت راست نمایش دهید . میتوان از md-sidenav-right استفاده کنید .

در اینجا ، ما از md-is-locked-open  استفاده کرده ایم . زمانی از آن استفاده می کنیم که بخواهیم Sidenav   را نمایش دهیم . درواقع برای گوشی های همراه کوچک و همچنین تمامی دستگاه ها استفاده می شود .همچنین شما میتوان سایز صفحه را با استفاده از md-sidenav-is-open=”$mdMedia(‘gt-sm’)”  تغییر دهید .

سرویس$mdSidenav

Angular Material یک سرویس به sidenav می دهد . ممکن است زمانی که از service   استفاده می کنیم چند Sidenav ایجاد شود برای همین میتوان با استفاده از کد زیر آن را باز و بسته کنید :

• $mdService('sidenavId').open() 
• $mdService('sidenavId').close() 

آموزش angular

دانلود نسخه ی PDF این مطلب