CSS標籤樣式Vaadin

我試圖在Vaadin中進行內聯編輯。我認爲實現這一點的好方法是設計文本字段，使它們看起來像標籤，並在關注時切換到文本字段樣式。CSS標籤樣式Vaadin

是否可以將文本字段設置爲標籤樣式？如果可能的話，我該怎麼做？

來源

2013-02-13 akuzma

你有沒有你想要它的樣子的例子？我認爲這是可能的，但「標籤」是相當廣泛的，除非你在談論HTML'' – 2013-02-13 15:05:38

是啊......你看什麼樣子？ – dezman 2013-02-13 15:25:55

我有網格佈局女巫字段，如：「姓名」，「姓氏」，「電話」等和他們的價值觀，我想單擊文本，例如「約翰」和「約翰」應成爲可編輯的文本字段聚焦另一個「約翰」應該是純文本了 – akuzma 2013-02-13 16:16:35

您可以在自己的主題中覆蓋Vaadin樣式。如果您還沒有主題，請在名爲themes的VAADIN目錄下創建一個目錄，然後根據主題名稱在主題中創建一個子目錄，例如。 mytheme的。

Vaadin 6：

呼叫setTheme("mytheme")在你的應用程序類
呼叫myTextField.setStyleName("labelstyle");在你的代碼
在新的主題目錄中創建styles.css的。
添加Styles.css中的以下內容：

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; 
}

Vaadin 7：

添加@Theme("mytheme")標註在UI類
在您的代碼中撥打myTextField.setStyleName("labelstyle");
創建樣式。 scss在您的新主題目錄中。
以樣式添加以下內容。 SCSS

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; 
    } 
}

在主題目錄調用java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css編譯你的主題

這種小伎倆會給你一個標籤般的文本字段當聚焦時它變成正常的TextField。

請注意，這隻適用於使用馴鹿主題和默認背景顏色＃F5F5F5。如果您使用其他主題或背景顏色與原始顏色不同，則必須稍微調整一下。

來源

2013-02-20 20:37:20 miq

文本字段由這個HTML表示：

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

什麼應用此：How to remove border (outline) around text/input boxes? (Chrome)的「V-文本框V-小工具」 CSS？

來源

2013-02-17 12:33:08

CSS標籤樣式Vaadin

回答

相關問題