javascript - 指令就像棱 Angular Material 的底片

Question

我想创建一个显示在屏幕上的表单作为 Angular Material 的 UI 组件“Bottom Sheet”。

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

我在经典的“底部工作表”中实现了这种形式，但这个 UI 组件仅设计用于显示按钮(而不是输入)，当我尝试将焦点放在输入上时存在限制。

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

Answer 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>

不要犹豫，将其 fork 以向我们展示您正在处理的问题。也许从那里开始会更容易、更快。

由于 Material AngularJS 是一个开源元素，所以源代码可供您查阅。因此，如果您设法从头开始创建一个指令，我建议您首先了解“bottomSheet”和“sidenav”组件的构建方式，将它们结合起来并充分利用两者。由于“sidenav”指令可以包含表单。

Here is the link到 Github 上元素的“components”文件夹。

* 其版本为0.10.1

如果您觉得它太费力，总有一种普通的 javascript 方法可以使用简单的 HTML 和一些 CSS...

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