web-dev-qa-db-ja.com

AngularJs Material Webサイトのようなメニューを作成します

AngularJs Material Webサイトのようなメニューを作成したい（ https://material.angularjs.org ）

angularjs material menu

残念ながら、それを行うためのドキュメントやデモはありません。

何か案は？

ありがとう

angularjsangular-material
37
Claudio Ɯǝıs Mulas

ディレクティブmenuToggleおよびmenuItem、およびソースファイルにあるmenu serviceを使用して、独自のサイドメニューを作成できます。このメニューは多くのプロジェクトで使用しているので、機能することはわかっています。あなたがしなければならないのは同じ方法でそれを実装することです。私はこれをここにあるブログ記事に書きました：

Angular Material Side Menu）の作成方法

32
britztopher

これには、少なくともいくつかのビルド済みディレクティブがあります...いくつかの例：

10
John Rix

@Splaktarが言うように、マイルストーン0.9.0で公式のmdListiItemを待つことができます。

また、 angular-material プロジェクトのソースコード全体をチェックアウトして、ここを調べることもできます https://github.com/angular/material#building またはREADME.mdでビルドしますドキュメント。

まず、ローカルプロジェクトのnpmツールをインストールまたは更新します。

# First install all the NPM tools:
npm install
# Or update
npm update

次に、gulpタスクを実行します。

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

次に、出力フォルダー「dist/docs」の「docs.js」、「css/docs.css」および「index.html」に必要なコードが表示されます。

「dist/docs」の「docs.js」は、Originの「docs」フォルダーの「docs.js」とは異なります。必要なコードを含むドキュメントをビルドすると、多くのコードが生成および連結されます。

ドキュメントをビルドした後、必要なコードを取得する最速の方法は、「menuToggle」または「menuLink」ディレクティブ、または「dist/docs/docs.js」で「menu」ファクトリーを検索することです。

これがあなたのお役に立てば幸いです。

3
futurexiong

あなたはこれのいずれも必要としません、あなたが同一のUXと外観を望むならば、私はサービスとすべてをインポートしない理由がないと思います。しかし、必要なのが折りたたみ性だけである場合、多くをインポートせずにng-classディレクティブでこれを解決できます。スコープの設定方法に応じて、折りたたみ可能なゾーンごとに異なる変数が必要になる場合があります。

<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div>
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable">
    Stuff that gets hidden
    <div>More stuff to hide</div>
</div>

コントローラーの$ scope宣言で

$scope.collapsedA = true //if you want it to start collapsed

そして、あなたのCSSのようなもの

.collapsable{
    transition: all .2s ease-in-out;
    min-height: 20px;
    overflow: hidden;
}
.collapsable.collapsed{
    height: 0;
    min-height: 0;
}
1
Andrew Clavin

ここで答えを確認してください： https://stackoverflow.com/a/38258961/1904479 、

http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html には、アコーディオンまたは展開可能なリストビューが適切に実装されています。

1
Kailas

展開/折りたたみコントロールをサポートするには、mdListItemを待つ必要があります。これは、暫定的に0.9.0に予定されています。

https://github.com/angular/material/issues/985 を参照してください

0
Splaktar