vaadin에서 tabbar 색상을 변경하는 방법은 무엇입니까?

Question

안녕하세요, tab이 vaadin에서 포커스를 얻었을 때 탭 색상을 변경하고 싶습니다.이 탭 시트를 사용자 정의하는 방법을 도와 줄 수 있습니까?

Answer 1

DOM 구조를 조사하기 위해 방화 광구와 같은 도구를 사용하는 것이 좋습니다. 구성 요소의. 예를 들어 샘플에서 TabSheet 예제의 DOM 구조를 검사하면 모든 탭에 스타일 클래스 v-tabsheet-tabitem이 있음을 알 수 있습니다. 첫 번째 탭을 선택하면 "v-tabsheet-tabitemcell", "v-tabsheet-tabitemcell-first"및 "v-tabsheet-tabitemcell-selected-first"스타일 클래스가 생성됩니다. 두 번째 탭을 선택하면 "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에서 사용되는 기술은 그렇게 일반적이지는 않지만 일종의 최적화를 사용합니다. 모든 배경 이미지는 하나의 단일 PNG 이미지에 결합되며 배경 이미지의 위치는 배경으로 표시하려는 이미지를 얻을 수 있도록 조정됩니다. 당신이해야 할 일은 자신 만의 테마를 만들어서 자신의 필요에 맞게 이미지를 수정하는 것입니다. 맞춤 테마 만들기에 대한 자세한 내용은 Book of Vaadin을 확인하십시오.

Answer 2

사실, 탭의 배경을 변경하기 위해 기술 (CSS 스프라이트)을 알 필요가 없습니다. 규칙적인 CSS 만 사용하면됩니다. 마법은 필요 없습니다.

따라서 새로운 배경 이미지 (단색으로는 충분하지 않음)를 만들고 관련 요소의 배경으로 설정하십시오. 탭에 포함 된 모든 관련 요소에 대해 반복합니다 (일부 배경을 지정할 수도 있음).

Vaadin Reindeer 테마의 원본 이미지를 수정하려는 경우 여기에서 확인할 수 있습니다. http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img