Vaadin：使用图像作为按钮

Question

我想使用图像作为按钮。我让它工作了，但是制作得不是很好，请看一下屏幕截图。如您所见，按钮本身比图像大很多，但我希望它与图像一样大：

实际的按钮比图像大。这里的目标是除了要单击的图像之外别无其他。我怎样才能做到这一点？这是屏幕截图中按钮的代码：

 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

对我有用：

  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？

也许您的按钮包含在具有固定高度的布局中？

还要确保您的按钮未配置 width/height，以便它可以自动调整其大小以适应图标图像的大小。

您可能运行遇到的下一个问题是焦点边框：

另一种方法是使用布局点击侦听器，并通过 CSS 添加您自己的 mouse-over/hover/focus 样式。

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

Answer 2

您可以简单地向图像添加点击侦听器，而不是使用按钮。

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 3

使用 Vaadin 14：

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

非常简单。

Vaadin：使用图像作为按钮

Vaadin: Using an image as a button

css

java

vaadin

vaadin7