如何將 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 ，所以你也可以查看它們。