Question

我无法在actions的{{1}}标签上显示自定义图标。我已经从ng2-smart-table安装了Eva个图标，我想使用它们。我已经更改了编辑按钮以显示一些自定义图标，但是问题是什么也没出现。在删除的左侧，必须出现一个画笔图标。

这是一张有问题的图片：

代码如下：

Akevo Team

Answer 1

尝试一下：

settings = {
hideSubHeader: true,
actions: {
  custom: [
    {
      name: 'edit',
      title: '<nb-icon icon="brush"></nb-icon>'
    },
    {
      name: 'save',
      title: '<nb-icon icon="checkmark"></nb-icon>'
    },
    {
      name: 'cancel',
      title: '<nb-icon icon="close-circle"></nb-icon>'
    }
  ],
  add: false,
  edit: false,
  delete: false
}
...
};

希望这对您有用！

Answer 2

我发现了这个线程： https://github.com/akveo/ng2-smart-table/issues/1034

如上一条评论中所述：

暂时使用旧的星状图标
https://github.com/akveo/nebular-icons/tree/master/src/icons

我下载了所需图标的SVG并将其添加为：

settings = {
  edit: {
    editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
    . . .
  }
. . .
}

效果很好。

Answer 3

您也可以使用其他图标集，例如 material icons，只需将其添加到您的项目中，然后更改您的设置，例如：

 settings = {
    edit: {
      editButtonContent: '<span class="material-icons">mode_edit</span>',
      saveButtonContent: '<span class="material-icons">check_circle</span>',
      cancelButtonContent: '<span class="material-icons">cancel</span>'
    },
    /* ... */
 }

Answer 4

let newSettings = {
           mode: "external",
           actions: {
               add: false,
               edit: false,
               delete: false,
               position: 'right'
           },
           hideSubHeader: true,
           add: {
               addButtonContent: '<i class="nb-plus"></i>',
           },
           edit: {
               editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
           },
           delete: {
               deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
               confirmDelete: true,
           },
}

Answer 5

settings = {
    hideSubHeader: true,
    sort: true,
    actions: {
      position: 'left',
      add: false,
      edit: false,
      delete: false,
      select: false,
      custom: [
        {
          name: 'viewRecord',
          type: 'html',
          title: '<i class="far fa-file-alt" title="View Record"></i>',
        },
        {
          name: 'editRecord',
          type: 'html',
          title: '<i class="far fa-edit" title="Edit Record"></i>',
        },
      ],
    },
    columns: {
      column1: {
        title: 'Column 1',
        type: 'string',
        width: '35%',
      },
      column2: {
        title: 'Column 2',
        type: 'string',
      },
      column3: {
        title: 'Column 3',
        type: 'string',
      },
    },
  };

如何在ng2-smart-table上显示自定义图标？

5 个答案: