角度素材-コンテンツ

Angular Directiveである md-content はコンテナ要素であり、スクロール可能なコンテンツに使用されます。 layout-padding 属性を追加して、コンテンツをパディングできます。

例

次の例は、md-contentディレクティブの使用と角度コンテンツ表示の使用を示しています。

*_am_content_*

<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 type = "text/javascript">
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>

   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>

      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>

         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
         Web Hypertext Application Technology Working Group (WHATWG).</p>

         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

結果

結果を確認します。

Angular-material-content

角度素材-コンテンツ

例

結果