指令的作用类似于角材料的底片

Question

我想创建一个窗体，该窗体作为Angular Material的UI组件“底表”出现在屏幕上。

[当用户单击按钮时，带有表单的页面底部会出现一个面板（div ???）。该面板覆盖当前页面，如果用户单击（或向下滑动面板），该面板将消失。

[我已经在经典的“底部表单”中实现了此表单的实现，但是此UI组件仅设计为显示按钮（而不是输入），并且当我尝试将重点放在输入上时存在局限性。

是否存在执行该指令的现有指令，或者有人建议从头开始编写它，因为我看不到从哪里开始。

Answer 1

几周前我才刚刚开始学习Material和AngularJS，所以我认为无法正确回答您的问题，我将做什么。

*您必须能够阅读代码，然后...

我在Codepen上制作的[Here is a quick demo。

我在其中放入了以下表格，它似乎可以显示并“正常工作”（尚无焦点）

<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'指令可以包含表格。

[Here is the link到Github上项目的'components'文件夹。

*其版本为0.10.1

如果您发现它太费力，总是有使用简单的HTML，一些CSS ...的普通javascript方法来实现的

希望这可以帮助您在等待一个好的答案时弄清楚。