- 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 - Tabs
The md-tabs and md-tab Angular directives are used to show tabs in the applcation. md-tabs is the grouping container for md-tab elements.
Attributes - md-tabs
The following table lists out the parameters and description of the different attributes of md-tabs.
Sr.No | Parameter & Description |
---|---|
1 | md-selected Index of the active/selected tab. |
2 | md-no-ink If present, disables the ink ripple effects. |
3 | md-no-ink-bar If present, disables the selection ink bar. |
4 | md-align-tabs Attribute to indicate position of tab buttons: bottom or top; default is top. |
5 | md-stretch-tabs Attribute to indicate whether or not to stretch tabs: auto, always, or never; default is auto. |
6 | md-dynamic-height When enabled, the tab wrapper will resize based on the contents of the selected tab. |
7 | md-center-tabs When enabled, tabs will be centered provided there is no need for pagination. |
8 | md-no-pagination When enabled, pagination will remain off. |
9 | md-swipe-content When enabled, swipe gestures will be enabled for the content area to jump between tabs. |
10 | md-enable-disconnect When enabled, scopes will be disconnected for tabs that are not being displayed. This provides a performance boost, but may also cause unexpected issues and is not recommended for most users. |
11 | md-autoselect When present, any tabs added after the initial load will be automatically selected. |
Attributes - md-tab
The following table lists out the parameters and description of the different attributes of md-tab.
Sr.No | Parameter & Description |
---|---|
1 | label Optional attribute to specify a simple string as the tab label. |
2 | ng-disabled If present, disabled tab selection. |
3 | md-on-deselect Expression to be evaluated after the tab is de-selected. |
4 | md-on-select Expression to be evaluated after the tab is selected. |
5 | md-active When true, sets the active tab. Note − There can only be one active tab at a time. |
Example
The following example shows the use of md-tabs and also the uses of tabs components.
am_tabs.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('tabController', tabController); function tabController ($scope) { $scope.data = { selectedIndex: 0, secondLocked: true, secondLabel: "2", bottom: false }; $scope.next = function() { $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ; }; $scope.previous = function() { $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0); }; } </script> </head> <body ng-app = "firstApplication"> <div id = "tabContainer" ng-controller = "tabController as ctrl" ng-cloak> <md-content class = "md-padding"> <md-tabs class = "md-accent" md-selected = "data.selectedIndex" md-align-tabs = "{{data.bottom ? 'bottom' : 'top'}}"> <md-tab id = "tab1"> <md-tab-label>1</md-tab-label> <md-tab-body>Item #1 <br/>selectedIndex = 0;</md-tab-body> </md-tab> <md-tab id = "tab2" ng-disabled = "data.secondLocked"> <md-tab-label>{{data.secondLabel}}</md-tab-label> <md-tab-body>Item #2 <br/>selectedIndex = 1;</md-tab-body> </md-tab> <md-tab id = "tab3"> <md-tab-label>3</md-tab-label> <md-tab-body>Item #3<br/>selected Index = 2;</md-tab-body> </md-tab> </md-tabs> </md-content> <div class = "md-padding" layout = "row" layout-sm = "column" layout-align = "left center" style = "padding-top: 0;"> <md-checkbox ng-model = "data.secondLocked" aria-label = "Disable tab 2?" style = "margin: 5px;">Disable tab 2?</md-checkbox> <md-checkbox ng-model = "data.bottom" aria-label = "Align tabs to bottom?" style = "margin: 5px;">Align tabs to bottom?</md-checkbox> </div> </div> </body> </html>
Result
Verify the result.
To Continue Learning Please Login
Login with Google