Vaadin：將圖片用作按鈕

我想將圖片用作按鈕。我得到它的工作，但它不是很好，請看看截圖。正如你所看到的按鈕本身比圖像大很多，但我想這是一樣大的圖像：Vaadin：將圖片用作按鈕

實際的按鈕比圖片大。這裏的目標是沒有任何東西，只有點擊的圖像。我怎樣才能做到這一點？下面是截圖按鈕國稅發代碼：

Button testButton = new Button(); 
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath(); 
testButton.setIcon(new FileResource(new File(basepath + "/VAADIN/themes/mytheme/img/Button.png"))); 
loginForm.addComponent(testButton);

我知道

testButton.setStyleName(BaseTheme.BUTTON_LINK)

使得按鈕無形的，但不幸的是，不調整按鈕的大小，只是visbility ..

來源

2016-11-28 Tobias Kuess

您可以簡單地將點擊列表添加到圖片而不是使用按鈕。

Image image = new Image(null, new ClassResource("/images/button-img.jpg"); 
image.addClickListener(e -> System.out.println("click")); 
image.addStyleName("my-img-button");

並添加這個CSS，我用的是@Stylesheet註釋在CSS中添加。

.my-img-button { 
cursor: pointer; 
}

來源

2016-11-28 16:40:17

這有效，但它不會改變鼠標圖標，所以它有一個奇怪的反饋.. –

你可以解決這一點的CSS –

工作正常 - 我可以在這裏使用Vaadin的ClickListeners？ image.addClickListener（new ClickListener（）{...}））;在這裏不起作用.. –

它爲我的作品：

Button button = new Button(); 
    button.setStyleName(ValoTheme.BUTTON_LINK); 
    button.setIcon(new ClassResource("/images/button-img.jpg")); 
    button.addClickListener(e -> System.out.println("click"));

也許你額外的CSS定義？

也許您的按鈕包含在具有固定高度的佈局中？

此外，請確保您的按鈕沒有配置寬度/高度，因此它可以自動調整其大小以適應圖標圖像的大小。

，你可能會遇到的一個問題是重點邊境：

另一種方法是使用一個佈局點擊監聽器，並添加自己的鼠標懸停/懸停/通過CSS聚焦樣式。

VerticalLayout layout = new VerticalLayout(new Image(null, new ClassResource("/images/test.png"))); 
layout.addLayoutClickListener(e -> System.out.println("click"));

來源

2016-11-28 15:15:24 Zalumon

你是對的，還有一些額外的CSS導致了這一點。我找到了它的確切屬性，但我不能影響或改變它，因爲它只出現在由框架生成的style.css中。我無法在CSS文件本身中進行更改，但在scss文件中找不到它。有什麼建議麼？ –

Vaadin：將圖片用作按鈕

回答

相關問題