和 Polymer 一起加入 Web 组件革命（3）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-13 19:06 | 只看该作者

和 Polymer 一起加入 Web 组件革命（3）

组合：Web 组件的基础通过将另外的可视化 Web 组件组装到一个 <core-scaffold> 实例中，可以制造出 Web 应用程序（或单页面移动应用程序）的核心 UI 结构。下一个例子将显示如何给侧边栏添加一个选择菜单，并为当内容滚动时收缩的内容面板添加一个特别高的标题。

使用窄屏幕宽度启动应用程序时，标题区域是特别高的，以便有足够空间添加其他的 UI 组件，比如标签栏，如图 5 中所示。
图 5. 具有特别高的标题的内容面板

向下滚动面板的内容时，高标题会变短，最终与标准的工具栏高度一样，如图 6 中所示。
图 6. 高标题收缩至标准的工具栏高度

如果再次向下滚动内容，标题又会扩展。如果随时单击 hamburger 菜单，侧边栏将带着一个完整菜单，并与一个带有标题与 dW 标志的工具栏同时出现，如图 7 中所示。
图 7. 使用可选择菜单与主题工具栏扩展后的侧边栏抽屉

这个例子的代码位于 dwpcompose/index.html 中（参见）。图 8 显示了组合在一起形成骨架 UI 的 Web 组件。
图 8. 通过组合 Polymer 核心组件来构造 UI

现在的代码包含更多的 HTML 导入，分别用于组合中的 Web 每个组件，其中包括用于 Roboto 字体（一种用于移动设备的清晰字体，是目前 Android 设备的主流字体）的一个组件：

1
2
3
4
5
6

FOUC文档样式短暂失效（Flash of Unstyled Content）是指在某些版本的浏览器中，无样式的 HTML 元素短暂可见 — 在创建可视元素之后和完全应用 CSS 样式之前会出现这种情况。

<core-scaffold> 的 mode 属性现在被置为 waterfall-tall，指示 Web 组件处理高标题的折叠。<body> 标签上的 unresolved 属性将会激活代码，防止某些浏览器上出现现象。touch="auto" 属性确保触摸行为在所有受支持的浏览器上得到的处理都是相同的：

1 2	<body unresolved touch="auto"> <core-scaffold mode="waterfall-tall">

收起的侧边栏包含在 <core-scaffold> 元素内。标题包含两个组成部分：<core-toolbar> 和位于 <core-header-panel> 容器内的 <core-menu>。
<core-header-panel> 上的 navigation 属性通知 <core-scaffold> 容器，这是一个用于导航式可收回抽屉的元素。<core-header-panel> 也将自己的模式置为 seamed，这表示所有内容都将与标题一起滚动。<core-toolbar> 包含 dW 标志图标和标题：

1
2
3
4

<core-header-panel navigation flex mode="seamed">
  <core-toolbar><img src='/images/dwlogo.svg' width='50px' height='30px'>
  <span flex>Compose</span>
  </core-toolbar>

<core-menu> 包含两项内容，分别名为 s1 和 s2。因为 selected 属性的值为 s1，一开始选择的是 s1 项。名为 explore 的图标用于两个菜单项，它来自于 <core-icon> 集合（早先已经导入）：

1
2
3
4
5

  <core-menu  id='menu'  selected="s1" >
<core-item name="s1" icon="explore"  label="Selection 1"></core-item>
<core-item name="s2" icon="explore"  label="Selection 2"></core-item>
  </core-menu>
</core-header-panel>

在 Polymer 页面上可以看到所有可用的图标以及它们相应的名称。
右侧面板的工具栏包含 hamburger 按钮，这是由组件内部管理的。但通过给一个元素添加 tool 属性，就可以将这个属性添加到这个工具栏。在例子中，在工具栏的底部添加了一个 "Components" 标题。此外，还有一个设置按钮（实际上是一个 <core-icon-button> 元素，带有一个名为 more-vert 的图标）被添加到工具栏的右侧。带有 flex 属性的空 <span> 占据了中心的空闲空间。Polymer 为布局属性（比如这里使用的 flex）提供一种直观的声明语法，极大地简化了底层的部署。
最后一点但并非最不重要的一点，content 类的 <div> 被 distributed（Web Components 术语，意思是插入）到 <core-scaffold> 的右侧面板的内容区域中：

1
2
3
4
5
6
7
8
9

<div tool class="bottom indent">Components</div>

  <span tool flex></span>
  <core-icon-button tool icon="more-vert" on-tap="{{settingsAction}}"></core-icon-button>

  <div class="content">First line<br/>Second line</div>
  </core-scaffold>

</body>

收藏分享评分

回复引用

订阅 TOP

返回列表