ResponsiveNavigation Angular6でナビゲーションを利用したいと考えている開発者向けのサンプル
ResponsiveNavigation は、Angular6においてAngular Materialによりナビゲーションを実現しようと考えている開発者向けの初期セットです。
フルソースコード,
https://github.com/Ohtsu/ResponsiveNavigation
ビデオ解説 (日本語),
https://www.youtube.com/watch?v=X59LfgaGnrM
ビデオ解説 (英語),
https://www.youtube.com/watch?v=F1GUUFpYc-g&t=5s
概要
ResponsiveNavigation はリスポンシブなナビゲーションであり、Angular6におけるAngular Materialに依存しています。
ResponsiveNavigation は、mat-sidenav,mat-toolbar,mat-nav-listなどを利用しています。
ResponsiveNavigation はMaterialアイコンを利用しています。
稼働環境
- node.js
- Typescript2
- Angular6
インストール
以下のように、Gitからクローンを作成します。
$ git clone https://github.com/Ohtsu/ResponsiveNavigation.git
次に生成されたResponsiveNavigationディレクトリに入り、以下のようにインストールを行います。
$ npm install
起動
コマンドラインで以下のようにローカルサーバを起動すると、ブラウザにリスポンシブなナビゲーションが表示されます。
$ ng serve -o
- 初期画面
バージョン
- ResponsiveNavigation : 0.0
- Angular6 : 6.0.0
- TypeScript : 2.7.2
- @angular/material : 6.2.1
参考
"Schematics",
https://material.angular.io/guide/schematics"Angular 5, Angular 6 Custom Library: Step-by-step guide",
https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/"Angular 5, Angular 6用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド",
https://www.udemy.com/angular5-l/
変更履歴
- 2018.7.11 version 0.0 uploaded
著作権
copyright 2018 by Shuichi Ohtsu (DigiPub Japan)
License
MIT © Shuichi Ohtsu