วัสดุเชิงมุม - คู่มือฉบับย่อ

Angular Material คือไลบรารีส่วนประกอบ UI สำหรับนักพัฒนา Angular JS ส่วนประกอบ UI ที่ใช้ซ้ำได้ของ Angular Material ช่วยในการสร้างหน้าเว็บและแอปพลิเคชันบนเว็บที่น่าดึงดูดสอดคล้องและใช้งานได้ในขณะที่ยึดหลักการออกแบบเว็บสมัยใหม่เช่นความสามารถในการพกพาของเบราว์เซอร์ความเป็นอิสระของอุปกรณ์และการย่อยสลายที่สวยงาม

ต่อไปนี้เป็นคุณสมบัติเด่นบางประการของ Angular Material -

  • การออกแบบที่ตอบสนองในตัว

  • CSS มาตรฐานที่มีพื้นที่น้อยที่สุด

  • รวมถึงเวอร์ชันใหม่ของตัวควบคุมอินเทอร์เฟซผู้ใช้ทั่วไปเช่นปุ่มกล่องกาเครื่องหมายและช่องข้อความซึ่งปรับให้สอดคล้องกับแนวคิดการออกแบบวัสดุ

  • รวมถึงคุณสมบัติพิเศษที่ได้รับการปรับปรุงเช่นการ์ดแถบเครื่องมือโทรด่วนการนำทางด้านข้างการปัดและอื่น ๆ

  • ข้ามเบราว์เซอร์และสามารถใช้เพื่อสร้างส่วนประกอบของเว็บที่ใช้ซ้ำได้

การออกแบบที่ตอบสนอง

  • Angular Material มีการออกแบบที่ตอบสนองในตัวเพื่อให้เว็บไซต์ที่สร้างโดยใช้ Angular Material จะออกแบบตัวเองใหม่ตามขนาดอุปกรณ์

  • คลาส Angular Material ถูกสร้างขึ้นเพื่อให้เว็บไซต์สามารถพอดีกับขนาดหน้าจอใดก็ได้

  • เว็บไซต์ที่สร้างโดยใช้ Angular Material เข้ากันได้กับพีซีแท็บเล็ตและอุปกรณ์มือถือ

ขยายได้

  • Angular Material ได้รับการออกแบบให้เรียบง่ายและเรียบง่าย

  • ได้รับการออกแบบโดยคำนึงถึงความจริงที่ว่าการเพิ่มกฎ CSS ใหม่นั้นง่ายกว่าการเขียนทับกฎ CSS ที่มีอยู่

  • รองรับแสงเงาและสีจัดจ้าน

  • สีและเฉดสียังคงสม่ำเสมอในแพลตฟอร์มและอุปกรณ์ต่างๆ

และที่สำคัญที่สุด Angular Material สามารถใช้งานได้ฟรี

วิธีใช้วัสดุเชิงมุม

มีสองวิธีในการใช้วัสดุเชิงมุม -

  • Local Installation - คุณสามารถดาวน์โหลดไลบรารี Angular Material โดยใช้ npm, jspm หรือ bower บนเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ

  • CDN Based Version - คุณสามารถรวมไฟล์ angular-material.min.css และ angular-material js ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

สำหรับเราใช้คำสั่ง npm ต่อไปนี้เราต้องการการติดตั้ง NodeJS ในระบบของเรา หากต้องการรับข้อมูลเกี่ยวกับโหนด JS คลิกที่นี่และเปิดอินเทอร์เฟซบรรทัดคำสั่ง NodeJS เราจะใช้คำสั่งต่อไปนี้เพื่อติดตั้งไลบรารี Angular Material

npm install angular-material

คำสั่งดังกล่าวจะสร้างผลลัพธ์ต่อไปนี้ -

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm จะดาวน์โหลดไฟล์ภายใต้ node_modules > angular-materialโฟลเดอร์ รวมไฟล์ตามที่อธิบายไว้ในตัวอย่างต่อไปนี้ -

ตัวอย่าง

ตอนนี้คุณสามารถรวมไฟล์cssและjsในไฟล์ HTML ของคุณได้ดังนี้ -

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>
         
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
         the Web Hypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไฟล์ angular-material.css และ angular-material.jsไฟล์ลงในโค้ด HTML ของคุณโดยตรงจาก Content Delivery Network (CDN) Google CDN มีเนื้อหาสำหรับเวอร์ชันล่าสุด

เรากำลังใช้ไลบรารีเวอร์ชัน Google CDN ตลอดบทช่วยสอนนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ angular-material.min.css และ angular-material.min.js จาก Google CDN

<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
         XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
         content on the World Wide Web.</p>

         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
         ypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -

md-autocompleteAngular Directive ใช้เป็นตัวควบคุมอินพุตพิเศษพร้อมด้วยเมนูแบบเลื่อนลง inbuilt เพื่อแสดงการจับคู่ที่เป็นไปได้ทั้งหมดกับแบบสอบถามที่กำหนดเอง ตัวควบคุมนี้ทำหน้าที่เป็นกล่องคำแนะนำแบบเรียลไทม์ทันทีที่ผู้ใช้พิมพ์ในพื้นที่อินพุต<md-autocomplete>สามารถใช้เพื่อให้ผลการค้นหาจากแหล่งข้อมูลภายในหรือระยะไกล md-autocomplete จะแคชผลลัพธ์เมื่อดำเนินการค้นหา หลังจากการโทรครั้งแรกจะใช้ผลลัพธ์ที่แคชเพื่อกำจัดคำขอเซิร์ฟเวอร์ที่ไม่จำเป็นหรือตรรกะการค้นหาและสามารถปิดใช้งานได้

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-autocomplete.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

* md-items

นิพจน์ในรูปแบบของรายการในรายการเพื่อวนซ้ำการจับคู่สำหรับการค้นหาของคุณ
2

md-selected-item-change

นิพจน์ที่จะรันทุกครั้งที่เลือกรายการใหม่
3

md-search-text-change

นิพจน์ที่จะเรียกใช้ทุกครั้งที่มีการอัปเดตข้อความค้นหา
4

md-search-text

แบบจำลองในการผูกข้อความค้นหา
5

md-selected-item

แบบจำลองเพื่อผูกรายการที่เลือก
6

md-item-text

นิพจน์ที่จะแปลงวัตถุของคุณเป็นสตริงเดียว
7

placeholder

ข้อความตัวยึดตำแหน่งที่จะส่งต่อไปยังอินพุต
8

md-no-cache

ปิดใช้งานการแคชภายในที่เกิดขึ้นในการเติมข้อความอัตโนมัติ
9

ng-disabled

กำหนดว่าจะปิดใช้งานช่องป้อนข้อมูลหรือไม่
10

md-min-length

ระบุความยาวขั้นต่ำของข้อความก่อนที่การเติมข้อความอัตโนมัติจะให้คำแนะนำ
11

md-delay

ระบุระยะเวลา (เป็นมิลลิวินาที) เพื่อรอก่อนที่จะค้นหาผลลัพธ์
12

md-autofocus

หากเป็นจริงจะโฟกัสองค์ประกอบอินพุตทันที
13

md-autoselect

หากเป็นจริงรายการแรกจะถูกเลือกโดยค่าเริ่มต้น
14

md-menu-class

ซึ่งจะนำไปใช้กับเมนูแบบเลื่อนลงสำหรับการจัดรูปแบบ
15

md-floating-label

สิ่งนี้จะเพิ่มป้ายกำกับลอยในการเติมข้อความอัตโนมัติและห่อไว้ใน md-input-container
16

md-input-name

แอตทริบิวต์ชื่อที่กำหนดให้กับองค์ประกอบอินพุตที่จะใช้กับ FormController
17

