آشنایی با Angular Material 1.0
دوشنبه 19 مهر 1395در این مقاله قصد داریم شما را با 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
- AngularJs
- 3k بازدید
- 5 تشکر