2

Angular Material の UI コンポーネント「Bottom Sheet」として画面に表示されるフォームを作成したいと考えています。

ユーザーがボタンをクリックすると、パネル (div ???) がページの下部にフォームとともに表示されます。このパネルは現在のページに重ねて表示され、ユーザーがクリック (またはパネルを下にスワイプ) すると、パネルは消えます。

このフォームを従来の「ボトム シート」に実装しましたが、この UI コンポーネントはボタンを表示するためだけに設計されており (入力は表示されません)、入力にフォーカスを当てようとすると制限があります。

仕事をする既存のディレクティブがありますか、またはどこから始めればよいかわからないため、誰かが最初からそれを書くようにアドバイスしています。

4

1 に答える 1

0

数週間前に Material と AngularJS の学習を始めたばかりなので、あなたの質問に正しく答えることができるとは思いません。

* コードを読める必要があります...

Codepen で作成した簡単なデモを次に示します。

次のフォームを入れたところ、表示されて「機能する」ようです（まだフォーカスがありません）

<md-input-container>
    <label>Username</label>
    <input type="text" ng-model="user.name">
</md-input-container>
<md-input-container>
    <label>Description</label>
    <textarea ng-model="user.description"></textarea>
</md-input-container>

あなたが扱っている問題が何であるかを示すために、それをフォークすることを躊躇しないでください。そこから始める方が簡単で速いかもしれません。

Material AngularJS はオープン ソース プロジェクトであるため、ソース コードを参照することができます。したがって、ディレクティブをゼロから作成できる場合は、「bottomSheet」コンポーネントと「sidenav」コンポーネントがどのように構築されているかを理解し、それらを組み合わせて両方を最大限に活用することから始めることをお勧めします。「sidenav」ディレクティブにはフォームを含めることができるため。

Github のプロジェクトの「components」フォルダーへのリンクは次のとおりです。

※バージョンは0.10.1です

面倒だと思った場合は、単純な HTML や CSS を使用して、バニラの JavaScript を使用する方法が常にあります。

良い答えを待っている間、これがあなたがそれを理解するのに役立つことを願っています.

于 2015-08-14T06:55:36.607 に答える