md-input-id

ID ที่จะเพิ่มให้กับองค์ประกอบอินพุต
18

md-input-minlength

ความยาวต่ำสุดสำหรับค่าของอินพุตสำหรับการตรวจสอบความถูกต้อง
19

md-input-maxlength

ความยาวสูงสุดสำหรับค่าของอินพุตสำหรับการตรวจสอบความถูกต้อง
20

md-select-on-match

เมื่อตั้งค่าเป็นจริงการเติมข้อความอัตโนมัติจะเลือกรายการที่ต้องการโดยอัตโนมัติหากข้อความค้นหาตรงกันทุกประการ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-autocomplete คำสั่งและการใช้การเติมข้อความอัตโนมัติ

am_autocomplete.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);

         function autoCompleteController ($timeout, $q, $log) {
            var self = this;
            self.simulateQuery = false;
            self.isDisabled    = false;
            
            // list of states to be displayed
            self.states        = loadStates();
            self.querySearch   = querySearch;
            self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            self.newState = newState;
            
            function newState(state) {
               alert("This functionality is yet to be implemented!");
            }
            
            function querySearch (query) {
               var results = query ? self.states.filter( createFilterFor(query) ) :
                  self.states, deferred;
                  
               if (self.simulateQuery) {
                  deferred = $q.defer();
                     
                  $timeout(function () { 
                     deferred.resolve( results ); 
                  }, 
                  Math.random() * 1000, false);
                  return deferred.promise;
               } else {
                  return results;
               }
            }
            
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
            }
            
            function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }
            
            //build list of states as map of key-value pairs
            function loadStates() {
               var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                  Wisconsin, Wyoming';
                  
               return allStates.split(/, +/g).map( function (state) {
                  return {
                     value: state.toLowerCase(),
                     display: state
                  };
               });
            }
            
            //filter function for search query
            function createFilterFor(query) {
               var lowercaseQuery = angular.lowercase(query);
               return function filterFn(state) {
                  return (state.value.indexOf(lowercaseQuery) === 0);
               };
            }
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from
               local or remote data sources.</p>
               
               <md-autocomplete
                  ng-disabled = "ctrl.isDisabled"
                  md-no-cache = "ctrl.noCache"
                  md-selected-item = "ctrl.selectedItem"
                  md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text = "ctrl.searchText"
                  md-selected-item-change = "ctrl.selectedItemChange(item)"
                  md-items = "item in ctrl.querySearch(ctrl.searchText)"
                  md-item-text = "item.display"
                  md-min-length = "0"
                  placeholder = "US State?">
                  
                  <md-item-template>
                     <span md-highlight-text = "ctrl.searchText"
                        md-highlight-flags = "^i">{{item.display}}</span>
                  </md-item-template>
                  
                  <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found.
                     <a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
                  </md-not-found>
               </md-autocomplete>
               <br/>
               
               <md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
                  </md-checkbox>
               <md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
               <md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
               <p><code>md-autocomplete</code> caches results when performing a query.
               After first call, it uses the cached results to eliminate unnecessary
               server requests or lookup logic and it can be disabled.</p>
            </form>
         </md-content>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

$mdBottomSheetAngular Service ใช้เพื่อเปิดแผ่นงานด้านล่างบนแอปพลิเคชันและจัดเตรียม API สัญญาแบบง่ายๆ

SN วิธีการและคำอธิบาย
1

$mdBottomSheet.show(options);

แสดงแผ่นงานด้านล่างพร้อมตัวเลือกที่ระบุ

SN พารามิเตอร์และคำอธิบาย
1

* options

อ็อบเจ็กต์อ็อพชันที่มีคุณสมบัติดังต่อไปนี้ -

  • templateUrl - {string=}- URL ของไฟล์เทมเพลต html ที่จะใช้เป็นเนื้อหาของแผ่นงานด้านล่าง ข้อ จำกัด : เทมเพลตต้องมีองค์ประกอบ md-bottom-sheet ด้านนอก

  • template - {string=} - เหมือนกับ templateUrl ยกเว้นว่านี่คือสตริงเทมเพลตจริง

  • scope - {object=}- ขอบเขตในการเชื่อมโยงแม่แบบ / ตัวควบคุมไป หากไม่มีการระบุไว้ระบบจะสร้างขอบเขตลูกใหม่ ขอบเขตนี้จะถูกทำลายเมื่อนำแผ่นงานด้านล่างออกเว้นแต่ว่า preserveScope จะตั้งค่าเป็นจริง

  • preserveScope - {boolean=}- กำหนดว่าจะรักษาขอบเขตหรือไม่เมื่อองค์ประกอบถูกลบออก โดยค่าเริ่มต้นจะเป็นเท็จ

  • controller - {string=} - ตัวควบคุมที่จะเชื่อมโยงกับแผ่นงานด้านล่างนี้

  • locals - {string=}- วัตถุที่มีคู่คีย์ / ค่า คีย์จะถูกใช้เป็นชื่อของค่าที่จะฉีดเข้าไปในคอนโทรลเลอร์ ตัวอย่างเช่น,locals: {three: 3} จะฉีดสามตัวลงในตัวควบคุมด้วยค่า 3

  • clickOutsideToClose - {boolean=}- กำหนดว่าผู้ใช้สามารถคลิกนอกแผ่นงานด้านล่างเพื่อปิดได้หรือไม่ โดยค่าเริ่มต้นมันเป็นจริง

    • escapeToClose - {boolean =}: กำหนดว่าผู้ใช้สามารถกด escape เพื่อปิดแผ่นงานด้านล่างได้หรือไม่ โดยค่าเริ่มต้นมันเป็นจริง

  • resolve - {object=} - คล้ายกับคนในท้องถิ่นยกเว้นว่าจะใช้คำสัญญาเป็นค่านิยมและแผ่นงานด้านล่างจะไม่เปิดจนกว่าคำสัญญาจะคลี่คลาย

    • controllerAs - {string =}: นามแฝงเพื่อกำหนดคอนโทรลเลอร์ให้กับขอบเขต

  • parent - {element=}- องค์ประกอบที่จะต่อท้ายแผ่นงานด้านล่าง พาเรนต์อาจเป็นฟังก์ชันสตริงอ็อบเจ็กต์หรือโมฆะ ค่าดีฟอลต์คือการต่อท้ายเนื้อหาขององค์ประกอบรูท (หรือองค์ประกอบรูท) ของแอ็พพลิเคชัน เช่น angular.element (document.getElementById ('content')) หรือ "#content"

  • disableParentScroll - {boolean=}- ปิดใช้งานการเลื่อนในขณะที่แผ่นงานด้านล่างเปิดอยู่หรือไม่ ค่าเริ่มต้นจริง
ซีเนียร์ No ผลตอบแทนและคำอธิบาย
1

promise

คำสัญญาที่สามารถแก้ไขได้ด้วย $ mdBottomSheet.hide () หรือปฏิเสธด้วย $ mdBottomSheet.cancel ()

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ $mdBottomSheet บริการและการใช้แผ่นงานด้านล่าง

am_bottomsheet.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
     <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-cardAngular Directive เป็นคำสั่งคอนเทนเนอร์และใช้เพื่อวาดการ์ดในแอปพลิเคชัน angularjs ตารางต่อไปนี้แสดงรายการคำสั่งเชิงมุมและคลาสที่ใช้ใน md-card

ซีเนียร์ No คำสั่ง / คลาสและคำอธิบาย
1

<md-card-header>

ส่วนหัวของการ์ดถืออวตารข้อความและรูปภาพกำลังสอง
2

<md-card-avatar>

อวาตาร์การ์ด
3

md-user-avatar

คลาสสำหรับรูปภาพของผู้ใช้
4

