gpt4 book ai didi

polymer 核心-滚动-标题-面板样式和导入

转载 作者:行者123 更新时间:2023-12-02 14:24:51 25 4
gpt4 key购买 nike

我对 Polymer 非常陌生,以下是我第一次尝试。我想添加一个 core-scroll-header-panel (这很酷!)并且它工作得相当不错 - 代码大部分是从示例中复制的。但我无法访问 core-scroll-header-panel 的 Shadow dom 来设置 headerBg 和 condensedHeaderBg 的样式。开发者工具不显示 core-scroll-header-panel 的影子 DOM(我可以看到其他元素的影子 DOM)

<!doctype html>
<html>
<head>
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">

<link rel="import" href="components/paper-item/paper-item.html">

<script src="components/platform/platform.js"></script>
<link rel="import" href="components/font-roboto/roboto.html">

<style>

/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
background-image: url(images/bg9.jpg);
}

/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
background-color: #f4b400;
}

core-toolbar {
color: #f1f1f1;
fill: #f1f1f1;
background-color: transparent;
}

.title {
-webkit-transform-origin: 0;
transform-origin: 0;
font-size: 40px;
}

.content {
padding: 10px 30px;
}
</style>
</head>
<body unresolved>
<core-scroll-header-panel condenses main>
<core-toolbar class="tall">
<core-icon-button icon="arrow-back"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<core-icon-button icon="more-vert"></core-icon-button>
<div class="bottom indent title">Title</div>
</core-toolbar>
<div class="content">
<p>
Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
<p>
Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
</div>
</core-scroll-header-panel>
</body>
</html>

有趣的是,当我导入 core-scroll-header-panel.html (如上所述)时,整个事情都会崩溃并且没有显示任何内容。但影子 DOM 和一切都已就位。

当我评论它时,页面是可见的,没有背景样式,因为影子 DOM 不存在。

有什么线索吗?

我添加了JSBin

问候,我什

PS:core-scroll-header-panel 中有一个overflow:hidden CSS 元素集。当强制它可见时,我可以使其可见。

最佳答案

http://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

重要提示:如果 core-header-panel 的父级没有高度,则不会显示 core-header-panel。

使用布局属性,您可以轻松地使 core-header-panel 填满屏幕

<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
</core-header-panel>
</body>

或者,如果您更喜欢在 CSS 中执行此操作,只需将 html、body 和 core-header-panel 的高度设置为 100%:

html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}

关于 polymer 核心-滚动-标题-面板样式和导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24721662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com