Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Tabbing & Accordion in Angular Material

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.15k
    Comment on it

    Hi All,

    We Often need tabbing & Accordion functionality in our project and what if we need it via angular material. Her is a quick guide of doing it simply and accurately.

    Angular Material CSS references

    <!-- Angular Material CSS now available via Google CDN; version 0.11.2 used here -->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular&#95;material/1.0.0-rc1/angular-material.min.css">
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    

    Angular Material JS references

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular&#95;material/1.0.0-rc1/angular-material.min.js"></script>
    

    Tabbing Sample

    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="Tab1">
            <md-tab-label>Tab1</md-tab-label>
            <md-tab-body>
                // Content for Tab1
            </md-tab-body>
        </md-tab>
        <md-tab label="Tab2">
            <md-tab-label>Tab2</md-tab-label>
            <md-tab-body>
                // Content for Tab2
            </md-tab-body>
        </md-tab>
        <md-tab label="Tab3">
            <md-tab-label>Tab3</md-tab-label>
            <md-tab-body>
                // Content for Tab3
            </md-tab-body>
        </md-tab>
    </md-tabs>
    

    Accordion Sample

    <div id="accordion">
        <md-button class="md-raised md-primary">
            Accordion Title
            <md-icon aria-label="details"
                     class="material-icons step">
                details
            </md-icon>
        </md-button>
        <div ng-accordion-body>
            <div ng-cloak>
                <md-content>
                    // Content for accordion
                </md-content>
            </div>
        </div>
    </div>
    

    Happy Coding....

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: