37

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

angularjs マテリアル メニュー

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

何か案は？

ありがとう

4

7 に答える 7

32

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

Angular Material サイド メニューの作成方法

于 2015-06-24T11:55:27.547 に答える
10

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

于 2016-05-23T11:02:43.367 に答える
3

@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」は、元の「docs」フォルダー内の「docs.js」とは異なります。必要なドキュメントを含むドキュメントを作成すると、多くのコードが生成され、連結されます。

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

これがあなたを助けることを願っています。

于 2015-03-20T08:09:12.577 に答える
1

同一の 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;
}
于 2016-11-01T18:29:16.713 に答える
0

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

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

于 2015-03-07T05:05:30.510 に答える
-6

angularui からアコーディオンを見ることができます。 http://angular-ui.github.io/bootstrap/

于 2015-02-08T02:36:50.197 に答える