- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - Divider
The md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts.
Attributes
The following table lists out the parameters and description of the different attributes of md-divider.
Sr.No | Parameter & Description |
---|---|
1 | md-inset Add this attribute to activate the inset divider style. |
Example
The following example showcases the use of md-divider
directive to showcase uses of dividers.
am_dividers.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('dividerController', dividerController); function dividerController ($scope) { var self = this; self.allContacts = loadContacts(); self.contacts = [self.allContacts[0]]; function loadContacts() { var contacts = [ 'Roberto Karlos', 'Bob Crestor', 'Nigel Rick', 'Narayana Garner' ]; return contacts.map(function (c, index) { var cParts = c.split(' '); var contact = { name: c, email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com', image: 'http://lorempixel.com/50/50/people?' + index }; contact._lowername = contact.name.toLowerCase(); return contact; }); } } </script> </head> <body ng-app = "firstApplication"> <div id = "dividerContainer" ng-controller = "dividerController as ctrl" layout = "column" ng-cloak> <md-content> <md-list> <md-subheader class = "md-no-sticky">Contacts</md-subheader> <md-list-item class = "md-2-line contact-item" ng-repeat = "(index, contact) in ctrl.allContacts" ng-if = "ctrl.contacts.indexOf(contact) < 0"> <img ng-src = "{{contact.image}}" class = "md-avatar" alt = "{{contact.name}}" /> <div class = "md-list-item-text compact"> <h3>{{contact.name}}</h3> <p>{{contact.email}}</p> </div> <md-divider ng-if = "!$last"></md-divider> </md-list-item> </md-list> <md-list> <md-subheader class = "md-no-sticky">Contacts (With Insets)</md-subheader> <md-list-item class = "md-2-line contact-item" ng-repeat = "(index, contact) in ctrl.allContacts" ng-if = "ctrl.contacts.indexOf(contact) < 0"> <img ng-src = "{{contact.image}}" class = "md-avatar" alt = "{{contact.name}}" /> <div class = "md-list-item-text compact"> <h3>{{contact.name}}</h3> <p>{{contact.email}}</p> </div> <md-divider md-inset ng-if = "!$last"></md-divider> </md-list-item> </md-list> </md-content> </div> </body> </html>
Result
Verify the result.
angular_material_widgets.htm
Advertisements