paper-tabの内容に関することがあります。各タブに2行のコンテンツを表示するためにスタイルを設定する方法はありますか？ 時間が経つと、私は2つを作成しましたdiv, then used :: shadow .tab-content to apply a flex-direction：column``しかし今は::shadowが推奨されていません...私はchromestatusプラットフォーム：スタイリングペーパータブの内容
paper-tabs.tabs paper-tab #shadow-root div.tab-content
{
flex-direction: column;
}
でも動作しません。私はstyle is="custom-style"
.tabs{
--paper-tab-content: {flex-direction: column;};
}
で、ミックスインを使用してみました
いずれか
任意のアイデアは動作しませんか？
ポリマーが、我々はその紙のタブを見ることができますcss mixins
による要素のカスタマイズがpaper-tabsのマニュアルを参照のうえ可能にするには、CSSのミックスインが--paper-tabsと呼ばれています。実際、ほとんどのポリマー要素にはcustom要素の名前が付けられたmixinがあり、これが推奨される方法です。 sourceを見ると、mixinはCSS :hostタグに適用されています。範囲内のmixinをすべての要素に適用するには、:rootタグを使用してください。それ以外の場合は:rootを任意のクラスタグに置き換えます。 my-classを要素に適用します。あなたのanwserのため
<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>
感謝。しかし、これは私の問題を解決しません。 mixinを使ってタブの背景やテキストを変更するのに問題はありません。しかし、私がしたいこと（タブに句読点をつけること）をするには、フレックス方向を適用する必要があります：作業を拒否する列 – SKMTH
忘れてください。私が間違っていたのは、ミックスインを 'root'以外のセレクターに設定することでした。今はすべてが動作します。ありがとう！ – SKMTH
@SKMTH '：root'は必須ではないということを明確にすべきでした。私はちょうどあなたがすべての要素にmixinを適用したいと仮定しました。この例では、クラスまたはIDを使用してmixinを適用する方法を示しました。 – costrouc