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

【问题标题】：Directive acting like bottomsheet of angular material指令作用类似于角材料的底片
【发布时间】：2015-08-09 05:12:39
【问题描述】：

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

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

我在经典的“底页”中实现了此表单，但此 UI 组件仅用于显示按钮（而非输入），当我尝试将焦点放在输入上时存在限制。

是否有现有的指令可以完成这项工作，或者有人建议从头开始编写它，因为我不知道从哪里开始。

【问题讨论】：

我也有同样的问题。你找到这个问题的答案了吗？

标签： javascript html css angularjs angularjs-material

【解决方案1】：

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

* 那么你必须能够阅读代码......

Here is a quick demo 我在 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' 指令可以包含表单。

Here is the link 到 Github 上项目的“组件”文件夹。

* 它的版本是 0.10.1

如果你觉得它太费力，总有香草 javascript 的方式用简单的 HTML，一些 CSS...

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

【讨论】：