vaadin - vaadinでタブバーの色を変更するには?

Question

こんにちは、タブがvaadinでフォーカスされたときにタブの色を変更したいですか?これを実現するためにタブシートをカスタマイズする方法を教えてください..

Answer 1

コンポーネントの DOM 構造を調べるには、firebug などのツールを使用することをお勧めします。たとえば、サンプルの TabSheet の例の DOM 構造を調べると、すべてのタブにスタイル クラス v-tabsheet-tabitem があることがわかります。最初のタブを選択すると、次のスタイル クラス「v-tabsheet-tabitemcell」、「v-tabsheet-tabitemcell-first」、および「v-tabsheet-tabitemcell-selected-first」が取得されます。2 番目のタブを選択すると、次のスタイル クラスが取得されます: "v-tabsheet-tabitemcell" および "v-tabsheet-tabitemcell-selected"。ご覧のとおり、変更する必要があるスタイルは、タブシート内のタブの位置に少し依存しています。

タブの色の変更について、選択したタブのcssを見てみましょう。

.v-tabsheet-tabitemcell-selected {
   background-image:url(common/img/vertical-sprites.png);
   background-position:left -1444px;
}

ご覧のとおり、実際の css は複雑ではありません。ただし、css で使用される手法はあまり一般的ではなく、一種の最適化を使用します。すべての背景画像は 1 つの png 画像に結合され、背景として表示したい画像が得られるように背景画像の位置が調整されます。必要なことは、独自のテーマを作成し、そのイメージを独自のニーズに合わせて変更することです。カスタム テーマの作成の詳細については、Book of Vaadin を確認してください。

Answer 2

実際には、タブの背景を変更するためにテクニック (CSS スプライト) を知る必要はありません。通常の CSS を使用するだけでよく、魔法は必要ありません。

そのため、新しい背景画像 (単色では不十分) を作成し、それを関連する要素の背景に設定します。タブに含まれるすべての関連要素について繰り返します (背景も指定されている場合があります)。

Vaadin トナカイ テーマの元の画像を変更したい場合は、ここから見つけることができます: http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img