CSS 라벨 스타일 Vaadin

Question

Vaadin에서 인라인 편집을하려고합니다. 그 좋은 방법은 그것들을 라벨처럼 보이게하기 위해 텍스트 필드 들인 을 스타일링하는 것입니다. 그리고 초점을 맞출 때 텍스트 필드의 스타일로 전환하는 것이 좋습니다.

텍스트 필드를 레이블처럼 보이게 스타일화할 수 있습니까? 가능하면 어떻게 할 수 있습니까?

Answer 1

자신의 테마에서 바아 진 스타일을 무시할 수 있습니다. 아직 테마가 없으면 VAADIN 디렉토리에 themes이라는 디렉토리를 만들고 테마의 이름으로 하위 디렉토리를 만듭니다 (예 : mytheme.

angel이라는 6 :

새 테마 디렉토리에 styles.css가 생성 코드에서 응용 프로그램 클래스

전화 myTextField.setStyleName("labelstyle");에서

1. 전화 setTheme("mytheme").
이

을 styles.css :

@import "../reindeer/styles.css"; 

.v-textfield-labelstyle { 
    background: none repeat scroll 0 0 #F5F5F5; 
    border-color: #F5F5F5; 
    border-image: none; 
    border-left: 1px solid #F5F5F5; 
    border-radius: 3px 3px 3px 3px; 
    border-right: 1px solid #F5F5F5; 
    border-style: solid; 
    border-width: 1px; 
} 

angel이라는 7 :

은을 styles.css에 다음을 추가

1. 당신의 UI 클래스에 @Theme("mytheme") 주석을 추가
2. 코드에 myTextField.setStyleName("labelstyle");으로 전화하십시오.
3. 스타일을 만듭니다. scss 새 테마 디렉토리에 있습니다.
4. 다음을 스타일에 추가하십시오. 하는 SCS

을 styles.css :

@import "../reindeer/reindeer.scss"; 

.mytheme { 
    @include reindeer; 

    .v-textfield-labelstyle { 
     background: none repeat scroll 0 0 #F5F5F5; 
     border-color: #F5F5F5; 
     border-image: none; 
     border-left: 1px solid #F5F5F5; 
     border-radius: 3px 3px 3px 3px; 
     border-right: 1px solid #F5F5F5; 
     border-style: solid; 
     border-width: 1px; 
    } 
} 

1. 이 테마 디렉토리에 java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css를 호출하여 테마를 컴파일

이 작은 트릭은 당신에게 라벨과 같은 텍스트 필드를 줄 것이다 이것은 초점이 맞춰지면 일반 TextField로 바뀝니다.

이 기능은 Reindeer 테마와 기본 배경색 # F5F5F5를 사용할 때만 작동합니다. 다른 테마를 사용하거나 배경색이 원본과 다른 경우 약간 조정해야합니다.

Answer 2

텍스트 필드는이 HTML로 표현된다 :

<input type="text" class="v-textfield v-widget" tabindex="0" style=""> 

이것이 적용하는 방법에 대한 "V-텍스트 필드의 V-위젯"CSS에 How to remove border (outline) around text/input boxes? (Chrome)를?