AI 助理
备案控制台登录注册
开发者社区 云原生 文章 正文

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

2014-08-02 1137
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文链接: 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开发
容器
铁锚
+关注
270文章
目录
打赏
0
0
0
0
9
分享
相关文章
CaptainDrake
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CaptainDrake
171 1
猫林老师
|
3月前
|
JavaScript Java 容器
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。
猫林老师
74 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
老板这功能得加钱
|
10月前
|
Web App开发 前端开发 iOS开发
CSS3 转换，深入理解Flutter动画原理，前端基础图形
CSS3 转换，深入理解Flutter动画原理，前端基础图形
老板这功能得加钱
87 0
遇事问春风乄
|
10月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
遇事问春风乄
98 1
前端每日三省
|
前端开发 容器
ElementUI中栅格布局的实现原理
在ElementUI中，Row和Col组件是栅格布局的核心，它们的实现基于flexbox和CSS网格布局。
前端每日三省
508 0
_你当像鸟飞往你的山
|
Web App开发 前端开发 开发者
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（下）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（下）
_你当像鸟飞往你的山
207 0
_你当像鸟飞往你的山
|
算法 前端开发 开发者
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（中）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（中）
_你当像鸟飞往你的山
205 0
_你当像鸟飞往你的山
|
Web App开发 前端开发 数据可视化
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（上）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（上）
_你当像鸟飞往你的山
458 0
前端歌谣
|
JavaScript
js基础笔记学习276贪吃蛇布局1
js基础笔记学习276贪吃蛇布局1
前端歌谣
107 0
js基础笔记学习276贪吃蛇布局1
前端歌谣
|
JavaScript
js基础笔记学习277贪吃蛇布局2
js基础笔记学习277贪吃蛇布局2
前端歌谣
73 0
js基础笔记学习277贪吃蛇布局2

热门文章

最新文章

  • 1
    使用Zoomeye渗透网络摄像头
    5987
  • 2
    每个系统都在用的appid、appkey、appsecret都是什么意思？
    56
  • 3
    【玩转AIGC系列】使用Megatron-Deepspeed训练GPT-2并生成文本
    11
  • 4
    开源之夏 | 阿里开源近百任务上线，顶级导师&万元奖金等你
    4
  • 5
    阿里云在 2021 年 Gartner® 解决方案记分卡中获得 IaaS+PaaS 能力认可
    3
  • 6
    解决方案应用实例 |良品铺子借力数据中台，全面推进数字化战略
    10
  • 7
    js简单倒计时
    2
  • 8
    爱上MVC3系列~使用@需要注意的地方
    1
  • 9
    避免每次输入bundler Exec命令
    1
  • 10
    A Unix Utility You Should Know About: Pipe Viewer
    1
  • 1
    一文揭秘｜如何速成RAG+Agent框架大模型应用搭建（二）
    25
  • 2
    .net8 使用 license 证书授权案例解析
    28
  • 3
    人人都能读懂的大模型入门指南 - Transformer与Attention机制
    15
  • 4
    数据知识产权登记服务上线了！
    14
  • 5
    限时钜惠，.ltd/.info/.live首年9元
    17
  • 6
    网络微短剧，有“备”无患
    15
  • 7
    限时直降，全年最低，立即生效！
    12
  • 8
    年末最后一波，7大热门域名低至5元起！
    9
  • 9
    安全体检：云上安全的守护者
    14
  • 10
    「域名+AI」全新体验，等你来玩！
    11

    • 相关课程

    更多
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • 现代Javascript高级教程
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    通义万相：视觉生成大模型再进化
    AI助理

    你好，我是AI助理

    可以解答问题、推荐解决方案等