- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有关于paper-tab
的内容。有没有办法设置它们的样式以便在每个选项卡中获得两行内容?回到过去,我会创建两个 div,然后使用
::shadow .tab-content 来应用一个
flex-direction: column``但是现在 : :shadow
已弃用...我已尝试将其替换为 chromestatus 平台上建议的完整选择器:
paper-tabs.tabs paper-tab #shadow-root div.tab-content
{
flex-direction: column;
}
但它也不起作用。
我试过使用 mixin,style is="custom-style"
.tabs{
--paper-tab-content: {flex-direction: column;};
}
也没用
有什么想法吗?
最佳答案
Polymer 允许通过 css mixins 进行元素自定义
引用 paper-tabs 的文档我们可以看到 paper-tabs 有一个名为 --paper-tabs
的 css mixin。事实上,大多数 polymer 元素都有一个以自定义元素命名的混入,这是推荐的方式。看着 source我们可以看到 mixin 应用于 css :host
标签。如果你想在范围内将 mixin 应用于所有元素,请使用 :root
标签。否则将 :root
替换为任何类标记,例如my-class
并将其应用于元素。
<html>
<head>
<base href="http://polygit.org/polymer+:master/components/">
<script src="components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-tabs/paper-tabs.html" rel="import">
<style is="custom-style">
:root {
/* Set custom property (variables) */
--paper-tabs-selection-bar-color: red;
/* Set mixin */
--paper-tabs: {
height: 200px;
background: teal;
color: rebeccapurple;
};
}
/* Apply mixin via class */
.my-class {
--paper-tabs-selection-bar: {
height: 20px;
}
}
</style>
</head>
<body>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<paper-tabs class="my-class" selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</body>
</html>
关于css - 样式纸标签内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40399969/
我试图学习python并以此开始,当我尝试运行它时,我一直收到语法错误。光标跳到def start部分的close结束处。我不确定语法错误来自哪里,因为我用语音标记了所有打印件 #! python3
在我的应用程序中,我使用了 polymer 的 paper-dialog 元素。对话框的样式总是将它定位在中心,但我希望它在对话框和窗口右侧之间设置一个最小距离,所以当窗口缩小时,纸质对话框不会靠近右
我需要实现一个石头剪刀布锦标赛模拟器,它将玩完所有回合并返回锦标赛。 这是我的锦标赛数组: tournament = [ [ [ ["Armando",
所以我实际上是用自定义元素包装标准 paper-slider 元素,并希望包含一些样式。以下是我目前拥有的: /* Works */ paper-slider {
对于仅包含图像的 HTML 文档,如何缩放图像以填满整个工作表?我希望图像缩放它的宽度/高度以尽可能大/尽可能小以适合一张纸。 我开始用它来分页 footer {page-break-after:al
我正在尝试扩展 Polymer paper-slider 元素,以便能够获取枚举列表并在 slider 中迭代这些值,而不是仅显示数值。但是我在使样式起作用时遇到了麻烦。如您所见,如果您运行此代码片段
我是 paper.js 的新手。 对于这个项目,我需要一个将在许多情况下使用的形状(具有不同的填充颜色),因此使用符号显然更好(而不是使用 Path.clone() 方法)。但是,一旦我将符号实例化为
我想重新组合我的 PDF 文档以使用我的打印机的 A4 格式在 A5 上打印它们。 我还需要在每个 A5 页面上打印两个站点(幻灯片),当然应该是双面的。因此 A4 页面是横向格式。比我想把它剪在中间
我有两个元素一个在另一个上面,也就是说,一个挡住了另一个。假设 Item2 被 Item1 阻止。现在每当我使用 project.hitTest(Item2); 它工作正常。 但是当我使用鼠标的eve
我有一个网站,它本质上是一个大 Canvas 图像。目前,当 body 被加载时,它开始通过这段代码淡入: 但是我想在我的 paperscript 中调用它,因为有时 body 会在图像从 pape
我是一名优秀的程序员,十分优秀!