2

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

当用户单击一个按钮时，一个面板 (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 上项目的“组件”文件夹的链接。

* 它的版本是 0.10.1

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

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

于 2015-08-14T06:55:36.607 回答