gpt4 book ai didi

css - 为什么我的 CSS 在我的 polymer 自动绑定(bind)模板中停止了?

转载 作者:行者123 更新时间:2023-11-28 17:22:23 25 4
gpt4 key购买 nike

我正在尝试将 CSS 和自动绑定(bind)模板与 polymer 一起使用,但我遇到了一些问题。

我的设置是 <core-header-panel main mode="waterfall-tall">core-drawer-panel 里面.当我滚动时,这会导致我的标题变大和变小(获得/失去 .tall 类)。

我正在玩这个来隐藏和显示我的链接选项卡。看看:

Expanded

Collapsed

在我实现“自动绑定(bind)”之前,我所做的设置是 more-vert菜单项,仅在 .tall 时出现类在那里。我正在使用这个 CSS 片段

core-toolbar.tall #morebutton {
display: none;
}
core-toolbar.tall #morebutton-dropdown {
display: none;
}
core-toolbar:not(.tall) #tabs {
display: none;
}
core-dropdown {
position: absolute;
top: 38px;
left: 0;
}

还有这个 html:

<body fullbleed layout vertical>
<core-drawer-panel id="drawerPanel">

<core-header-panel drawer>
<core-toolbar id="navheader" >
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Welcome"><a href="#welcome" target="_self"></a></core-item>
<core-item label="History"><a href="#history" target="_self"></a></core-item>
<core-item label="Review"><a href="#reviews" target="_self"></a></core-item>
</core-menu>
</core-header-panel>

<core-header-panel main mode="waterfall-tall">
<core-toolbar id="mainheader" >
<paper-icon-button id="navicon" icon="menu" ></paper-icon-button>
<span flex>Malmesbury Tandoori</span>
<span flex></span>
<!-- <template is ="autobinding"> -->
<div relative flex>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<core-dropdown id="morebutton-dropdown" relatedTarget="{{$.morebutton}}">
<core-menu>
<core-item>Menu</core-item>
<core-item>Find Us</core-item>
<core-item>About</core-item>
</core-menu>
</core-dropdown>
</div>
<!-- </template> -->
<paper-tabs id="tabs" class="bottom fit" noink layout scrollable selected="0" flex role="tablist" horizontal center layout>
<paper-tab role="tab" flex center-center horizontal layout>
<a href="index.html" class="tab-content">Home</a>
<paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
</paper-tab> <paper-tab role="tab" flex center-center horizontal layout>
<a href="menu.html" class="tab-content">Menu</a>
<paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
</paper-tab>
<paper-tab role="tab" flex center-center horizontal layout>
<a href="FindUs.html" class="tab-content">Find Us</a>
<paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
</paper-tab>
<paper-tab role="tab" flex center-center horizontal layout>
<a href="FindUs.html" class="tab-content">About Malmesbury Tandoori</a>
<paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
</paper-tab>
</paper-tabs>

</core-toolbar>
<div class="content">
......
</div >
</core-header-panel>

</core-drawer-panel>
</body>

我已经注释掉了似乎会破坏它的模板标签。没有那一点,它看起来像这样:

enter image description here

正如您从第二张图片中看到的那样,我的 css/html 设置被 autobinding 以某种方式破坏了模板。

我该如何解决这个问题?

最佳答案

应该是<template is="auto-binding"> .在您的代码中,您没有使用破折号。

就个人而言,我倾向于将所有内容都包装在 body 中在auto-binding模板,这样所有东西都会同时被淘汰。否则你需要监听 template-bound在您可以使用 JavaScript 访问任何内容之前触发该事件。

关于css - 为什么我的 CSS 在我的 polymer 自动绑定(bind)模板中停止了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27784570/

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