用图标填充网格中的按钮并向其添加工具提示

sh7euo9m  于 2021-07-13  发布在  Java
关注(0)|答案(5)|浏览(380)

有没有办法在网格中使用按钮?我试图使它成为一个html-但按钮不解析html,但我只能看到它作为文本。
我还尝试了自定义渲染器(从https://vaadin.com/forum#!/线程/9418390/9765924),但它不工作-没有错误,它只是不会改变文本,无论我怎么做。
我想有3个按钮的图标和工具提示在每一行。有什么简单的方法吗?

rsl1atfo

rsl1atfo1#

我猜你想要的是可点击的图标,而不一定是按钮。
所以不用 ButtonRenderer 要添加按钮(只能提供标题),一个简单的解决方案是使用 HtmlRenderer 要添加fontawesome图标(每个图标一列),请使用 ItemClickListener . 使用 ItemClickEvent#getPropertyId() 以检测单击的列。

h4cxqtbf

h4cxqtbf2#

对于fonticon问题,我有一个简单的解决方法。
我使用了一个普通的buttonrenderer,并重写了propertyvaluegenerator对象的getvalue()方法来返回图标代码点。

wrapperContainer.addGeneratedProperty("delete", new PropertyValueGenerator<String>() {
        @Override
        public String getValue(Item item, Object itemId, Object propertyId) {
            return "\uF014"; //FontAwesome.TRASH_O
        }

        @Override
        public Class<String> getType() {
            return String.class;
        }
    });

我为按钮元素添加了正确的字体系列:

button {
  border: 0;
  background-color: transparent;
  background-size: 25px;
  color: $v-blue-color;
  font-family: FontAwesome;
  height: 25px;
  width: 25px;

}

8nuwlpux

8nuwlpux3#

vaadin 8的纯java解决方案:

final ButtonRenderer<Person> renderer = new ButtonRenderer<>(event -> onPersonClicked(event.getItem()));
    renderer.setHtmlContentAllowed(true);
    grid.addColumn(person -> VaadinIcons.EXTERNAL_BROWSER.getHtml(), renderer).setWidth(60);
yhuiod9q

yhuiod9q4#

有很多选择
像添加htmlrenderer或cellstylegenerator等
但htmlrenderer上传的每一行像这样的数据

25=<span class="v-icon v-icon-caret_square_up_o" style="font-family: Vaadin-Icons;">&#xe7c2;</span>

这是网络流量的大问题
所以我喜欢用

Grid.Column gridColumn = grid.addColumn(a -> (char) FontAwesome.BTC.getCodepoint());
gridColumn.setStyleGenerator(item -> "cssStyleName");

如您所见,使用这种网络会更好

27= //unshowing character is icon character code

但是不要忘记在css/中添加“cssstylename”

.cssStyleName {font-family: FontAwesome; }

听你的声音

grid.addItemClickListener(event -> {
   if (!event.getMouseEventDetails().isDoubleClick()) {
       //To Do
   }
}

这与vaadin 8相容

cidc1ykv

cidc1ykv5#

仅包含图标和工具提示的按钮可以如下创建:

Button button = new Button(FontAwesome.ANDROID);
button.setDescription("Any tooltip");

要为每行生成按钮,只需使用任何拟合循环(for或while)。

相关问题