Vaadin でインライン編集を行おうとしています。それを達成するための良い方法は、テキスト フィールドをラベルのようにスタイリングし、フォーカスされたときにテキスト フィールドのスタイルに切り替えることだと思います。
テキストフィールドをラベルのようにスタイルすることはできますか? 出来るとしたらどうやったら作れますか?
独自のテーマで Vaadin スタイルをオーバーライドできます。テーマをまだ持っていない場合は、VAADIN ディレクトリの下にthemes
ディレクトリを作成し、テーマのサブディレクトリをテーマの名前で作成します。私のテーマ。
ヴァーディン 6:
setTheme("mytheme")
アプリケーション クラスで呼び出すmyTextField.setStyleName("labelstyle");
コードを呼び出すスタイル.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;
}
ヴァーディン7:
@Theme("mytheme")
UI クラスに注釈を追加するmyTextField.setStyleName("labelstyle");
コードを呼び出すスタイル.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;
}
}
java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css
テーマ ディレクトリで呼び出して、テーマをコンパイルします。このちょっとしたトリックにより、フォーカスされると通常の TextField に変わる Label のような TextField が得られます。
これは、トナカイのテーマとデフォルトの背景色 #F5F5F5 を使用している場合にのみ機能することに注意してください。他のテーマを使用している場合、または背景色がオリジナルと異なる場合は、少し調整する必要があります。
テキストフィールドは次のHTMLで表されます。
<input type="text" class="v-textfield v-widget" tabindex="0" style="">
これを適用するのはどうですか:テキスト/入力ボックスの周りの境界線(アウトライン)を削除する方法は?(Chrome)「v-textfieldv-widget」CSSで?