<md-icon>

คำสั่งไอคอน
5

<md-card-header-text>

มีองค์ประกอบสำหรับคำอธิบายการ์ด
6

md-title

คลาสสำหรับชื่อการ์ด
7

md-subhead

คลาสสำหรับส่วนหัวย่อยของการ์ด
8

<img>

รูปภาพสำหรับการ์ด
9

<md-card-title>

ชื่อเนื้อหาการ์ด
10

<md-card-title-text>

ที่เก็บข้อความชื่อการ์ด
11

md-headline

คลาสสำหรับชื่อเนื้อหาการ์ด
12

md-subhead

คลาสสำหรับส่วนหัวย่อยเนื้อหาการ์ด
13

<md-card-title-media>

รูปภาพกำลังสองภายในชื่อเรื่อง
14

md-media-sm

คลาสสำหรับภาพขนาดเล็ก
15

md-media-md

คลาสสำหรับภาพขนาดกลาง
16

md-media-lg

คลาสสำหรับภาพขนาดใหญ่
17

<md-card-content>

เนื้อหาการ์ด
18

md-media-xl

คลาสสำหรับภาพขนาดใหญ่พิเศษ
19

<md-card-actions>

การทำงานของการ์ด
20

<md-card-icon-actions>

การทำงานของไอคอน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่ง md-card และการใช้คลาสการ์ด

