如何更改制表符中的排序箭头颜色

Question

我正在尝试更改制表符列中的排序箭头颜色 header。尝试了所有组合：

.tabulator .tabulator-header .tabulator-col .tabulator-arrow

还是换不了颜色？

Answer 1

这是因为它是一个 CSS 箭头，所以它实际上是您需要更改的边框颜色，有几种方法可以做到这一点。

SCSS

如果你想使用 SCSS 更新实际的源文件，那么你可以更新 tabulator.scss 文件中的几个变量和运行 gulp 到获取 CSS 文件

的更新版本

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

CSS

如果您只想覆盖现有样式，则需要在几个地方调整颜色（确保在包含样式表后执行此操作）：

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #666;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
  border-top: 6px solid #666;
}

#666 和 #bbb 值分别与活动值和非活动值相关

Answer 2

在最新版本中，您似乎需要包含 border-top 和 border-bottom 属性，否则您会同时获得向上箭头和向下箭头。

使用原色尝试这些示例，看看效果如何。

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
        background-color: red;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid green;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid blue;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
        border-top: 6px solid orange;
        border-bottom: none;
    }

如何更改制表符中的排序箭头颜色

How to change the sort arrow colour in Tabulator

jquery

tabulator

SCSS

CSS