3

Vaadin でインライン編集を行おうとしています。それを達成するための良い方法は、テキスト フィールドをラベルのようにスタイリングし、フォーカスされたときにテキスト フィールドのスタイルに切り替えることだと思います。

テキストフィールドをラベルのようにスタイルすることはできますか? 出来るとしたらどうやったら作れますか?

4

2 に答える 2

5

独自のテーマで Vaadin スタイルをオーバーライドできます。テーマをまだ持っていない場合は、VAADIN ディレクトリの下にthemesディレクトリを作成し、テーマのサブディレクトリをテーマの名前で作成します。私のテーマ。

ヴァーディン 6:

  1. setTheme("mytheme")アプリケーション クラスで呼び出す
  2. myTextField.setStyleName("labelstyle");コードを呼び出す
  3. 新しいテーマ ディレクトリに styles.css を作成します。
  4. styles.css に次を追加します。

スタイル.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:

  1. @Theme("mytheme")UI クラスに注釈を追加する
  2. myTextField.setStyleName("labelstyle");コードを呼び出す
  3. スタイルを作成します。scssを新しいテーマ ディレクトリに追加します。
  4. スタイルに以下を追加します。scss

スタイル.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 に変わる Label のような TextField が得られます。

これは、トナカイのテーマとデフォルトの背景色 #F5F5F5 を使用している場合にのみ機能することに注意してください。他のテーマを使用している場合、または背景色がオリジナルと異なる場合は、少し調整する必要があります。

于 2013-02-20T20:37:20.600 に答える
1

テキストフィールドは次のHTMLで表されます。

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

これを適用するのはどうですか:テキスト/入力ボックスの周りの境界線(アウトライン)を削除する方法は?(Chrome)「v-textfieldv-widget」CSSで?

于 2013-02-17T12:33:08.677 に答える