Внешний ресурс в Vaadin 10 - Пользовательские иконки для кнопок - PullRequest
Новая
       8

Внешний ресурс в Vaadin 10 - Пользовательские иконки для кнопок

0 голосов
/ 07 ноября 2018

Я хотел бы использовать пользовательский значок из файла изображения в Vaadin 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);

Метод setIcon в Vaadin 10 требует компонента в качестве параметра. Как я могу загрузить свой значок в компонент? Есть ли в Ваадине 10 нестандартное решение?

Я бы предпочел решение с чистой Java, как в vaadin 7/8.

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Я также опубликую свое собственное решение, так как оно относится к стилю кнопок Сначала вы должны загрузить файл значка в изображение 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
0 голосов
/ 07 ноября 2018

Я бы порекомендовал поставить файл значка как /src/main/webapp/my_icon.png (или /src/main/resources/META-INF/resources/my_icon.png, если упаковка .jar). Затем вы можете использовать его в любом месте вашего приложения, используя встроенный компонент com.vaadin.flow.component.html.Image, например, add(new Image("my_icon.png", "My icon"));.

...