am_cards.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

         function cardController ($scope) {            
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">  
      <md-card>
         <img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
         <md-card-header>
            <md-card-avatar>
               <img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
            </md-card-avatar>
            
            <md-card-header-text>
               <span class = "md-title">HTML5</span>
               <span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span>
            </md-card-header-text>
         </md-card-header>
         
         <md-card-title>
            <md-card-title-text>
               <span class = "md-headline">HTML5</span>
            </md-card-title-text>
         </md-card-title>
         
         <md-card-actions layout = "row" layout-align = "start center">
            <md-button>Download</md-button>
            <md-button>Start</md-button>
            <md-card-icon-actions>
               <md-button class = "md-icon-button" aria-label = "icon">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
            </md-card-icon-actions>
         </md-card-actions>
         
         <md-card-content>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
            XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
            content on the World Wide Web.</p>
            
            <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
            Web Hypertext Application Technology Working Group (WHATWG).</p>
            
            </p>The new standard incorporates features like video playback and 
            drag-and-drop that have been previously dependent on third-party browser
            plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
         </md-card-content>
      </md-card>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Angular Material มีไลบรารีของวิดเจ็ต UI มากมาย สิ่งนี้ช่วยให้ผู้ใช้มีความสามารถในการโต้ตอบขั้นสูงกับแอปพลิเคชัน

ตารางต่อไปนี้แสดงรายการวิดเจ็ตที่สำคัญสองสามรายการพร้อมคำอธิบาย -

ซีเนียร์ No วิดเจ็ตและคำอธิบาย
1 ปุ่มต่างๆ

md-buttonAngular Directive คือคำสั่งปุ่มที่มีระลอกหมึกเสริม (และเปิดใช้งานโดยค่าเริ่มต้น) ถ้าhref หรือ ng-href มีการระบุแอตทริบิวต์จากนั้นคำสั่งนี้จะทำหน้าที่เป็นองค์ประกอบยึด
2 CheckBoxes

md-checkboxAngular Directive ใช้เป็นตัวควบคุมช่องทำเครื่องหมาย
3 เนื้อหา

md-contentAngular Directive เป็นองค์ประกอบคอนเทนเนอร์และใช้สำหรับเนื้อหาที่เลื่อนได้ layout-padding สามารถเพิ่มแอตทริบิวต์เพื่อให้มีเนื้อหาที่มีเบาะ
4 เลือกวันที่

md-datepickerAngular Directive คือตัวควบคุมอินพุตเพื่อเลือกวันที่ นอกจากนี้ยังรองรับ ngMessages สำหรับการตรวจสอบอินพุต
5 ไดอะล็อก

md-dialogAngular Directive เป็นองค์ประกอบคอนเทนเนอร์และใช้เพื่อแสดงกล่องโต้ตอบ องค์ประกอบของมันmd-dialog-content มีเนื้อหาของกล่องโต้ตอบและไฟล์ md-dialog-actions มีหน้าที่รับผิดชอบในการโต้ตอบ

mdDialogซึ่งเป็นบริการเชิงมุมจะเปิดกล่องโต้ตอบบนแอปพลิเคชันเพื่อแจ้งให้ผู้ใช้ทราบและช่วยในการตัดสินใจ
6 ตัวแบ่ง

md-dividerAngular Directive เป็นองค์ประกอบของกฎและใช้เพื่อแสดงกฎน้ำหนักเบาเพื่อจัดกลุ่มและแบ่งเนื้อหาภายในรายการและเค้าโครงหน้า
7 รายการ

md-listคำสั่งเชิงมุมคือส่วนประกอบคอนเทนเนอร์ที่มี md-list-itemองค์ประกอบตอนเป็นเด็ก คำสั่ง md-list-item เป็นส่วนประกอบคอนเทนเนอร์สำหรับไอเท็มแถวของ md-list container คลาส CSSmd-2-line และ md-3-line สามารถเพิ่มลงใน md-list-item เพื่อเพิ่มความสูงของแถวด้วย 22px และ 40px ตามลำดับ
8 เมนู

md-menuคำสั่งเชิงมุมเป็นส่วนประกอบในการแสดงตัวเลือกเพิ่มเติมภายในบริบทของการดำเนินการ md-menuมีองค์ประกอบลูกสองอย่าง องค์ประกอบแรกคือtrigger elementและใช้เพื่อเปิดเมนู องค์ประกอบที่สองคือmd-menu-contentเพื่อแสดงเนื้อหาของเมนูเมื่อเปิดเมนู md-menu-content มักจะมีรายการเมนูเป็น md-menu-item
9 แถบเมนู

md-menu-barเป็นส่วนประกอบคอนเทนเนอร์สำหรับเก็บหลายเมนู แถบเมนูช่วยในการสร้างเอฟเฟกต์เมนูที่จัดเตรียมไว้ให้ระบบปฏิบัติการ
10 แถบความคืบหน้า

md-progress-circular และ md-progress-linear เป็นคำสั่งความคืบหน้าเชิงมุมและใช้เพื่อแสดงข้อความการโหลดเนื้อหาในแอปพลิเคชัน
11 ปุ่มวิทยุ

md-radio-group และ md-radio-buttonคำสั่งเชิงมุมใช้เพื่อแสดงปุ่มตัวเลือกในแอปพลิเคชัน md-radio-group คือคอนเทนเนอร์การจัดกลุ่มสำหรับองค์ประกอบปุ่ม md-radio
12 เลือก

md-selectคำสั่งเชิงมุมใช้เพื่อแสดงกล่องเลือกที่ล้อมรอบด้วย ng-model
13 แถบเครื่องมือ Fab

md-fab-toolbarคำสั่งเชิงมุมใช้เพื่อแสดงแถบเครื่องมือขององค์ประกอบหรือปุ่มต่างๆเพื่อให้เข้าถึงการกระทำทั่วไปได้อย่างรวดเร็ว
14 แถบเลื่อน

md-sliderคำสั่งเชิงมุมใช้เพื่อแสดงองค์ประกอบช่วง มีสองโหมด -

  • normal- ผู้ใช้สามารถเลื่อนไปมาระหว่างค่าต่างๆได้ ค่าเริ่มต้น.

  • discrete- ผู้ใช้สามารถเลื่อนระหว่างค่าที่เลือก ในการเปิดใช้งานโหมดไม่ต่อเนื่องให้ใช้แอตทริบิวต์ md-discrete และ step
15 แท็บ

md-tabs และ md-tabคำสั่งเชิงมุมใช้เพื่อแสดงแท็บในแอปพลิเคชัน md-tabs คือการจัดกลุ่มคอนเทนเนอร์สำหรับองค์ประกอบ md-tab
16 แถบเครื่องมือ

md-toolbarคำสั่งเชิงมุมใช้เพื่อแสดงแถบเครื่องมือซึ่งโดยปกติจะเป็นพื้นที่เหนือเนื้อหาเพื่อแสดงชื่อเรื่องและปุ่มที่เกี่ยวข้อง
17 คำแนะนำเครื่องมือ

Angular Material มีวิธีการพิเศษต่างๆเพื่อแสดงคำแนะนำเครื่องมือที่ไม่สร้างความรำคาญให้กับผู้ใช้ Angular Material มีวิธีในการกำหนดทิศทางสำหรับพวกเขาและคำสั่ง md-tooltip ใช้เพื่อแสดงคำแนะนำเครื่องมือ คำแนะนำเครื่องมือจะเปิดใช้งานเมื่อใดก็ตามที่ผู้ใช้โฟกัสวางเมาส์เหนือหรือแตะส่วนประกอบหลัก
18 ชิป

md-chipsAngular Directive ใช้เป็นส่วนประกอบพิเศษที่เรียกว่าชิปและสามารถใช้เพื่อแสดงข้อมูลชุดเล็ก ๆ เช่นผู้ติดต่อแท็กเป็นต้นแม่แบบที่กำหนดเองสามารถใช้เพื่อแสดงเนื้อหาของชิป สิ่งนี้สามารถทำได้โดยการระบุองค์ประกอบ md-chip-template ที่มีเนื้อหาที่กำหนดเองเป็นลูกของ md-chips
19 ชิปติดต่อ

md-contact-chipsAngular Directive คือตัวควบคุมอินพุตที่สร้างขึ้นบนชิป md และใช้ไฟล์ md-autocompleteธาตุ. ส่วนประกอบชิปผู้ติดต่อยอมรับนิพจน์เคียวรีซึ่งส่งคืนรายชื่อผู้ติดต่อที่เป็นไปได้ ผู้ใช้สามารถเลือกหนึ่งในสิ่งเหล่านี้และเพิ่มลงในรายการชิปที่พร้อมใช้งาน

คำสั่งเค้าโครง

คำสั่งเค้าโครงบนองค์ประกอบคอนเทนเนอร์ถูกใช้เพื่อระบุทิศทางโครงร่างสำหรับลูกของมัน ต่อไปนี้เป็นค่าที่กำหนดได้สำหรับ Layout Directive -

  • row - รายการจัดเรียงในแนวนอนโดยมี max-height = 100% และ max-width คือความกว้างของรายการในคอนเทนเนอร์

  • column - รายการจัดเรียงในแนวตั้งโดยมีความกว้างสูงสุด = 100% และความสูงสูงสุดคือความสูงของรายการในคอนเทนเนอร์

สำหรับการออกแบบที่ตอบสนองเช่นโครงร่างที่จะเปลี่ยนโดยอัตโนมัติขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์สามารถใช้ Layout API ที่แสดงในตารางต่อไปนี้เพื่อกำหนดทิศทางการจัดวางสำหรับอุปกรณ์ที่มีความกว้างของมุมมอง

ซีเนียร์ No ความกว้างของ API และอุปกรณ์เมื่อเบรกพอยต์แทนที่ค่าเริ่มต้น
1

layout

กำหนดทิศทางโครงร่างเริ่มต้นเว้นแต่จะถูกแทนที่โดยเบรกพอยต์อื่น
2

layout-xs

ความกว้าง <600px
3

layout-gt-xs

ความกว้าง> = 600px
4

layout-sm

600px <= width <960px
5

layout-gt-sm

ความกว้าง> = 960px
6

layout-md

960px <= width <1280px
7

layout-gt-md

ความกว้าง> = 1280px
8

layout-lg

1280px <= width <1920px
9

layout-gt-lg

ความกว้าง> = 1920px
10

layout-xl

ความกว้าง> = 1920px

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่งเค้าโครงและการใช้เค้าโครง

am_layouts.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         style = "height:100px;" ng-cloak>
         <div layout = "row" layout-xs = "column">
            <div flex class = "green box">Row 1: Item 1</div>
            <div flex = "20" class = "blue box">Row 1: Item 2</div>
         </div>
         
         <div layout = "column" layout-xs = "column">
            <div flex = "33" class = "green box">Column 1: item 1</div>
            <div flex = "66" class = "blue box">Column 1: item 2</div>
         </div>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

คำสั่ง Flex

คำสั่ง flex บนองค์ประกอบคอนเทนเนอร์ใช้เพื่อปรับแต่งขนาดและตำแหน่งขององค์ประกอบ กำหนดวิธีการปรับขนาดองค์ประกอบตามคอนเทนเนอร์หลักและองค์ประกอบอื่น ๆ ภายในคอนเทนเนอร์ ต่อไปนี้เป็นค่าที่กำหนดได้สำหรับคำสั่ง flex -

  • multiples of 5 - 5, 10, 15 ... 100

  • 33 - 33%

  • 66 - 66%

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่ง flex และการใช้ flex

am_flex.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         layout = "row" style = "height:100px;" ng-cloak layout-wrap>
         <div flex = "30" class = "green box">
            [flex = "30"]
         </div>
         
         <div flex = "45" class = "blue box">
            [flex = "45"]
         </div>
         
         <div flex = "25" class = "green box">
            [flex = "25"]
         </div>
         
         <div flex = "33" class = "green box">
            [flex = "33"]
         </div>
         
         <div flex = "66" class = "blue box">
            [flex = "66"]
         </div>
         
         <div flex = "50" class = "blue box">
            [flex = "50"]
         </div>
         
         <div flex class = "green box">
            [flex]
         </div>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-input-containerคำสั่งเชิงมุมคือส่วนประกอบคอนเทนเนอร์ที่มี <input> หรือ <textarea>องค์ประกอบตอนเป็นเด็ก นอกจากนี้ยังรองรับการจัดการข้อผิดพลาดโดยใช้คำสั่ง ng-messages มาตรฐานและทำให้ข้อความเคลื่อนไหวโดยใช้เหตุการณ์ ngEnter / ngLeave หรือเหตุการณ์ ngShow / ngHide

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-input-container.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

md-maxlength

จำนวนอักขระสูงสุดที่อนุญาตในอินพุตนี้ หากระบุสิ่งนี้ตัวนับอักขระจะแสดงอยู่ใต้อินพุต จุดประสงค์ของ md-maxlength คือการแสดงข้อความตัวนับที่มีความยาวสูงสุด หากคุณไม่ต้องการข้อความตอบโต้และต้องการเพียงการตรวจสอบความถูกต้อง "ธรรมดา" คุณสามารถใช้แอตทริบิวต์ ng-maxlength หรือ maxlength "simple" ได้
2

aria-label

จำเป็นต้องมีฉลาก Aria เมื่อไม่มีฉลาก ข้อความเตือนจะถูกบันทึกในคอนโซลหากไม่มีป้ายกำกับ
3

placeholder

อีกทางเลือกหนึ่งในการใช้ฉลาก aria เมื่อไม่มีฉลาก ข้อความตัวยึดจะถูกคัดลอกไปยังแอตทริบิวต์ aria-label
4

md-no-autogrow

เมื่อมีอยู่พื้นที่ข้อความจะไม่เติบโตโดยอัตโนมัติ
5

md-detect-hidden

ในปัจจุบันพื้นที่ข้อความจะมีขนาดที่เหมาะสมเมื่อถูกเปิดเผยหลังจากถูกซ่อน ซึ่งจะปิดโดยค่าเริ่มต้นเนื่องจากเหตุผลด้านประสิทธิภาพเนื่องจากรับประกันการแสดงซ้ำทุกรอบการสรุปย่อย

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่ง md-input-container และการใช้อินพุต

am_inputs.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
        
      </style>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('inputController', inputController);

         function inputController ($scope) {
            $scope.project = {
               comments: 'Comments',    
            };
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "inputContainer" class = "inputDemo"
         ng-controller = "inputController as ctrl" ng-cloak>
         <md-content layout-padding>
            <form name = "projectForm">
               
               <md-input-container class = "md-block">
                  <label>User Name</label>
                  <input required name = "userName" ng-model = "project.userName">
                  <div ng-messages = "projectForm.userName.$error">
                     <div ng-message = "required">This is required.</div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Email</label>
                  <input required type = "email" name = "userEmail"
                     ng-model = "project.userEmail"
                     minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
                  <div ng-messages = "projectForm.userEmail.$error" role = "alert">
                     <div ng-message-exp = "['required', 'minlength', 'maxlength',
                        'pattern']">
                        Your email must be between 10 and 100 characters long and should
                        be a valid email address.
                     </div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Comments</label>
                  <input md-maxlength = "300" required name = "comments"
                     ng-model = "project.comments">
                  <div ng-messages = "projectForm.comments.$error">
                     <div ng-message = "required">This is required.</div>
                     <div ng-message = "md-maxlength">The comments has to be less
                        than 300 characters long.</div>
                  </div>
               </md-input-container>
               
            </form>
         </md-content>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-iconคำสั่งเชิงมุมเป็นส่วนประกอบในการแสดงไอคอนที่ใช้เวกเตอร์ในแอปพลิเคชัน รองรับแบบอักษรไอคอนและไอคอน SVG นอกเหนือจากการใช้ Google Material Icons

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-icon.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

* md-font-icon

นี่คือชื่อสตริงของไอคอน CSS ที่เชื่อมโยงกับแบบอักษรซึ่งจะใช้ในการแสดงผลไอคอน ต้องมีการโหลดแบบอักษรและสไตล์ CSS ที่กำหนดไว้ล่วงหน้า
2

* md-font-set

นี่คือชื่อสไตล์ CSS ที่เชื่อมโยงกับไลบรารีฟอนต์ซึ่งจะถูกกำหนดให้เป็นคลาสสำหรับการรวมฟอนต์ - ไอคอน ค่านี้อาจเป็นนามแฝงที่ใช้ในการค้นหาชื่อคลาส ใช้ภายใน $ mdIconProvider.fontSet (<alias>) เพื่อกำหนดชื่อสไตล์
3

* md-svg-src

นี่คือ String URL (หรือนิพจน์) ที่ใช้ในการโหลดแคชและแสดง SVG ภายนอก
4

* md-svg-icon

นี่คือชื่อสตริงที่ใช้สำหรับค้นหาไอคอนจากแคชภายใน นอกจากนี้ยังสามารถใช้สตริงหรือนิพจน์ที่แก้ไขได้ สามารถใช้ชื่อชุดเฉพาะกับไวยากรณ์ <set name>: <icon name> ในการใช้ชุดไอคอนนักพัฒนาจำเป็นต้องลงทะเบียนชุดล่วงหน้าโดยใช้บริการ $ mdIconProvider
5

aria-label

ไอคอนป้ายกำกับนี้สำหรับการช่วยสำหรับการเข้าถึง หากระบุสตริงว่างไว้ไอคอนจะซ่อนจากเลเยอร์การช่วยสำหรับการเข้าถึงด้วย aria-hidden = "true" หากไม่มีป้ายกำกับ aria บนไอคอนหรือป้ายกำกับบนองค์ประกอบหลักคำเตือนจะถูกบันทึกลงในคอนโซล
6

alt

ไอคอนป้ายกำกับนี้สำหรับการช่วยสำหรับการเข้าถึง หากระบุสตริงว่างไอคอนจะซ่อนจากเลเยอร์การช่วยการเข้าถึงด้วย aria-hidden = "true" หากไม่มี alt บนไอคอนหรือป้ายกำกับบนองค์ประกอบหลักคำเตือนจะถูกบันทึกลงในคอนโซล

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่งไอคอน md และการใช้ไอคอน

am_icons.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .iconDemo .glyph {
            border-bottom: 1px dotted #ccc;
            padding: 10px 0 20px;
            margin-bottom: 20px; 
         }
         
         .iconDemo .preview-glyphs {
            display: flex;
            flex-direction: row; 
         }
         
         .iconDemo .step {
            flex-grow: 1;
            line-height: 0.5; 
         }
         
         .iconDemo .material-icons.md-18 {
            font-size: 18px; 
         }
         
         .iconDemo .material-icons.md-24 {
            font-size: 24px; 
         }
         
         .iconDemo .material-icons.md-36 {
            font-size: 36px; 
         }
         
         .iconDemo .material-icons.md-48 {
            font-size: 48px; 
         }
         
         .iconDemo .material-icons.md-dark {
            color: rgba(0, 0, 0, 0.54); 
         }
         
         .iconDemo .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26); 
         }
         
         .iconDemo .material-icons.md-light {
            color: white; 
         }
         
         .iconDemo .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('iconController', iconController);

         function iconController ($scope) {
            var iconData = [
               {name: 'accessibility'  , color: "#777" },
               {name: 'question_answer', color: "rgb(89, 226, 168)" },
               {name: 'backup'         , color: "#A00" },
               {name: 'email'          , color: "#00A" }
            ];
            
            $scope.fonts = [].concat(iconData);            
            $scope.sizes = [
               {size:"md-18",padding:0},
               {size:"md-24",padding:2},
               {size:"md-36",padding:6},
               {size:"md-48",padding:10}
            ];
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "iconContainer" class = "iconDemo"
         ng-controller = "iconController as ctrl" ng-cloak>
         <div class = "glyph" ng-repeat = "font in fonts" layout = "row">
            <div ng-repeat = "it in sizes" flex layout-align = "center center"
               style = "text-align: center;" layout = "column">
            <div flex></div>
               <div class = "preview-glyphs">
                  <md-icon ng-style = "{color: font.color}"
                     aria-label = "{{ font.name }}"
                     class = "material-icons step"
                     ng-class = "it.size">
                     {{ font.name }}
                  </md-icon>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-grid-listคำสั่งเชิงมุมเป็นองค์ประกอบสำหรับการจัดวางเนื้อหาสำหรับขนาดหน้าจอที่แตกต่างกัน ตารางมีคอลัมน์ 12 คอลัมน์ในหน้าจอขนาดเดสก์ท็อป 8 ในหน้าจอขนาดแท็บเล็ตและ 4 ในหน้าจอขนาดโทรศัพท์โดยแต่ละขนาดจะมีระยะขอบและรางน้ำที่กำหนดไว้ล่วงหน้า เซลล์จะถูกจัดวางในลักษณะตามลำดับในแถวตามลำดับที่กำหนดไว้

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-grid-list.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

* md-cols

นี่คือจำนวนคอลัมน์ในกริด
2

* md-row-height

หนึ่งใน

  • CSS length - แถวความสูงคงที่ (เช่น 8px หรือ 1rem)

  • {width}:{height} - อัตราส่วนความกว้างต่อความสูง (เช่น md-row-height = "16: 9")

  • "fit" - ความสูงจะถูกกำหนดโดยการแบ่งย่อยความสูงที่มีอยู่ด้วยจำนวนแถว
3

md-gutter

จำนวนช่องว่างระหว่างไทล์ในหน่วย CSS (ค่าเริ่มต้น 1px)
4

md-on-layout

นิพจน์เพื่อประเมินหลังเค้าโครง อ็อบเจ็กต์เหตุการณ์พร้อมใช้งานเป็น $ event และมีข้อมูลประสิทธิภาพ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-grid-list คำสั่งและการใช้กริด

am_grid.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('gridController', gridController);

         function gridController ($scope) {
            var COLORS = [
               '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
               '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
               '#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
               '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
               '#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
               '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
               '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
               '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
               '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
               '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
               '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
               '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
               '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
               '#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
               '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
               '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
               '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
               '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
               '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
               '#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
               '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
               '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
               '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
               '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
               '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
               '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
               '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
               '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
               '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
               '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
               '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
               '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
               '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
               '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
               '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
               '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
               '#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
               '#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
               '#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-list
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                     'background': tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-list>
         </md-content>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

ปรับขนาดหน้าจอเพื่อดูเอฟเฟกต์

md-sidenavคำสั่งเชิงมุมใช้เพื่อแสดงส่วนประกอบคอนเทนเนอร์ซึ่งสามารถแสดงหรือซ่อนโดยใช้โปรแกรมได้ มันจะเลื่อนออกไปด้านบนสุดของขอบเขตเนื้อหาหลักตามค่าเริ่มต้น

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-sidenav

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

md-is-open

แบบจำลองที่เชื่อมโยงกับว่าเปิด sidenav หรือไม่
2

md-component-id

componentId เพื่อใช้กับบริการ $ mdSidenav
3

md-is-locked-open

เมื่อนิพจน์นี้ประเมินว่าเป็นจริง sidenav จะ 'ล็อกเปิด': จะตกอยู่ในโฟลว์ของเนื้อหาแทนที่จะปรากฏเหนือนิพจน์ สิ่งนี้จะแทนที่แอตทริบิวต์ is-open บริการ $ mdMedia () จะสัมผัสกับแอตทริบิวต์ is-lock-open ซึ่งสามารถรับข้อความค้นหาสื่อหรือค่าที่ตั้งไว้ล่วงหน้า sm, gt-sm, md, gt-md, lg หรือ gt-lg

Examples -

<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-sidenav และการใช้ไฟล์ sidenav ส่วนประกอบ.

am_sidenav.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('sideNavController', sideNavController);

         function sideNavController ($scope, $mdSidenav) {
            $scope.openLeftMenu = function() {
               $mdSidenav('left').toggle();
            };
             
            $scope.openRightMenu = function() {
               $mdSidenav('right').toggle();
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
         layout = "row" ng-cloak>
         <md-sidenav md-component-id = "left" class = "md-sidenav-left">
            Welcome to TutorialsPoint.Com</md-sidenav>
         
         <md-content>           
            <md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
            <md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
         </md-content>
         
         <md-sidenav md-component-id = "right" class = "md-sidenav-right">
            <md-button href = "http://google.com">Google</md-button>
         </md-sidenav>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-fab-speed-dialคำสั่งเชิงมุมใช้เพื่อแสดงชุดขององค์ประกอบหรือปุ่มป๊อปอัปเพื่อการเข้าถึงการดำเนินการทั่วไปอย่างรวดเร็ว

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-fab-speed-dial.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

* md-direction

สิ่งนี้กำหนดทิศทางที่จะแสดงการหมุนเร็วโดยสัมพันธ์กับองค์ประกอบทริกเกอร์
2

md-open

ซึ่งจะช่วยควบคุมโดยทางโปรแกรมว่าจะมองเห็นปุ่มหมุนเร็วหรือไม่

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่ง md-fab-speed-dial และการใช้การโทรด่วน

am_speeddial.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .fabSpeedDial .text-capitalize {
            text-transform: capitalize; 
         }
         
         .fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
            background-color: #000 !important; 
         }
         
         .fabSpeedDial p.note {
            font-size: 1.2rem; 
         }
         
         .fabSpeedDial .lock-size {
            min-width: 300px;
            min-height: 300px;
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto; 
         } 
      </style>

      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('speedDialController', speedDialController);

         function speedDialController ($scope) {
            this.topDirections = ['left', 'up'];
            this.bottomDirections = ['down', 'right'];
            this.isOpen = false;
            this.availableModes = ['md-fling', 'md-scale'];
            this.selectedMode = 'md-fling';
            this.availableDirections = ['up', 'down', 'left', 'right'];
            this.selectedDirection = 'up';
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "fabSpeedDial" id = "speedDialContainer"
         ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
         <md-content>
            <div class = "lock-size" layout = "row" layout-align = "center center">
               <md-fab-speed-dial md-open = "ctrl.isOpen"
                  md-direction = "{{ctrl.selectedDirection}}"
                  ng-class = "ctrl.selectedMode">
                  
                  <md-fab-trigger>
                     <md-button aria-label = "menu" class = "md-fab md-warn">
                        <md-icon class = "material-icons">menu</md-icon>
                     </md-button>
                  </md-fab-trigger>
                  
                  <md-fab-actions>
                     <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                        md-accent">
                        <md-icon class = "material-icons" aria-label = "Add">
                           add</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Insert Link" class = "md-fab md-raised
                        md-mini md-accent">
                        <md-icon class = "material-icons" aria-label = "Insert Link">
                           insert_link</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                           md-accent">
                        <md-icon class = "material-icons" aria-label = "Edit">
                           mode_edit</md-icon>
                     </md-button>
                  </md-fab-actions>
               </md-fab-speed-dial>
            </div>

            <div layout = "row" layout-align = "space-around">
               <div layout = "column" layout-align = "start center">
                  <b>Direction</b>
                  <md-radio-group ng-model = "ctrl.selectedDirection">
                     <md-radio-button ng-repeat = "direction in ctrl.availableDirections"
                        ng-value = "direction" class = "text-capitalize">
                        {{direction}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Open/Closed</b>
                  <md-checkbox ng-model = "ctrl.isOpen">
                     Open
                  </md-checkbox>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Animation Modes</b>
                  <md-radio-group ng-model = "ctrl.selectedMode">
                     <md-radio-button ng-repeat = "mode in ctrl.availableModes"
                        ng-value = "mode">
                        {{mode}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
            </div>
         </md-content>	 
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-subheaderซึ่งเป็นคำสั่งเชิงมุมใช้เพื่อแสดงส่วนหัวย่อยของส่วน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-subheader และการใช้ส่วนประกอบส่วนหัวย่อย

am_subheaders.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('subheaderController', subheaderController);

         function subheaderController ($scope) {
            $scope.fruitNames = ['Apple', 'Banana', 'Orange'];
            $scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
            $scope.eateries = ['Milk', 'Bread'];
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
         layout = "column" flex layout-fill ng-cloak>
         <md-toolbar md-scroll-shrink>
            <div class = "md-toolbar-tools">Items</div>
         </md-toolbar>
         
         <md-content style = "height: 600px;">
            <section>
               <md-subheader class = "md-primary">Fruits</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "fruits in fruitNames">
                     <div>
                        <p>{{fruits}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader class = "md-warn">Vegetables</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "veg in vegNames">
                     <div>
                        <p>{{veg}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader>Eateries</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "eatery in eateries">
                     <div>
                        <p>{{eatery}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
         </md-content>
         
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

ฟังก์ชัน Swipe มีไว้สำหรับอุปกรณ์เคลื่อนที่ คำสั่งต่อไปนี้ใช้เพื่อจัดการกับการปัดนิ้ว

  • md-swipe-downคำสั่งเชิงมุมใช้เพื่อระบุพฤติกรรมที่กำหนดเองเมื่อเลื่อนองค์ประกอบลง

  • md-swipe-leftคำสั่งเชิงมุมใช้เพื่อระบุพฤติกรรมที่กำหนดเองเมื่อเลื่อนองค์ประกอบไปทางซ้าย

  • md-swipe-rightคำสั่งเชิงมุมใช้เพื่อระบุลักษณะการทำงานที่กำหนดเองเมื่อองค์ประกอบถูกปัดไปทางขวา

  • md-swipe-upคำสั่งเชิงมุมใช้เพื่อระบุลักษณะการทำงานที่กำหนดเองเมื่อเลื่อนองค์ประกอบขึ้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-รูด - * และการใช้ส่วนประกอบรูด

am_swipes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

         function swipeController ($scope) {
            $scope.onSwipeLeft = function(ev) {
               alert('Swiped Left!');
            };
             
            $scope.onSwipeRight = function(ev) {
               alert('Swiped Right!');
            };
             
            $scope.onSwipeUp = function(ev) {
               alert('Swiped Up!');
            };
             
            $scope.onSwipeDown = function(ev) {
               alert('Swiped Down!');
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <md-card>
         <div id = "swipeContainer" ng-controller = "swipeController as ctrl"
            layout = "row" ng-cloak>
            <div flex>
               <div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
                  <span class = "no-select">Swipe me to the left</span>
                  <md-icon md-font-icon = "android" aria-label = "android"></md-icon>
               </div>
               
               <md-divider></md-divider>
               <div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
                  <span class = "no-select">Swipe me to the right</span>
               </div>
            </div>

            <md-divider></md-divider>
            <div flex layout = "row">
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-up = "onSwipeUp()">
                  <span class = "no-select">Swipe me up</span>
               </div>
               
               <md-divider></md-divider>
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-down = "onSwipeDown()">
                  <span class = "no-select">Swipe me down</span>
               </div>
            </div>
            
         </div>
      </md-card>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-switchคำสั่งเชิงมุมใช้เพื่อแสดงสวิตช์

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-switch.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

* ng-model

นิพจน์เชิงมุมที่กำหนดให้กับการเชื่อมโยงข้อมูลกับ
2

name

ชื่อคุณสมบัติของแบบฟอร์มที่มีการเผยแพร่ตัวควบคุม
3

ng-true-value

ค่าที่ควรตั้งค่านิพจน์เมื่อเลือก
4

ng-false-value

ค่าที่ควรตั้งค่านิพจน์เมื่อไม่ได้เลือก
5

ng-change

นิพจน์เชิงมุมที่จะดำเนินการเมื่ออินพุตเปลี่ยนแปลงเนื่องจากการโต้ตอบของผู้ใช้กับองค์ประกอบอินพุต
6

ng-disabled

เปิด / ปิดตามนิพจน์
7

md-no-ink

การใช้แอตทริบิวต์ระบุการใช้เอฟเฟกต์หมึกกระเพื่อม
8

aria-label

ซึ่งจะเผยแพร่ป้ายกำกับปุ่มที่โปรแกรมอ่านหน้าจอใช้สำหรับการเข้าถึง ค่านี้เป็นค่าเริ่มต้นของข้อความของสวิตช์

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ md-รูด - * และการใช้ส่วนประกอบรูด

am_switches.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('switchController', switchController);

         function switchController ($scope) {
            $scope.data = {
               switch1: true,
               switch2: false,
               switch3: false,
               switch4: true,
               switch5: true,
               switch6: false
            };
               
            $scope.message = 'false';
            $scope.onChange = function(state) {
               $scope.message = state;
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "switchContainer" ng-controller = "switchController as ctrl"
         layout = "column" ng-cloak>
         <md-switch ng-model = "data.switch1" aria-label = "Switch 1">
            Switch 1: {{ data.switch1 }}
         </md-switch>
         
         <md-switch ng-model = "data.switch2" aria-label = "Switch 2"
            ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
            Switch 2 (md-warn): {{ data.switch2 }}
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled switch"
            ng-model = "disabledModel">
            Switch 3 (Disabled)
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled active switch"
            ng-model = "data.switch4">
            Switch 4 (Disabled, Active)
         </md-switch>
         
         <md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
            ng-model = "data.switch5">
            Switch 5 (md-primary): No Ink
         </md-switch>
         
         <md-switch ng-model = "data.switch6" aria-label = "Switch 6"
            ng-change = "onChange(data.switch6)">
            Switch 6 : {{ message }}
         </md-switch>    
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

ส่วนประกอบ Angular Material ใช้คลาสกลุ่มความตั้งใจเช่น md-primary, md-accent, md-warn และคลาสเพิ่มเติมสำหรับความแตกต่างของสีเช่น md-hue-1, md-hue-2 หรือ md-hue-3 ส่วนประกอบต่อไปนี้สนับสนุนการใช้คลาสดังกล่าวข้างต้น

  • md-button
  • md-checkbox
  • md-progress-circular
  • md-progress-linear
  • md-radio-button
  • md-slider
  • md-switch
  • md-tabs
  • md-text-float
  • md-toolbar

สามารถกำหนดค่าธีมได้โดยใช้ $ mdThemingProvider ระหว่างการกำหนดค่าแอปพลิเคชัน คุณสมบัติต่อไปนี้สามารถใช้เพื่อกำหนดพาเลทสีต่างๆ

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ธีมในแอปพลิเคชัน Angular JS

am_themes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('themeController', themeController)
            .config(function($mdThemingProvider) {
               $mdThemingProvider.theme('customTheme') 
               .primaryPalette('grey')
               .accentPalette('orange')
               .warnPalette('red');
            });

         function themeController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
         <md-toolbar class = "md-primary">
            <div class = "md-toolbar-tools">
               <h2 class = "md-flex">Default Theme</h2>
            </div>
         </md-toolbar>
         <hr/>
         
         <md-card>         
            <md-card-content layout = "column"> 
               <md-toolbar class = "md-primary">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary style</h2>
                  </div>
               </md-toolbar>
                  
               <md-toolbar class = "md-primary md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-primary md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                  </div></md-toolbar>
                  
               <md-toolbar class = "md-accent">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                  </div>
               </md-toolbar>              
            </md-card-content>
         </md-card>
         
         <div md-theme = "customTheme">
            <md-toolbar class = "md-primary">
               <div class = "md-toolbar-tools">
                  <h2 class = "md-flex">Custom Theme</h2>
               </div>
            </md-toolbar>
            <hr/>
            
            <md-card>         
               <md-card-content layout = "column"> 
                  <md-toolbar class = "md-primary">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                     </div>
                  </md-toolbar>              
               </md-card-content>
            </md-card>
            
         </div>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Angular Material มีวิธีการพิเศษต่างๆในการแสดงการแจ้งเตือนที่ไม่เป็นการรบกวนผู้ใช้ นอกจากนี้ยังมีคำว่าขนมปังสำหรับพวกเขา บริการ $ mdToast ใช้เพื่อแสดงขนมปังปิ้ง

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ขนมปังปิ้ง

am_toasts.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toastController', toastController);

         function toastController ($scope, $mdToast, $document) { 
            $scope.showToast1 = function() {
               $mdToast.show (
                  $mdToast.simple()
                  .textContent('Hello World!')                       
                  .hideDelay(3000)
               );
            };

            $scope.showToast2 = function() {
               var toast = $mdToast.simple()
                  .textContent('Hello World!')
                  .action('OK')
                  .highlightAction(false);                     
               
               $mdToast.show(toast).then(function(response) {
                  if ( response == 'ok' ) {
                     alert('You clicked \'OK\'.');
                  }
               });			   
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toastContainer" ng-controller = "toastController as ctrl"
         layout = "row" ng-cloak>
         <md-button ng-click = "showToast1()">Show Simple Alert</md-button>
         <md-button ng-click = "showToast2()">Show Alert with callback</md-button>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Angular Material มีคลาส CSS การพิมพ์ที่หลากหลายซึ่งสามารถใช้เพื่อสร้างความสอดคล้องของภาพในแอปพลิเคชัน Angular JS

ตารางต่อไปนี้แสดงรายการคลาสต่างๆพร้อมคำอธิบาย

ซีเนียร์ No ชื่อชั้นเรียนและคำอธิบาย
1

md-display-1

แสดงข้อความด้วย Regular 34px
2

md-display-2

แสดงข้อความด้วย Regular 45px
3

md-display-3

แสดงข้อความด้วย Regular 56px
4

md-display-4

แสดงข้อความด้วยแสง 112px
5

md-headline

แสดงข้อความด้วย Regular 24px
6

md-title

แสดงข้อความด้วย Medium 20px
7

md-subhead

แสดงข้อความด้วย Regular 16px
8

md-body-1

แสดงข้อความด้วย Regular 14px
9

md-body-2

แสดงข้อความด้วย Medium 14px
10

md-button

แสดงปุ่มขนาดกลาง 14px
11

md-caption

แสดงข้อความด้วย Regular 12px

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คลาส CSS การพิมพ์

am_typography.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headline">.md-headline</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

md-virtual-repeat-container เป็นที่เก็บเลื่อนสำหรับคอมโพเนนต์ md-virtual-repeat

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-virtual-repeat-container.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

md-top-index

ผูกดัชนีของไอเท็มที่อยู่ด้านบนสุดของ scroll container กับ $ scope สามารถอ่านและตั้งค่าตำแหน่งเลื่อนได้
2

md-orient-horizontal

กำหนดว่าคอนเทนเนอร์ควรเลื่อนในแนวนอนหรือไม่ (ค่าเริ่มต้นคือการวางแนวและการเลื่อนในแนวตั้ง)
3

md-auto-shrink

เมื่อมีอยู่ภาชนะจะหดลงเพื่อให้พอดีกับจำนวนรายการเมื่อจำนวนนั้นน้อยกว่าขนาดเดิม
4

md-auto-shrink-min

จำนวนขั้นต่ำของรายการที่ md-auto-shrink จะลดขนาดเป็น (ค่าเริ่มต้น: 0)

md-virtual-repeat

การทำซ้ำเสมือนเป็นการแทนที่ ng-repeat เพื่อแสดงผลเฉพาะองค์ประกอบ html ที่เพียงพอที่จะเติมคอนเทนเนอร์และนำมาใช้ใหม่เมื่อผู้ใช้เลื่อน

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-virtual-repeat.

ซีเนียร์ No พารามิเตอร์และคำอธิบาย
1

md-item-size

ความสูงหรือความกว้างขององค์ประกอบที่ซ้ำกัน (ซึ่งต้องเหมือนกันสำหรับแต่ละองค์ประกอบ) นี่เป็นทางเลือก สิ่งนี้จะพยายามอ่านขนาดจากโดมหากขาดหายไป แต่ยังถือว่าโหนดที่ซ้ำกันทั้งหมดมีความสูงหรือความกว้างเท่ากัน
2

md-extra-name

ประเมินเป็นชื่อเพิ่มเติมที่สามารถกำหนดรายการที่ทำซ้ำในปัจจุบันบนขอบเขตที่ทำซ้ำได้ (จำเป็นสำหรับใช้ใน md-autocomplete)
3

md-on-demand

เมื่อมีอยู่ให้ถือว่า md-virtual-repeat อาร์กิวเมนต์เป็นอ็อบเจ็กต์ที่สามารถดึงแถวแทนที่จะเป็นอาร์เรย์อ็อบเจ็กต์นี้ต้องใช้อินเทอร์เฟซต่อไปนี้ด้วยสอง (2) วิธี -

  • getItemAtIndex - ฟังก์ชัน (ดัชนี) [วัตถุ] - รายการที่ดัชนีหรือค่าว่างนั้นหากยังไม่ได้โหลด (ควรเริ่มดาวน์โหลดรายการในกรณีนั้น)

  • getLength- function () [number] - ความยาวของข้อมูลที่ควรมีขนาดคอนเทนเนอร์ของ repeater ตามหลักการแล้วเมื่อทราบการนับแล้ววิธีนี้ควรส่งคืน มิฉะนั้นให้ส่งคืนจำนวนที่สูงกว่ารายการที่โหลดในปัจจุบันเพื่อสร้างลักษณะการเลื่อนแบบไม่สิ้นสุด

ตัวอย่าง

ตัวอย่างต่อไปนี้เป็นการใช้การทำซ้ำเสมือนจริง

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Angular Material มีคลาสพิเศษมากมายในการแสดงภาชนะบรรจุเป็นการ์ดเหมือนกระดาษที่มีเงา

ตารางต่อไปนี้แสดงรายการคลาสต่างๆพร้อมคำอธิบาย

ซีเนียร์ No ชื่อชั้นเรียนและคำอธิบาย
1

md-whiteframe-1dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 1px เพิ่ม zdepth ของ 1
2

md-whiteframe-2dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 2px เพิ่ม zdepth ของ 2
3

md-whiteframe-3dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 3px เพิ่ม zdepth ของ 3
4

md-whiteframe-4dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 4px เพิ่ม zdepth ของ 4
5

md-whiteframe-5dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 5px เพิ่ม zdepth ของ 5
6

md-whiteframe-6dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 6px เพิ่ม zdepth ของ 6
7

md-whiteframe-7dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาที่มีขอบ 7px เพิ่ม zdepth ของ 7
8

md-whiteframe-8dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาล้อมรอบ 8px เพิ่ม zdepth ของ 8
9

md-whiteframe-9dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาที่มีขอบ 9px เพิ่ม zdepth ของ 9
10

md-whiteframe-10dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 10px เพิ่ม z-depth เป็น 10
11

md-whiteframe-11dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 11px เพิ่ม z-depth ที่ 11
12

md-whiteframe-12dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 12px เพิ่ม z-depth ที่ 12
13

md-whiteframe-13dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 13px เพิ่ม z-depth ที่ 13
14

md-whiteframe-14dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 14px เพิ่มความลึก 14
15

md-whiteframe-15dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 15px เพิ่ม z-depth ที่ 15
16

md-whiteframe-16dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 16px เพิ่ม z-depth ที่ 16
17

md-whiteframe-17dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 17px เพิ่ม z-depth ที่ 17
18

md-whiteframe-18dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 18px เพิ่ม z-depth ที่ 18
19

md-whiteframe-19dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 19px เพิ่ม z-depth ที่ 19
20

md-whiteframe-20dp

รูปแบบนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 20px เพิ่มความลึก 20
21

md-whiteframe-21dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 21px เพิ่ม z-depth ที่ 21
22

md-whiteframe-22dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 22px เพิ่ม z-depth ที่ 22
23

md-whiteframe-23dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 23px เพิ่ม z-depth ที่ 23
24

md-whiteframe-24dp

ลักษณะนี้เป็นคอนเทนเนอร์สำหรับเนื้อหา HTML ใด ๆ ที่มีเงาขอบ 24px เพิ่ม z-depth ที่ 24

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คลาสเงา

am_whiteframes.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .frameContainer md-whiteframe {
            background: #fff;
            margin: 30px;
            height: 100px; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('frameController', frameController);
           
         function frameController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "frameController as ctrl"
         layout = "row" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-1dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-2dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-3dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-10dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-15dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-20dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-22dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-23dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-24dp</span>
         </md-whiteframe>
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved