备案控制台
探索云世界
开发者社区 云原生 文章 正文

[译]Polymer官方文档-布局元素

2014-08-02 1084
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文链接: Layout elements翻译日期: 2014年8月2日翻译人员: 铁锚译注： 点击下载本教程的示例代码: Polymer布局元素Demo相关的代码文件在 layout 目录下.
原文链接: Layout elements(注:有时需换hosts)
翻译日期: 2014年8月2日
翻译人员: 铁锚

译注： 点击下载本教程的示例代码: Polymer布局元素Demo
相关的代码文件在 layout 目录下.

0. 准备- Chrome浏览器模拟移动设备
Chrome浏览器(要求最新版,如34以上版本)模拟移动设备的方法:
  • 打开一个标签页,按 F12,(或者在页面空白区域点鼠标右键,审查元素)，打开调试窗口.
  • 然后在将光标移动到调试窗口中, 按 ESC键,或者点击右上角的 drawer按钮,打开附加栏,
  • 切换到 Emulation --> Device --> 选择设备 --> 点击 Emulate 按钮, 然后刷新页面即可.
  • 如果要换设备,请选其他设备,然后点 Emulate按钮. 刷新页面。如下图所示:
图0. 使用Chrome模拟器示意图
模拟器的效果图如下所示:
图0.1 Chrome模拟器效果图


以下是正文部分:


核心元素(core-elements)和风格元素(paper-elements)集合中包含了很多可用来构建app布局的元素,包括:
  • <core-header-panel>. 包含一个 header 部分和一个 content 部分的简单容器. header部分可以保持不动,或者设置为与内容部分一起滚动.
  • <core-toolbar>. 可以用在较小的UI组件(例如卡片)中作为工具栏,或者app的工具栏. 工具栏可以充当控件(controls, 例如tabs 和buttons)的容器.
  • <core-drawer-panel>. 一个响应式容器,由一个左/右抽屉面板(用来导航或其他功能)和主内容区域组成.
  • <core-scaffold>. 一个快速响应的app布局,包含一个导航抽屉,主app工具栏,以及内容区域(使用core-drawer-panel core-header-panel和core-toolbar来实现)。core-scaffold元素是构造应用UI的快速方法.

App Bars 与 Toolbars

<core-header-panel> 通常包含一个 <core-toolbar>, panel会自动将 <core-toolbar> 放置到头部区域.当然,也可以为其他元素添加CSS类 core-header ,使 panel 将其放到header区域.
core-header-panel的其他元素会被放置到内容区域.
<core-header-panel> 的定位方式是 position: relative, 并且需要明确地为其指定高度.
下面的示例使用 <core-header-panel> 作为其最顶层的布局: 
<!doctype html>
<html>
<head>
  <title>core-header-panel示例</title>
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=yes">

<script 
  src="../components/platform/platform.js">
</script>
<link rel="import" 
  href="../components/core-toolbar/core-toolbar.html">
<link rel="import" 
  href="../components/core-header-panel/core-header-panel.html">
<link rel="import" 
  href="../components/core-icons/core-icons.html">
<link rel="import" 
  href="../components/paper-icon-button/paper-icon-button.html">
  <style>
body {
  font-family: sans-serif;
}
core-header-panel {
  background: white;
  /* height: 100% 会在某些浏览器上失效 */
  height: 100vh;
  width: 100vw;
}
core-toolbar {
  background-color: #03A9F4;
}
p {
  margin: 20px;
  padding: 80px 20px;
  border-radius: 20px;
  background-color: #eee;
}
  </style>
</head>

<!-- 使用 fullbleed 属性指定 body 填满 viewport -->
<body fullbleed unresolved>
  <core-header-panel>
    <core-toolbar id="mainheader">
      <paper-icon-button id="navicon" 
        icon="arrow-back"></paper-icon-button>
      <span flex>Title</span>
      <paper-icon-button id="searchbutton" 
        icon="search"></paper-icon-button>
    </core-toolbar>
    <p>示例内容1.</p>
    <p>这只是布局示例.</p>
    <p>示例内容3.</p>
    <p>示例内容4.</p>
    <p>示例内容5.</p>
    <p>示例内容6.</p>
  </core-header-panel>
</body>
</html>

效果图如下所示:


图1 使用core-header-panel布局


点击 这里查看原文core-header-pane的Demo实例:

你也可以为一个 <div> 元素添加   core-header 类,作为header元素: 
<body fullbleed unresolved>
<core-header-panel>
  <div class=“core-header”>
     标题栏
  </div>
  <div>
    <p>实际内容1</p>
    <p>实际内容2</p>
    <p>实际内容3</p>
    <p>实际内容4</p>
  </div>
</core-header-panel>
</body>

在 header panel 中设置 mode 元素来控制header区域与content区域如何交互, 包括以下几种模式:
  • standard. 标准模式, header 显示在上面(z-index 值更大),并且有阴影. 内容区域在header的下边滚动.
  • seamed. 分隔模式,(seamed, 有缝), header和内容区域在同一个层级, 在两者之间有一条缝隙(seam)(没有阴影). 内容在header的下方滚动.
  • waterfall. 瀑布模式, header 最初和 seamed模式一样. 当内容在header下方滚动时, header 上升,并且显示阴影(就如同 standard 模式一样).
  • waterfall-tall. 很高的瀑布,类似 waterfall 模式, 但是工具栏开始时很高 (3x 标准高度的) ,在用户滚动时toolbar又缩短为标准高度(standard-height).
  • scroll. 滚动模式, header 和内容区域之间有间隔, 并且随内容区域一起滚动.
  • cover.  覆盖模式,内容滚动会越过 header. 这种模式是设计了用来和很狭窄的内容(例如 卡片,cards)一起使用的.
请查看 <core-header-panel> demo ,里面有所有模式的示例. 大多数情况可能你都不需要设置mode,保持默认即可.

另外,你可以手动的给 core-toolbar 添加下面的CSS类来设定高度:
  • medium-tall (2x 正常高度)
  • tall (3x 正常高度)
将工具栏设置得更高,可以在app-bar中添加tabs标签: 

<!doctype html>
<html>
<head>
  <title>core-toolbar示例</title>
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=yes">

<script 
  src="../components/platform/platform.js">
</script>
<link rel="import" 
  href="../components/core-toolbar/core-toolbar.html">
<link rel="import" 
  href="../components/core-header-panel/core-header-panel.html">
<link rel="import" 
  href="../components/core-icons/core-icons.html">
<link rel="import" 
  href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import"
  href="../components/paper-tabs/paper-tabs.html">

  <style>
body {
  font-family: sans-serif;
  background-color: #eee;
}
core-toolbar {
  background-color: #03A9F4;
}
  </style>
</head>

<!-- 使用 fullbleed 属性指定 body 填满 viewport -->
<body fullbleed unresolved>
    <core-toolbar class="medium-tall">

      <paper-icon-button id="navicon"
        icon="menu"></paper-icon-button>

      <span flex>core-header-panel</span>

      <paper-icon-button id="morebutton"
        icon="more-vert"></paper-icon-button>

      <paper-tabs class="bottom fit">
        <paper-tab>选项卡1</paper-tab>
        <paper-tab>选项卡2</paper-tab>
      <paper-tabs>
    </core-toolbar>
</body>
</html>

效果图如下所示:
图2 更高的工具栏

如果 core-header-panel 是 waterfall-tall 模式时,它会自动控制toolbar的高度,所以你不应该为toolbar设置 medium-tall 或者 tall 类.
提示: 想要toolbar在tall与condensed状态切换时具有更好玩的特效,你可以试试 <core-scroll-header-panel>. 点击查看 示例demo. 更复杂的特效,可能需要你根据源码自己修改.

响应式的侧边栏导航

<core-drawer-panel> 元素创建了一个 左(或右)侧边栏,以及主内容区域. 在屏幕比较狭窄时,像抽屉一样的侧边栏可以通过调用  drawer panel 的 togglePanel 方法来切换 显示/隐藏 状态.
指定了 drawer 属性的子元素会被放到侧边栏中, 指定了 main 属性的的子元素会被放置到主面板中.(如果两者都设置了会怎么样? ^_^ 请不要这么二)
你可以将 <core-header-panel> 和 <core-toolbar> 元素嵌在 <core-drawer-panel> 中,创建一个包含侧边栏以及内容区域的布局,如下面的实例所示: 
<!doctype html>
<html>

<head>
  <title>core-drawer-panel示例</title>
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=yes">

<script 
  src="../components/platform/platform.js">
</script>
<link rel="import" 
  href="../components/core-toolbar/core-toolbar.html">
<link rel="import" 
  href="../components/core-menu/core-menu.html">
<link rel="import" 
  href="../components/core-item/core-item.html">
<link rel="import" 
  href="../components/core-header-panel/core-header-panel.html">
<link rel="import" 
  href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" 
  href="../components/core-icons/core-icons.html">
<link rel="import" 
  href="../components/paper-icon-button/paper-icon-button.html">

  <style>
body {
  font-family: sans-serif;
}
core-header-panel {
  background: white;
}
core-toolbar {
  background-color: #03A9F4;
}
#navheader {
  background-color: #56BA89;
}
.content {
  padding: 20px;
}
/* drawer 在很宽的屏幕上总是可见的,所以不需要menu按钮 */
core-drawer-panel:not([narrow]) #navicon {
  display: none;
}
  </style>
</head>

<!-- 使用 fullbleed 属性指定 body 填满 viewport -->
<body fullbleed unresolved>
    <core-drawer-panel id="drawerPanel">

      <core-header-panel drawer>
        <core-toolbar id="navheader'">
          <span>菜单</span>
        </core-toolbar>
        <core-menu>
          <core-item label="菜单1"></core-item>
          <core-item label="菜单2"></core-item>
        </core-menu>
       </core-header-panel>

      <core-header-panel main>
        <core-toolbar id="mainheader">
          <paper-icon-button 
            id="navicon" icon="menu"></paper-icon-button>
          <span flex>core-drawer-panel示例</span>
        </core-toolbar>
        <div class="content">
          如果在小屏幕上,左边的 drawer 是隐藏的,请点击上方的按钮显示它.
		  <p>
		  较小的屏幕上可以滑动,或者点击边界来隐藏菜单.
		  </p>
		  大屏幕上drawer会一直显示
        </div>
      </core-header-panel>

    </core-drawer-panel>
    <script>
    document.addEventListener('polymer-ready', function() {
      var navicon = document.getElementById('navicon');
      var drawerPanel = document.getElementById('drawerPanel');
      navicon.addEventListener('click', function() {
        drawerPanel.togglePanel();
      });
    });
    </script>
</body>
</html>

效果图如下所示:
图3, 响应式侧边栏示例

点击 这里查看原文的Demo实例

使用 <core-scaffold> 处理侧边栏

<core-scaffold> 元素将一些常用的组件组合起来:
由 <core-header-panel> 和  core-toolbar 组成 <core-drawer-panel>侧边栏 ;  以及主内容区域,通常有一个用来显示导航栏的按钮.
下面这个示例和上面的示例是一样的效果(但代码中没有使用 JS ): 
<!doctype html>
<html>
<head>
  <title>core-scaffold示例</title>
  <meta name="viewport" 
  content="width=device-width, initial-scale=1.0, user-scalable=yes">

<script 
  src="../components/platform/platform.js">
</script>
<link rel="import" 
  href="../components/core-toolbar/core-toolbar.html">
<link rel="import" 
  href="../components/core-menu/core-menu.html">
