polymer - "core-header-panel"似乎无法开箱即用

标签 polymer web-component

我正在尝试一些 core polymer 元素,但在 my demo 中使用 core-header-panel 时遇到了问题| .

我认为工具栏是正确的,因为我设法做到了 another demo它使用最少的 CSS。但是我为 core-header-panel 找到的所有演示似乎都采用了组件外部的大部分布局配置(这有点像组件的要点)。我在这里误解了什么吗?

最佳答案

当今最好的模式是使用 polymer 布局属性。

<body fullbleed vertical layout>
  <core-header-panel flex>

vertical layout 使 body 成为一个(垂直的)flex-box,core-header-panel 上的 flex 属性将使它填充可用空间。 fullbleed 属性设置正文以适合视口(viewport)。

这通常比使用 fit 更好,因为 flex-boxes 更有弹性。您可以向主体添加不同的页眉或页脚,弹性面板将进行调整。

此外,使用 layout 容器和 flex 子容器是一种您可以在应用程序的其他地方继续使用的模式。

关于polymer - "core-header-panel"似乎无法开箱即用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24474826/

相关文章:

javascript - 为什么 v1 web 组件 customElements.define() 抛出 TypeError

javascript - Polymer Core-Ajax文件上传

javascript - Web Animation API 自定义效果实现

dart - 如何捕获PolymerElement的鼠标输入

vue.js - 如何在 vue js web 组件中正确使用插槽并应用样式

dart - Web 组件中的自定义事件?

javascript - 将事件绑定(bind)到 Web 组件中的模板文字的最便捷方法是什么?

css - Polyfilled HTML 导入 : Why is the CSS not fetched?

javascript - polymer 在有效的正则表达式上抛出错误无效的正则表达式

javascript - 有没有一种方法可以将 Slick-Carousel 与 Polymer.js 一起使用?