第一个Polymer应用 - (2)创建你自己的元素
翻译日期: 2014年7月6日
翻译人员: 铁锚
通过上一节的学习和实践, 您已经完毕了一个主要的应用程序结构(application structure),从如今開始能够构建一个标签页(card element,卡片元素)来显示名片(post)。完毕后的标签页包括个人头像,名字,红心按钮,以及内容区域:
在本节中,你将会创建一个 <post-card> 元素,用来控制他的子元素布局和样式, 完毕后就能够像前面使用过的其它标签那样使用啦,调用的代码看起来像以下一样:
<post-card><img src="http://avatar.csdn.net/4/9/C/1_renfufei.jpg"><h2>铁锚</h2><h3>K神是我们的模范!皮冻你要好好努力!.</h3>
</post-card>
通过本节的学习,您将:
- 学会在Polymer中怎样创建自己定义元素
- 对Shadow DOM(影子DOM)有一定的了解.
了解很多其它:
Shadow DOM 技术同意你将一棵局部的(local,本地的)DOM树加入到某个DOM元素中, 而这个局部DOM的样式和标签 跟全局web页面是相互独立的(不会污染,也不会受到影响,原文叫解耦,decoupled). 关于Shadow DOM的很多其它信息,请參考: Shadow DOM polyfill docs. 也能够參考这篇中文文档: 使用Shadow DOM创建Web组件
编辑 post-card.html 文件
进入根文件夹以下的 starter 文件夹, 用编辑器打开 post-card.html 文件,该文件包括一个自己定义元素的基本骨架(skeleton),在文件开头通过import引入其它的2个组件:
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
说明:
- 和上一节所讲的相似, 这里的 <link rel="import"> 用来引入 post-card 须要的其它元素.
紧接着是元素自身的定义:
<polymer-element name="post-card"><template><style>:host {display: block;position: relative;background-color: white;padding: 20px;width: 100%;font-size: 1.2rem;font-weight: 300;}.card-header {margin-bottom: 10px;}</style><!-- CARD CONTENTS GO HERE --><!-- 卡片的内容要放到这儿 --></template>...
说明:
- <polymer-element>元素是Polymer中自己定义新元素的方式。在这里,你创建的元素叫做 "post-card".
- <template>定义了元素的内部DOM结构,或者是影子(shadow)DOM。这里就是加入自己定义元素标签(markup)的地方。
- :host 伪类被用于shadow DOM tree中, 匹配挂载shadow DOM树的那个宿主元素(host有宿主的意思). 在这里,它匹配的就是 <post-card> 元素。
- 在shadow DOM中,普通的CSS选择器作用域范围仅仅在shadow DOM内部; 这里的 .card-header 就仅仅会匹配到此元素的shadow DOM内部.
<polymer-element> 标签仅仅能在直接子元素这一级包括1个 <template> 标签. <template>标签定义了元素的shadow DOM. 在<template>内部,同意嵌套其它的 <template> 标签。
<script>Polymer({});</script>
说明:
- 在文件末尾处的 Polymer 方法调用会将此元素注冊给浏览器,使浏览器记住它。在后面的小节中你还会和这个函数打非常多交道。
了解很多其它:
创建 <post-card> 实例时,其shadow DOM <template> 中的内容会被插入成为元素的 shadow root。这些元素会在浏览器中(rendered,渲染)显示,但并不包括在宿主元素的 children 集合中。
假设没有其它设置,全部用户加入的子元素都不会被渲染/显示(render)。
比如:
<post-card><h3>假设没定义放在哪个地方,就没有地方来显示这个内容!</h3></post-card>
这里创建了一个含有单个<h3>元素作为子节点的 <post-card> . 假设要显示 <post-card> 内的 <h3> ,您须要加入一个插入点(nsertion point),告诉浏览器将这个子元素渲染到 shadow DOM树的哪个地方。
-------------------------------------------------------------------------------------
创建卡片结构(card structure)
找到 <template> 结尾处有凝视的地方,加入以下的 <div> 和 <content> 标签到代码中.
<!-- CARD CONTENTS GO HERE --><div class="card-header" layout horizontal center><content select="img"></content><content select="h2"></content></div><content></content>
说明:
- layout horizontal center 属性是 Polymer 中创建一个flexbox(伸缩)布局的高速方式。
- 3个 <content> 元素创建了一些插入点(insertion points), shadow DOM 规范称(call)这个匹配节点的过程为派发(distribution).
- 全部的 <img> 子元素都会匹配到第一个 <content> 标记, 并被插入到那里。
- 第二个 <content> 标记选择全部的 h2 子元素。
- 最后一个 <content> 标记,没有指定 select 属性, 会选择全部还未被插入的节点。
(这应该是<content>元素最通用的格式)。
-------------------------------------------------------------------------------------
给引入的内容设置样式
能够使用非常多新的CSS选择器. post-card.html 文件已经包括 :host 选择器,用于对顶层的 <post-card> 元素设置样式。
要设置使用 <content> 加入的子元素的风格,能够在 <style> 标签中加上以下的CSS样式:
polyfill-next-selector { content: '.card-header h2'; }.card-header ::content h2 {margin: 0;font-size: 1.8rem;font-weight: 300;}polyfill-next-selector { content: '.card-header img'; }.card-header ::content img {width: 70px;border-radius: 50%;margin: 10px;}
说明:
- 伪类 ::content 选择一个(依据 <content> 标签创建的)插入点. 在这里, ::content h2 匹配全部通过插入点派发的 h2 元素。
- 对于不支持shadow DOM的浏览器, polyfill-next-selector 规则告诉 shadow DOM polyfill 怎样将 ::content 规则转换为non-shadow DOM规则。
比如,在不支持shadow DOM时, post-card h2 匹配卡片中的全部 <h2> 标签。
注意:你不能对插入点自身设置样式, 所以使用 ::content 时必须伴随着后代选择器。
编辑 index.html 文件
将新元素引入 index.html
保存 post-card.html, 并打开 index.html, 在已有的 imports 语句后加上以下的import语句:
<link rel="import" href="post-card.html">
说明:
- 在 index.html 中引入后就能够使用 <post-card> 元素。
-------------------------------------------------------------------------------------
在 index.html 文件里, <core-toolbar> 元素的后面直接加上一个 <post-card> 元素:
... </core-toolbar><div class="container" layout vertical center><post-card><img width="70" height="70" src="http://www.iteye.com/upload/logo/user/156996/59e4f109-2a2d-300f-b144-c62994e798e6.jpg"><h2>大漠穷秋</h2><h3>脚本娃娃是一个有爱的程序猿社区!</h3></post-card></div>...
说明:
这里指定的子元素将被分发(distributed)到 <post-card>元素的各个插入点。
检验成果
保存(建议编辑过程中随时保存,这是好的编码习惯)文件,部署,然后用chrome打开链接或刷新页面, 比方:
http://localhost:8080/polymer-tutorial-master/starter/index.html
则显示效果例如以下所看到的:
尽管还缺少一个关注按钮(favorite button),但至少看起来有点样子了。
假设错误发生或不显示,能够和 step-2 文件夹下的 index.html, post-card.html 文件对照,当然,你也能够直接訪问这两个文件试试效果。
假设,你的页面看起来tab的宽度不够,请自己调整一下style中的width相关属性,有可能是 media选择器里面的部分。
动手实践:
建议你折腾一下插入点,体会它们是怎样工作的。 假设在 index.html 中改变了 <post-card> 子元素的顺序,会有什么不同吗? 假设包括多个图片,或加入纯文本呢? 你还能够试着交换 post-card.html 文件里的两个 select= 属性。
下一节
第一个Polymer应用 - (3)使用数据绑定
转载于:https://www.cnblogs.com/mqxnongmin/p/10716155.html
第一个Polymer应用 - (2)创建你自己的元素相关推荐
- pandas读取多个文件内容为dataframe、并合并为一个dataframe、pandas创建仅有列标签而内容为空的dataframe
pandas读取多个文件内容为dataframe.并合并为一个dataframe.pandas创建仅有列标签而内容为空的dataframe 目录
- SAP PM 入门系列11 - 一个维护通知单只能创建一个维护订单?
SAP PM 入门系列11 - 一个维护通知单只能创建一个维护订单? 在SAP系统里,执行事务代码IW34,输入Notification号码100314924,以及Order type ZM03,试图 ...
- java开发环境的建立过程_Java开发环境的搭建及第一个Java程序的创建
Java的几个基本概念: JVM:Java Virtul Machine(Java虚拟机) JRE:Java Runtime Environment(Java运行时环境) JDK:Java Devel ...
- 编程第一个Apple Watch程序创建项目
编程第一个Apple Watch程序创建项目 2.4 编程第一个程序 本节将通过编写第一个程序,为开发者讲解如何添加Watch应用对象.运行程序.界面设计.编写代码等内容本文选自Apple Watc ...
- 用户自定义一个异常,编程创建并抛出某个异常类的实例。运行该程序并观察执行结果。
用户自定义一个异常,编程创建并抛出某个异常类的实例.运行该程序并观察执行结果. 例:用户密码的合法化验证. 要求密码有4-6个数字组成.若长度不落在这个范围或不是有数字组成.抛出自己的异常. 要求: ...
- mysql如何创建非管理员权限_mysql权限管理,一个非db管理员创建mysql的做法_MySQL...
bitsCN.com mysql权限管理,一个非db管理员创建mysql的做法 安装了mysql,建了数据库,需要几个账号,进行权限管理,现总结如下 一个建了四个账号. 1. root 账号,这是安装 ...
- mysql 如何添加索引_MySQL如何创建一个好索引?创建索引的5条建议【宇哥带你玩转MySQL 索引篇(三)】...
MySQL如何创建一个好索引?创建索引的5条建议 过滤效率高的放前面 对于一个多列索引,它的存储顺序是先按第一列进行比较,然后是第二列,第三列...这样.查询时,如果第一列能够排除的越多,那么后面列需 ...
- THEOS的第一个TWeak的成功创建
THEOS的第一个TWeak的成功创建 THEOS的第一个TWeak的成功创建参考资料:成功的创建一个TWeak的弹出步骤1:安装Xcode和Xcode command line步骤2:安装theos ...
- 从一个点云里面创建一个深度图
这次,我们将显示如何从一个点云和一个给定的传感器来创造深度图.下面的代码,创建了一个在观察者前面的矩形. #include <pcl/range_image/range_image.h> ...
最新文章
- Collections工具类常用API使用示例
- MapReduce关系代数运算
- 32位汇编第七讲,混合编程,内联汇编
- Redis源码剖析(四)过期键的删除策略
- Xamarin使用ListView开启分组视图Cell数据展示bug处理
- 边缘检测中非极大值抑制简单解释
- 在Anaconda中实现多版本Python共存
- 转 LCD的接口类型详解
- eclipse启动时间很慢的调优解决
- C#中使用MongoDb
- paip.Net Framework各个版本的功能不同总结
- QGIS获取OSM地图矢量数据
- STM32开发工具-keil5安装
- linux中查看resin进程,resin安装
- linux raid 监控,如何使用CentOS 6监控Dell PERC H710 Raid控制器背后的硬盘状态?
- 前端项目分析:我是如何做图片优化的(预加载、懒加载和延迟加载)
- 魔术师要每位观众心里想一个三位数abc(abc分别是百位、十位和个位数字)然后魔术师让观众心中记下acb、bac、bca、cab、cba这5个数的和值。观众说出这个和是多少,则魔术师一定知道原数为多少
- LeetCode 111-120题 尚未看题解
- 非监督多类域适应:理论,算法和实践
- zabbix连接mysql_zabbix的简单操作(监控客户端MySQL数据包库)