<link rel="import" 
  href="../components/core-item/core-item.html">
<link rel="import" 
  href="../components/core-header-panel/core-header-panel.html">
<link rel="import" 
  href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" 
  href="../components/core-scaffold/core-scaffold.html">
  <style>
body {
  font-family: sans-serif;
}
#navheader {
  background-color: #56BA89;
}
.content {
  padding: 20px;
}
  </style>
</head>

<!-- 使用 fullbleed 属性指定 body 填满 viewport -->
<body fullbleed unresolved>
	<core-scaffold>

	  <core-header-panel navigation flex>
		<core-toolbar id="navheader">
		  <span>菜单</span>
		</core-toolbar>
		<core-menu>
		  <core-item label="菜单One"></core-item>
		  <core-item label="菜单Two"></core-item>
		</core-menu>
	  </core-header-panel>
	  
	  <span tool>core-scaffold示例</span>

	  <div class="content">
          如果在小屏幕上,左边的 drawer 是隐藏的,请点击上方的按钮显示它.
		  <p>
		  较小的屏幕上可以滑动,或者点击边界来隐藏菜单.
		  </p>
		  大屏幕上drawer会一直显示
	  </div>
	</core-scaffold>
</body>
</html>

效果图如下所示:
图4. core-scaffold侧边栏
点击 这里查看原文的<core-scaffold>实例


文章标签：
Web App开发
容器
铁锚
目录
相关文章
时雨h
|
8天前
|
编解码 前端开发 iOS开发
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
时雨h
52 1
游客uul6wusao3sds
|
17天前
|
前端开发 开发者 UED
构建响应式Web界面：Flexbox与Grid布局的深度解析
【4月更文挑战第6天】 在现代前端开发中，为了适配不同设备并提供流畅的用户体验，理解并掌握响应式设计变得至关重要。本文将深入探讨两种主要的CSS布局模式——Flexbox和Grid。我们将剖析它们的核心概念、使用场景以及如何结合它们来创建复杂且灵活的响应式界面。通过实例演示和对比分析，帮助开发者提升界面布局技能，从而设计出能够适应多变设备的Web界面。
游客uul6wusao3sds
17 3
游客5iyiu2o7vjvko
|
11月前
原生瀑布流布局
原生瀑布流布局
游客5iyiu2o7vjvko
43 0
饱饱巴士
|
开发工具 Android开发 iOS开发
如何使用 Draggable 和 DragTarget 在 Flutter 中创建拖放 UI 元素？
如何使用 Draggable 和 DragTarget 在 Flutter 中创建拖放 UI 元素？
饱饱巴士
339 0
蜡笔小心_
|
JavaScript
【Vue3从零开始-第四章】4-4 组件和元素切换动画
【Vue3从零开始-第四章】4-4 组件和元素切换动画
蜡笔小心_
232 0
【Vue3从零开始-第四章】4-4 组件和元素切换动画
蜡笔小心_
|
前端开发 JavaScript
【Vue3从零开始-实战】S5：CSS作用域约束及登录页的布局实现
【Vue3从零开始-实战】S5：CSS作用域约束及登录页的布局实现
蜡笔小心_
177 0
【Vue3从零开始-实战】S5：CSS作用域约束及登录页的布局实现
蜡笔小心_
|
JavaScript 前端开发
【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局
【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局
蜡笔小心_
278 0
【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局
万里淘
|
开发框架 小程序 Android开发
列表组件list-view的使用、flex布局教程，以APICloud AVM框架为例
avm.js是 APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。
万里淘
445 0
前端歌谣
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
前端歌谣
73 0
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
前端歌谣
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
前端歌谣
84 0
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    21
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    29
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    25
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    15
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    22
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    22
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    16
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    18
  • 10
    sql语句创建数据库
    18

    • 相关电子书

    更多
  • UI2CODE智能生成flutter代码--整体架构 【上叶】
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）