如何将 aurelia slickgrid rowdetail“+”图标更改为另一个？

Question

我正在使用带有“ RowDetailView ”选项的 aurelia-slickgrid库，其中有以下图标：

是否可以覆盖某处或其他任何地方的 gridOptions 以使用另一个图标？ 目前我正在使用这样的 rowdetail 选项：

    gridOptions = {
    ....
     rowDetailView: {
    ....
    //is there something that can change the default icon?
     }

}

Answer 1

您可以通过更改与SASS 变量关联的任何图标来更改图标。 您还可以使用 CSS 变量，请参阅底部。

默认变量具有以下 Font-Awesome 4 图标（十六进制值可以从 Font-Awesome 网站找到），如果您使用字体，那么您将始终具有关联的十六进制值：

$slick-detail-view-icon-collapse: "\f056";
$slick-detail-view-icon-expand:   "\f055";

当您使用字体时，您将始终拥有一个十六进制值（如上所示），您可以使用任何其他字体（不仅仅是 Font-Awesome），但如果您这样做，请不要忘记更改关联的 SASS 变量（下面是 Font-Awesome 4)

$slick-icon-font-family: "FontAwesome";

您也可以使用 SVG，这就是我创建 Salesforce 和Material Themes 的方式（从Material Design Icons复制 SVG 路径），例如

$slick-detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$slick-detail-view-icon-expand:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');

您还可以使用 CSS 变量，这些变量也可以通过将$前缀替换为--

:root {
    --slick-detail-view-icon-collapse: "\f056";
    --slick-detail-view-icon-expand: "\f055";
}

实际上我写了所有这个答案，但事实上它在我创建的关于同一主题的多个 Wiki 中也有很好的解释， Styling - Wiki和SVG Icons - Wiki ，所以你也可以查看它们。