Vaadin 10中的ExternalResource-按钮的自定义图标
我想使用一个自定义图标从一个图片文件在瓦丁10 在Vaadin 8之前,可以通过ExternalResource加载图标文件:Vaadin 10中的ExternalResource-按钮的自定义图标,vaadin,vaadin10,vaadin-flow,Vaadin,Vaadin10,Vaadin Flow,我想使用一个自定义图标从一个图片文件在瓦丁10 在Vaadin 8之前,可以通过ExternalResource加载图标文件: public final static Resource MY_ICON = new ExternalResource("VAADIN/images/my_icon.png"); 然后将资源用作图标: Button button = new Button("My Button text"); button.setIcon(MY_ICON); Vaadin 10
public final static Resource MY_ICON = new ExternalResource("VAADIN/images/my_icon.png");
然后将资源用作图标:
Button button = new Button("My Button text");
button.setIcon(MY_ICON);
Vaadin 10中的setIcon方法需要一个组件作为参数。如何将图标加载到组件中?vaadin 10中是否有现成的解决方案
我更喜欢像vaadin 7/8那样使用纯java的解决方案。我建议将您的图标文件设置为
/src/main/webapp/my_icon.png
(或者/src/main/resources/META-INF/resources/my_icon.png
,如果打包为.jar
)。然后,您可以使用内置的com.vaadin.flow.component.html.Image
组件在应用程序中的任何位置使用它,例如add(新图像(“my_icon.png”、“my icon”)代码>我还将发布我自己的解决方案,因为它专门用于按钮图标样式。
您必须首先将图标文件加载到vaadin图像(com.vaadin.flow.component.html.Image)中。但它也需要一些额外的样式来正确定位按钮中的图标
import com.vaadin.flow.component.html.Image;
public enum MyIcons {
ICON_1("frontend/img/icon_1.png", ""),
ICON_2("frontend/img/icon_2.png", ""):
private String url;
private String alt;
MyIcons(String url, String alt) {
this.url = url;
this.alt = alt;
}
public Image create() {
Image image = new Image(url, alt);
image.getStyle().set("vertical-align", "middle"); // otherwise the icon will be just on the top left corner in the button
return image;
}
/**
* marign right distance if using Icon in Button with Text. so there is space between the icon and the button text
* @param margin_right
* @return
*/
public Image create(int margin_right) {
Image image = create();
image.getStyle().set("margin-right", margin_right+"px"); //some space between icon and button text
return image;
}
}
用法:
Button button = new Button();
button.setIcon(MyIcons.ICON_1.create());
Button buttonWithText = new Button("My button text");
buttonWithText.setIcon(MyIcons.ICON_1.create(), 10); //10px space between icon and button text
谢谢你的快速帮助。我在论坛上也找到了这个解决方案。我还将发布我的解决方案,因为它还需要一些样式,以便在按钮中进行适当的定位。