Question

有没有办法在Grid中使用FontAwesome按钮？我试图把它作为一个HTML - 但buttos不解析HTML但我只能将其视为文本。
我也尝试制作一个自定义渲染器（来自https://vaadin.com/forum#!/thread/9418390/9765924），但它不起作用 - 没有错误，它不会改变文本，无论我怎么做。

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

Answer 1

我对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;
        }
    });

我为按钮元素输入了正确的font-family：

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

}

Answer 2

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

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

Answer 3

Vaadin 8的纯Java解决方案：

"compilerOptions": {
        ...,
        "lib": [
            "es2015",
            "es2015.iterable",
            "dom"
        ],
        "types": ["node"],
        ...
    }

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）。

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

5 个答案: