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

Question

Grid 中的按钮有没有办法使用FontAwesome？我试图将其设为 html - 但按钮不解析 html 但我只能将其视为文本。
我还尝试制作自定义渲染器（来自 https://vaadin.com/forum#!/thread/9418390/9765924），但它不起作用 - 没有错误，无论我如何做，它都不会更改文本。

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

Answer 1

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

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

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

Answer 2

我有一个简单的 FontIcon 问题解决方法。

我使用了普通的 ButtonRenderer 并且我已经将 PropertyValueGenerator 对象的 getValue() 方法覆盖为 return 图标代码点。

 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

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

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

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

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);

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

Fill buttons in grid with FontAwesome icons and add tooltips to them

java

vaadin

font-awesome