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

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

2014-08-02 1136
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文链接: 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文章
目录
相关文章
CaptainDrake
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CaptainDrake
171 1
1941623231718325
|
8月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
163 2
时雨h
|
10月前
|
编解码 前端开发 iOS开发
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
时雨h
142 1
土木林森
|
10月前
|
开发框架 前端开发 搜索推荐
标题：【专栏：CSS进阶篇】CSS样式重置与框架：快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观，而CSS框架如Bootstrap提供预设样式和组件，加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点，但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
土木林森
87 0
土木林森
|
10月前
|
前端开发 UED 容器
【专栏：CSS进阶篇】CSS Grid布局：构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统，适用于复杂页面结构，如页眉、主体和侧边栏。通过定义网格线和单元格，能轻松创建行和列。基本语法包括设置容器为grid容器，定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中，CSS Grid能有效提升开发效率和用户体验，尤其在响应式设计和复杂布局场景下。
土木林森
174 0
wljslmz
|
10月前
|
前端开发 容器
全面了解 Flex 布局的基本概念、常用属性和使用方法
【2月更文挑战第7天】
wljslmz
475 0
全面了解 Flex 布局的基本概念、常用属性和使用方法
遇事问春风乄
|
10月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
遇事问春风乄
98 1
_你当像鸟飞往你的山
|
Web App开发 前端开发 开发者
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（下）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（下）
_你当像鸟飞往你的山
207 0
_你当像鸟飞往你的山
|
Web App开发 前端开发 数据可视化
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（上）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（上）
_你当像鸟飞往你的山
458 0
_你当像鸟飞往你的山
|
算法 前端开发 开发者
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（中）
【重学CSS】图文并茂！一次性搞懂 Grid 布局，实现“布局自由”~（中）
_你当像鸟飞往你的山
205 0

热门文章

最新文章

  • 1
    使用Zoomeye渗透网络摄像头
    33
  • 2
    每个系统都在用的appid、appkey、appsecret都是什么意思？
    53
  • 3
    【玩转AIGC系列】使用Megatron-Deepspeed训练GPT-2并生成文本
    10
  • 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框架大模型应用搭建（二）
    22
  • 2
    .net8 使用 license 证书授权案例解析
    27
  • 3
    人人都能读懂的大模型入门指南 - Transformer与Attention机制
    15
  • 4
    数据知识产权登记服务上线了！
    14
  • 5
    限时钜惠，.ltd/.info/.live首年9元
    17
  • 6
    网络微短剧，有“备”无患
    15
  • 7
    限时直降，全年最低，立即生效！
    11
  • 8
    年末最后一波，7大热门域名低至5元起！
    9
  • 9
    安全体检：云上安全的守护者
    12
  • 10
    「域名+AI」全新体验，等你来玩！
    10

    • 相关课程

    更多
  • 前端开发CSS基础

    • 相关电子书

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

    • 相关实验场景

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

    你好，我是AI助理

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