Vaadin：使用图像作为按钮

Question

我想将图像用作按钮。我得到了它的工作，但它不是很好，请看一下截图。正如您所看到的，Button本身比图像大很多，但我希望它与图像一样大：

实际的Button比Image大。这里的目标是除了要点击的图像之外什么都没有。我怎样才能做到这一点？以下是屏幕截图中按钮的代码：

 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)

使按钮不可见，但不幸的是，它不会调整按钮的大小，只是可视性..

Answer 1

您只需向图片添加点击列表器，而不是使用按钮。

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

Answer 2

它对我有用：

  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"));

Answer 3

使用Vaadin 14：

Image img = new Image("src");
Button testButton = new Button(img);

非常简单。