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

Question

有没有办法将FontAwesome用于网格中的按钮？我试图将其制作为 html - 但 buttos 不解析 html，但我只能将其视为文本。
我还尝试制作一个自定义渲染器（从 https://vaadin.com/forum#!/thread/9418390/9765924 年开始），但它不起作用 - 没有错误，无论我怎么做，它都不会更改文本。

我想在每行都有 3 个带有 FontAwesome 图标和工具提示的按钮。有没有一些简单的方法可以做到这一点？

Answer 1

我想你想要的是可点击的图标，不一定是按钮。

因此，与其使用 ButtonRenderer 添加按钮（您只能为其提供标题），一个简单的解决方案是使用 HtmlRenderer 添加 FontAwesome 图标（每个图标 1 列），然后使用 ItemClickListener . 使用ItemClickEvent#getPropertyId()检测单击了哪一列。

Answer 2

我有一个简单的解决方法来解决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;
        }
    });

我已经在 scss 中为按钮元素输入了正确的字体系列：

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

}

Answer 3

Vaadin 8 的 Pure-Java 解决方案：

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

Answer 4

有很多选择
就像使用 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

但不要忘记将"cssStyleName"添加到css/例如

.cssStyleName {font-family: FontAwesome; }

并收听点击

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

这与Vaadin 8兼容

Answer 5

可以像这样创建一个只有图标和工具提示的按钮：

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

要为每行生成按钮，只需使用任何拟合循环（for 或 while）。