在Vaadin 8中显示大图标

Question

Vaadin的某些版本提供了FontAwesome内置功能.后来Vaadin带来了自己的图标集.

我怎样才能使用Vaadin 8中的任何一个？

随着对Vaadin Flow(Vaadin 10+)的重新强调以及使用Web Components重新实现,我无法找到有关如何使用这些Vaadin 8兼容字体源的任何文档.

如何在Vaadin 8布局中方便地将一些大图标显示为小部件？

Answer 1

还有对于一些8.x的文档的字体图标和VaadinIcons,以及创建自己的字体图标.

使用它们就像使用它们一样简单new Button("Add", VaadinIcons.PLUS);,但是你提到了一些你从盒子AFAIK开箱的大图标.

但是,根据上述文档,快速而肮脏的解决方案是使用标签和一些样式:

主题:

.big-icon .v-icon{
   font-size: 300px;
 }

码:

public class Icon extends VerticalLayout {
    public Icon() {
        Label image = new Label();
        image.setContentMode(ContentMode.HTML);
        image.setValue(VaadinIcons.EYE.getHtml());
        image.addStyleName("big-icon");
        addComponent(image);
    }
}

结果:

显然你可以继续疯狂,并创建一个稍微更灵活的标签,不需要修改样式,并可以在runtim更新.有点像:

public class Icon extends Label {
    private static final String CONTENT = "<span class=\"v-icon v-icon-%s\" style=\"font-family: %s; color: %s; font-size: %spx;\">&#x%s;</span>";
    private Color color;
    private int size;
    private VaadinIcons icon;

    public Icon(VaadinIcons icon) {
        this(icon, Color.BLACK, 16);
    }

    public Icon(VaadinIcons icon, Color color, int size) {
        this.icon = icon;
        this.color = color;
        this.size = size;
        setContentMode(ContentMode.HTML);
        updateIcon();
    }

    public void setIcon(VaadinIcons icon) {
        this.icon = icon;
        updateIcon();
    }

    public void setSize(int size) {
        this.size = size;
        updateIcon();
    }

    private void updateIcon() {
        setValue(String.format(CONTENT,
                icon.name(),
                icon.getFontFamily(),
                color.name(),
                size,
                Integer.toHexString(icon.getCodepoint())));
    }

    public void setColor(Color color) {
        this.color = color;
    }

    public enum Color {
        BLACK, GREEN
    }
}

凡myLayout.addComponents(new Icon(VaadinIcons.PLUS), new Icon(VaadinIcons.INFO, Icon.Color.GREEN, 200));结果:

可能会有更优雅的解决方案,但这就是我进行头脑风暴,因为到目前为止我还没有这样的需求.我总是使用带有按钮和标签的常规尺寸图标.无论如何,希望这会让你开始.