Flex-Layout と Angular Material でグッバイCSS – 検索フォームを作る ｜ DevelopersIO
Flex-Layout と Angular Material でこれを作りました。 この画面、CSSファイルには何も書いていません。 いい時代になりましたね。ごめんなさい、嘘です。 全体のパディングだけ1行設定しています。それ以外はすべて Flex-Layout と Angular Material の仕組みで完結しています。 ※ Twitter等で「CSSがなくなるわけではないよね」というご指摘をいただき確かにそのとおりですので全体的に誤解を与えぬよう修正しています。ありがとうございました。 自分で書くCSSをなるべく少なくしたい 可能な限りフレームワークやライブラリの仕組みに乗り、CSSファイルの記述量は少なくしたいところです。単純にメンテするコードの量が減りますし、どこに何のCSSが適用されているのか気にしなくてよくなります。 画面を構成していくための道具を選定するにあたり、以下2要
Angular7 で Web アプリを作ろう - mat-menu - ふるてつのぶろぐ
今日すること こんにちは、ふるてつです。 今回のテーマもAngular Materialで、<mat-menu>のお話です。 以前わたしがbootstrapで作っていたメニューと同じものをmaterialで作ろうと思います。 メニューは上記のような感じです（緑色の部分です） mat-menu関連のリファレンスについて リファレンスはこちらです。https://material.angular.io/components/menu/overview リファレンスを参考にして作っていきます。 わたしの場合はヘッダー用のコンポーネントを作っていて、その中にまず<mat-toolbar>を配置しています。 そしてその中に<mat-menu>やmat-buttonを動的に入れています。 サインアウトなど必ず表示するアイコンなどは固定で配置します。 ヘッダー用のコンポーネントについて まずヘッダーのh
Angular7 で Web アプリを作ろう - sidenav - ふるてつのぶろぐ
今日すること こんにちは、ふるてつです。 残念ながらGW10連休はあっというまに終わりました。 今回のテーマもAngular Materialで、sidenavの使い方について少し書きたいと思います。 navigation関連のリファレンスについて リファレンスではnavigation関連で 3 つのコンポーネントが記載されています。 sidenav toolbar menuです。 その中で一番大きなくくりはsidenavになると思います。 今回sidenavの記述はapp.componentに追加します。 そしてsidenav用のコンポーネントsidenav.componentを新たに追加しようと思います。 sidenav関連のモジュールを追加 今回sidenavを使用するにあたり下記のモジュールを使用しました。 MatSidenavModule MatToolbarModule Mat
Angularでの基本的なページレイアウトを理解する - Qiita
前回ではAngularのプロジェクトを構成する、”コンポーネント”、”モジュール”につて解説していきました。 Angularプロジェクトの構成 今回はそれらを使って基本的なページのレイアウトを組んでいきたいと思います！ それではいきましょうーー！ Headerの実装 前回作ったheaderコンポーネント（鬼誤字ってました恥ずかしい。。。）を以下のように修正して実際にヘッダーを作っていきましょう！ 少しみづらいかもしれませんが、上から src/app/header/header.component.ts src/app/app.component.html src/app/header/header.component.html になります！ こんな感じで表示されるはずです！ それではヘッダーを作っていきましょう！ 自分で作ってもいいですし、コピペしてくれても構いません！ <header>
Angularでマテリアルデザインの画面を作成する(Angular Material利用) | 釣りキチエンジニアのブログ
「Angularでマテリアルデザインの画面をどうやって作成するのか？」 「そもそもマテリアルデザインって何？？」 今回はこの辺りについて確認します。 Angularでのマテリアルデザイン画面の作成手順今回はAngularでマテリアルデザイン画面を作成する手順について説明します。マテリアルデザイン作成のためにAngular Materialを利用します。 Material DesignとはGoogleが発表したデザインのガイドラインです。直訳すると物質デザインですが、、画面のコンポーネントが本当の物質みたいに、ボタンを押すことで凹んだり、動いたり、テキストボックスにプリセットされた文字がフォーカスインと同時に端に寄ったり・・・直感的に人が操作できます。 最近よくそんなデザインのWebサイトを見かけます。 ではAngularでそんなおしゃれなMaterial Designを導入した画面を作って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
