পৃষ্ঠাসমূহ

Search Your Article

CS

 

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

  • 📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.

  • 💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.

  • 🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.

  • 🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.

    ✔ Latest world News 

     

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Pageviews

Thursday, February 9, 2017

Angular Material - WhiteFrame

Angular Material has several special classes to display containers as paper-like cards with shadow.
S.N.Class Name & Description
1md-whiteframe-1dp
Styles a container for any HTML content with 1px bordered shadow. Adds z-depth of 1.
2md-whiteframe-2dp
Styles a container for any HTML content with 2px bordered shadow. Adds z-depth of 2.
3md-whiteframe-3dp
Styles a container for any HTML content with 3px bordered shadow. Adds z-depth of 3.
4md-whiteframe-4dp
Styles a container for any HTML content with 4px bordered shadow. Adds z-depth of 4.
5md-whiteframe-5dp
Styles a container for any HTML content with 5px bordered shadow. Adds z-depth of 5.
6md-whiteframe-6dp
Styles a container for any HTML content with 6px bordered shadow. Adds z-depth of 6.
7md-whiteframe-7dp
Styles a container for any HTML content with 7px bordered shadow. Adds z-depth of 7.
8md-whiteframe-8dp
Styles a container for any HTML content with 8px bordered shadow. Adds z-depth of 8.
9md-whiteframe-9dp
Styles a container for any HTML content with 9px bordered shadow. Adds z-depth of 9.
10md-whiteframe-10dp
Styles a container for any HTML content with 10px bordered shadow. Adds z-depth of 10.
11md-whiteframe-11dp
Styles a container for any HTML content with 11px bordered shadow. Adds z-depth of 11.
12md-whiteframe-12dp
Styles a container for any HTML content with 12px bordered shadow. Adds z-depth of 12.
13md-whiteframe-13dp
Styles a container for any HTML content with 13px bordered shadow. Adds z-depth of 13.
14md-whiteframe-14dp
Styles a container for any HTML content with 14px bordered shadow. Adds z-depth of 14.
15md-whiteframe-15dp
Styles a container for any HTML content with 15px bordered shadow. Adds z-depth of 15.
16md-whiteframe-16dp
Styles a container for any HTML content with 16px bordered shadow. Adds z-depth of 16.
17md-whiteframe-17dp
Styles a container for any HTML content with 17px bordered shadow. Adds z-depth of 17.
18md-whiteframe-18dp
Styles a container for any HTML content with 18px bordered shadow. Adds z-depth of 18.
19md-whiteframe-19dp
Styles a container for any HTML content with 19px bordered shadow. Adds z-depth of 19.
20md-whiteframe-20dp
Styles a container for any HTML content with 20px bordered shadow. Adds z-depth of 20.
20md-whiteframe-21dp
Styles a container for any HTML content with 21px bordered shadow. Adds z-depth of 21.
20md-whiteframe-22dp
Styles a container for any HTML content with 22px bordered shadow. Adds z-depth of 22.
20md-whiteframe-23dp
Styles a container for any HTML content with 23px bordered shadow. Adds z-depth of 23.
20md-whiteframe-24dp
Styles a container for any HTML content with 24px bordered shadow. Adds z-depth of 24.

Example

The following example showcases the use of shadow classes.
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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)