Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@yhikishima

Angular Material 実践 vol.1

More than 5 years have passed since last update.

最近1からAngularを実装する機会があったのですが、デザインをおこすのが億劫だと思い、AngualrMaterialならばPSDを作らずともいい感じのデザインになるのではないかと思い、手を出してみました。

その時はまったことなどを紹介します。

Angular Materialとは

googleが提供している、AngularJS用のUIコンポーネントです。

導入

bower install angular --save
bower install angular-material --save

必要なJSを読み込み

jquery.min.js
angular.min.js
angular-material.min.js
angular-aria.min.js
angular-animate.min.js
angular-ui-router.min.js
angular-material.min.css

Angular Material Design Table

  • Angular Materialに良い感じのテーブルがなかったので、MaterialDesiginTableを採用してみました。

導入

bower install angular-material-data-table --save

読み込み

md-data-table.min.js
md-data-table.min.css

ControllerにDIする

angular
  .module('app', ['ngMaterial'])
  .controller('DemoCtrl', DemoCtrl);

function DemoCtrl() {

}

html

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-raised">Button</md-button>
    </section>
  </md-content>
</div>

これでいい感じのMaterial Deginのボタンができたかなと思います。

e07a7322b05ae2a4a28c34921a18df9e.png

↑こんな感じの。

一旦、導入までまとめました。
cssを定義しなくても良い感じにmaterial desiginを適用してくれるので、非常に便利かと思います。

簡単にmaterial desiginを適用したくなったら是非。

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yhikishima
Unity Developer / Unreal Engine Developer / Web Frontend Developer

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
13
Help us understand the problem. What is going on with this article?