Edited at

Angular6でナビゲーションを利用したいと考えている開発者向けのサンプル

More than 1 year has passed since last update.


ResponsiveNavigation Angular6でナビゲーションを利用したいと考えている開発者向けのサンプル

MIT License

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


参考


変更履歴


  • 2018.7.11 version 0.0 uploaded


著作権

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)


License

MIT © Shuichi Ohtsu