跳到主要内容

如何构建材料设计应用程序

在今年的Google I / O上,Polymer团队宣布发布聚合物1.0。 1.0版本的尺寸是以前版本的三分之一,运行速度提高了五倍,这是我们开始在生产中使用Polymer的时候的信号。由于新的聚合物入门套件(PSK),一种用于构建聚合物应用程序的固定支架,因此开始使用库从未如此简单。

在本教程中,我将向您介绍如何使用PSK创建一个简单的待办事项列表,突出显示它带来的一些惊人的好东西。

设置好

作为先决条件,请确保您拥有当前版本的节点安装,因为你将在几个地方使用npm。接下来,从中获取入门套件官方网站,或者如果你是Yeoman,你可以安装聚合物发生器它使用入门套件。

npm安装yo generator-polymer -g

如果您从官方网站下载PSK,我建议您选择“中级 - 高级用户”版本,因为它带有自己的gulp服务器和Browsersync用于快速测试。 Yeoman生成器默认输出此版本。

下载完zip后,将其取消归档并从终端进入目录。您需要安装软件包依赖项,因此从入门工具包的根目录执行以下命令:

npm install && bower install

接下来,启动gulp服务器以在浏览器中预览应用程序。

吞服

开箱即用,PSK带有基于的布局自适应UI的材料设计规范,以及已配置的客户端路由器。尝试单击左侧菜单中的某些项目,您会注意到页面更改,地址栏中的URL也会更改。

PSK: If you’re new to Polymer, the Starter Kit will get you off on the right foot

PSK:如果您是Polymer的新手,入门套件会让您失去正确的位置

PSK还附带了一些材料设计定制元素。有关这些元素的文档,以及浏览可用内容的整个目录,请转到Elements.polymer-project.org

创建待办事项

让我们首先为我们的待办事项创建一个新的Polymer元素。在'app / elements'目录中创建一个名为'todo-item'的新文件夹,并在其中放置一个'todo-item.html'文件。

每个元素的定义都将以文件顶部的导入列表开头。这些确保在元素尝试启动之前加载任何依赖项。将以下导入添加到“todo-item.html”文件夹的顶部:

 

接下来是元件。这用于告诉Polymer在哪里查找元素的模板。确保为dom-module提供与您正在创建的标记名称相匹配的ID - 在这种情况下,它将是todo-item。

在 - 的里面标签,创建一个

:host CSS选择器指示此元素应为display:block(而不是所有自定义元素的默认值,即display:inline)。在模板中,您有一个纸质复选框,其选中的属性具有数据绑定。此绑定将使您能够根据在运行时传递到组件中的数据来切换checked属性的状态。

Power users will enjoy the speed at which they can build Polymer apps thanks to Yeoman and PSK

由于Yeoman和PSK,高级用户将享受构建Polymer应用程序的速度

最后, Element允许使用我们标签的任何人传递他们自己的文本内容作为复选框的标签。例如,如果有人要写:

买些牛奶

在屏幕上,它将呈现一个复选框,然后是“购买一些牛奶”字样。这被称为分布,它是Web组件的一个较酷的功能。

现在你需要给你的元素一个原型。添加一个



翻译字数超限