Salut voulez changer la couleur de l'onglet lorsque l'onglet se concentrer dans Vaadin? Quelqu'un peut me aider à personnaliser tabsheet à achive ce ..Comment changer la couleur de la barre d'onglets dans vaadin?
Il est une bonne idée d'utiliser un outil comme Firebug pour inspecter la structure DOM des composants. Par exemple, lors de l'examen de la structure DOM de l'exemple TabSheet dans l'exemple, vous verrez que tous les tabulations ont la classe de style v-tabsheet-tabitem. Si vous sélectionnez le premier onglet, il recevra la classe de style suivante: "v-tabsheet-tabitemcell", "v-tabsheet-tabitemcell-first" et "v-tabsheet-tabitemcell-selected-first". Si vous sélectionnez le second onglet, il recevra les classes de style suivantes: "v-tabsheet-tabitemcell" et "v-tabsheet-tabitemcell-selected". Comme vous le verrez, les styles que vous devez modifier dépendent un peu de la position de l'onglet dans l'onglet. À propos de la modification de la couleur de l'onglet, jetons un coup d'œil au CSS de l'onglet sélectionné.
.v-tabsheet-tabitemcell-selected {
background-image:url(common/img/vertical-sprites.png);
background-position:left -1444px;
}
Comme vous pouvez le voir, le css réel n'est pas compliqué. La technique utilisée dans le CSS est cependant moins courante, elle utilise une sorte d'optimisation. Toutes les images d'arrière-plan sont jointes dans une seule image png et la position de l'image d'arrière-plan est ajustée de sorte que nous obtenons l'image que nous voulons montrer comme arrière-plan. Ce que vous devez faire, c'est créer votre propre thème et modifier cette image pour répondre à vos propres besoins. Consultez le livre de Vaadin pour plus de détails sur la création de thèmes personnalisés.
En fait, vous n'avez pas besoin de connaître la technique (sprites CSS) pour changer l'arrière-plan des onglets. Vous n'aurez besoin que d'utiliser des CSS standards, sans magie.
Créez une nouvelle image d'arrière-plan (d'une couleur unie ne suffit pas) et réglez-la sur l'arrière-plan de l'élément concerné. Répétez l'opération pour tous les éléments pertinents contenus dans l'onglet (ils peuvent également spécifier un arrière-plan).
Si vous souhaitez modifier les images originales du thème du renne Vaadin, ils se trouvent d'ici: http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img