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
Help us understand the problem. What is going on with this article?

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

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