পৃষ্ঠাসমূহ

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 - Layouts

Layout Directive

layout directive on a container element is used to specify the layout direction for its children. Following are the assignable values:

  • row - Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.
  • column - Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
For responsive design such as layout to be automatically changed depending upon the device screen size,following layout APIs can be used to set the layout direction for devices with view widths.
S.N.API & Device width when breakpoint overrides default
1layout
Sets default layout direction unless overridden by another breakpoint.
2layout-xs
width < 600px
3layout-gt-xs
width >= 600px
4layout-sm
600px <= width < 960px
5layout-gt-sm
width >= 960px
6layout-md
960px <= width < 1280px
7layout-gt-md
width >= 1280px
8layout-lg
1280px <= width < 1920px
9layout-gt-lg
width >= 1920px
10layout-xl
width >= 1920px

Example

The following example showcases the use of layout directive to showcase uses of layout.
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>

Result

Verify the result.

Flex Directive

flex directive on a container element is used to customize the size and position of elements. flex directive defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container.Following are the assignable values:
  • multiples of 5 - 5, 10, 15 ... 100
  • 33 - 33%
  • 66 - 66%

Example

The following example showcases the use of flex directive to showcase uses of 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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)