gpt4 book ai didi

css - 样式纸标签内容

转载 作者:行者123 更新时间:2023-12-02 08:17:44 24 4
gpt4 key购买 nike

我有关于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/

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